QQ在线客
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位实现QQ客f</title>
<style>
body {
margin: 0;
height: 1500px;
background-color: #999999;
}
.qq {
width: 100px;
height: 250px;
position: fixed;
bottom: 5px;
right: 5px;
background-color: #fff;
border-radius: 15px;
text-align: center;
border: 1px solid #c0c0c0;
}
.qq img{
width: 80px;
}
p{
color: #ff0000;
}
</style>
</head>
<body>
<div class="qq">
<div class="qq1">
<p>客f小美</p>
<a href="http://bizapp.qq.com/webimg/10_online.gif"><img src="http://bizapp.qq.com/webimg/10_online.gif" alt=""></a>
</div>
<div class="qq2">
<p>客f小丽</p>
<a href="http://bizapp.qq.com/webimg/10_online.gif"><img src="http://bizapp.qq.com/webimg/10_online.gif" alt=""></a>
</div>
<div class="qq3">
<p>客f小兰</p>
<a href="http://bizapp.qq.com/webimg/10_online.gif"><img src="http://bizapp.qq.com/webimg/10_online.gif" alt=""></a>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图文混排
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style>
body{
margin: 0;
background-color: lightpink;
}
.boxss{
width: 80%;
margin: auto;
}
.box h1,p{
margin:0;
}
.box{
width: 80%;
border: 2px dashed lightcoral;
border-radius: 20px;
padding: 20px;
margin: 30px auto;
background-color: #ffffff;
}
.box img{
float: left;
margin: 0px 20px 20px 0px;
width: 300px;
}
.box p{
font-size: 1rem;
font-family: "微软雅黑";
line-height: 1.5rem;
color: lightslategrey;
text-indent: 2rem; /*缩进两个字符*/
}
.box h1{
text-align: center;
color: lightseagreen;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="boxss">
<div class="box">
<h1>学php需要掌握什么基础？</h1>
<img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=187afb979e82d158af8f51e3e16372bd/2f738bd4b31c870168f8cf9f257f9e2f0708ff79.jpg" alt="">
<p>本文为大家介绍学习PHP前需要掌握的基础知识。很多人认为php可以从零基础开始学习，也就是不用学其他任何东西就可以直接去学php。的确，php入门简单，与其他知识也不挂钩，可以零基础学起，不需要具备其他知识。但是以我看来，学习php前还是得要掌握一些有关网页制作方面基础知的。学习php前，个人推荐是：hmtl -> css -> JavaScript -> MySQL（也就是SQL语句） -> php。
html，css，javascript主要是用来做前台页面的，有人会问，既然我是学php，做的是后台程序，为什么要学前台制作呢？再说，大公司对于前台，后台，美工等不都有明确分工吗，还用的着我去写？是的，但是那是大公司，对于小公司来讲这些都是要一个人完成的。从页面设计，页面布局，美工，再到后台处理都是一个人或者几个人完成，没有明确的分工。所起必须前台，后台都会。在大公司里面，虽然有明确的分工，前台的这些东西虽然不要求你写，但是你必须看的懂。
mysql要掌握的就是sql语句，无非就是增、删、该、查，还有数据库优化等，这些比较简单，学起来也比较快，也是必须要掌握的知识。
至于ajax，jQuery这些知识，当你的php学到一定程度的时候，可以考虑去学这些，因为在很多大型项目里面都要用到ajax，特别是聊天室。
下面列出学习php需要做到的：
1，保证你在手册的帮助下能看懂PHP代码。
2，保证你可以基本使用MySQL，常用的查询，包括联合查询都要会。MySQL的安装和用户权限配置要会。
3，保证你熟练使用table，理解HTML的数据组织和显示逻辑。
4，保证你理解CSS并可以进行DIV+CSS的布局，掌握 DIV , UL , DL , SPAN , P 等常见标记。（如果是专业人员，还要学习浮动，定位，lightbox等）。
5，保证你可以写常用的Javascript代码，并开始学习Javascript的库，例如jquery。学习js的库记住不要一下子去看源代码，先看手册然后根据例子学习，学会调用就可以了。（专业前台要研究库文件）。
1~5完成后，你就掌握了基本功，并且具备了单个文件处理问题的能力。这个时候开始学习业务逻辑。什么业务逻辑呢，就是通过代码的组织做出一个一个使用的功能。最基本的就是留言本了。这个部分最重要的就是理解，网站显示习惯，设置习惯，管理习惯，用户发布习惯。
6，熟练编写 留言本。可以熟练地通过几个PHP文件来实现小功能。比如，那些文件用来显示，哪些文件用来管理，哪些文件用来发布内容。并且粗略了解了会员功能。（可以下载留言本程序研究学习）。
7，开始接触大点的项目。先了解网站的网页流程。培养流程思路。这个时候，可以多装几个开源的PHP产品（包括国内外的），例如Discuz，DeDeCMS，Drupal等等。先不看这些产品的核心代码。看些配置，安装，模板的应用和接口。
8，开始了解网站业务架构，包括前台，后台，会员，数据流（用户到数据库，数据库到用户）。熟练掌握流程设计，比如要增加一个图片上传功能，需要几个文件。
9，找工作进行实践，一开始不要太挑剔，但是一定要找让你发挥的公司，开始接触需求，如何整理文档，解决bug。
10，在工作半年到一年左右，开始进行总结，根据选择的公司和你所做的应用，开始总结开发模式，模板引擎，数据库设计，等。</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header,.footer{
width: 100%;
height: 50px;
background-color: #FF8500;
text-align: center; /*实现子元素水平居中*/
}
.content{
width: 900px;
min-height: 100%;
margin: auto;
line-height: 50px; /*实现自身垂直居中*/
font-size: 40px;
color: #ffffff;
}
.container{
width: 900px;
background-color: #efefef;
margin: 10px auto;
overflow: hidden; /*消除子元素浮动对父元素的影响，给父级元素添加溢出隐藏*/
}
.wrap{
width: 100%;
float: left;
}
.main{
/*主体内容区不要浮动*/
min-height: 600px;
margin: 0 210px;
}
.left{
width: 198px;
min-height: 650px;
background-color: #ffffff;
float: left;
margin-left: -100%;
border: 1px solid #ea4335;
}
.right{
width: 198px;
min-height: 650px;
background-color: #ffffff;
float: left;
margin-left: -200px;
border: 1px solid #ea4335;
}
.left p {
margin-left: 20px;
}
.left .zhuti,.right .zhuti{
margin: 0;
height: 25px;
background-color: #ea4335;
color: #ffffff;
text-align: center;
line-height: 25px;
}
.right img{
margin: 10px 0 0 20px;
}
.main .img1{
width: 480px;
}
.main .img2{
width: 235px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">淘宝网</div>
</div>
<!--页面主体-->
<div class="container">
<!--双飞翼布局的主题内容需要优先渲染，所以把他拿出来放到左右侧的上面-->
<div class="wrap">
<div class="main">
<img class="img1" src="https://img.alicdn.com/tfs/TB1dqavpHZnBKNjSZFKXXcGOVXa-520-280.png_q90_.webp" alt="">
<p>
<img class="img2" src="https://aecpm.alicdn.com/simba/img/TB1X6uHLVXXXXcCXVXXSutbFXXX.jpg" alt="">
<img class="img2" src="https://aecpm.alicdn.com/simba/img/TB13xKuLVXXXXcHapXXSutbFXXX.jpg" alt="">
</p>
<img class="img2" src="https://img.alicdn.com/tps/i4/TB1BQN_XtVIxuRkSR3gSutNdFXa.jpg_240x240q90.jpg" alt="">
<img class="img2" src="https://img.alicdn.com/tps/i4/TB15J6cpiMnBKNjSZFzSuw_qVXa.jpg_240x240q90.jpg" alt="">
</div>
</div>
<div class="left">
<p class="zhuti">主题专场</p>
<p>女 / 男 / 内</p>
<p>鞋 / 箱 / 配</p>
<p>童 / 孕 / 用</p>
<p>家 / 数 / 手</p>
<p>美 / 洗 / 保</p>
<p>珠 / 眼 / 手</p>
<p>运 / 外 / 乐</p>
<p>游 / 动 / 影</p>
<p>美 / 生 / 零</p>
<p>鲜 / 宠 / 农</p>
<p>工 / 装 / 建</p>
<p>家 / 家 / 家</p>
<p>汽 / 二 / 用</p>
<p>办 / DIY / 五</p>
<p>百 / 餐 / 家</p>
<p>学 / 卡 / 本</p>
</div>
<div class="right">
<p class="zhuti">今日特卖</p>
<p><img src="https://img.alicdn.com/tfs/TB19dJMoSMmBKNjSZTEXXasKpXa-160-280.jpg_290x290q90.jpg" alt=""></p>
<p><img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt=""></p>
</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">淘宝网-淘！我喜欢！</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.header,.footer{
width: 100%;
height: 50px;
background-color: #888888;
text-align: center; /*实现子元素水平居中*/
clear: both;
}
.content{
width: 900px;
min-height: 100%;
background-color: #aaccff;
margin: auto;
line-height: 50px; /*实现自身垂直居中*/
}
.container {
width: 500px;
margin: auto;
background-color: #ea4335;
}
.container .main{
width: 100%;
min-height: 600px;
background-color: #ffff0a;
float: left;
}
.container .left{
width: 200px;
min-height: 600px;
background-color: #862301;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.container .right{
width: 200px;
min-height: 600px;
background-color: #666666;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部内容</div>
</div>
<!--页面主体-->
<div class="container">
<!--圣杯布局-->
<div class="main">主题内容</div>
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
</div>
<!--底部-->
<div class="footer">
<div class="content">底部内容</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄作业
