1.div和span
（1）div和span在整个HTML标记中，没有任何意义，他们的存在就是为了应用CSS样式
（2）div和span的区别在于，span是内联元素，div是块级元素
2.盒模型
| margin | 盒子外边距 |
| padding | 盒子内边距 |
| border | 盒子边框宽度 |
| width | 盒子宽度 |
| height | 盒子高度 |
3.布局相关的属性
（1）position定位方式
| relative | 正常定位 |
| absolute | 根据父元素进行定位 |
| fixed | 根据浏览器窗口进行定位 |
| static | 没有定位 |
| inherit | 继承 |
（2）定位
left、right、top、bottom离页面顶点的距离
（3）z-index层覆盖先后顺序（优先级）
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（布局相关的属性）</title> 6 <style type="text/css"> 7 body{ 8 padding: 0px; 9 margin:0; 10 } 11 12 .div{ 13 width:300px; 14 height:300px; 15 background-color: green; 16 position: relative; 17 left:10px; 18 top:10px; 19 z-index:1; 20 } 21 span{ 22 position:absolute; 23 background-color: #ff6600; 24 color:white; 25 top:-10px; 26 right:0; 27 z-index:0; 28 } 29 .fixed{ 30 position:fixed; 31 background-color: #f60; 32 color:white; 33 top:100px; 34 z-index:2; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="div"> 40 <span>浏览次数：222</span> 41 </div> 42 <div class="fixed"> 43 <p>联系电话：13816888888</p> 44 <p>联系QQ：55888888</p> 45 <p>联系地址：江苏省南京市</p> 46 </div> 47 <br/> 48 <br/> 49 <br/> 50 <br/> 51 <br/> 52 <br/> 53 <br/> 54 <br/> 55 <br/> 56 <br/> 57 <br/> 58 <br/> 59 <br/> 60 <br/> 61 <br/> 62 <br/> 63 <br/> 64 <br/> 65 <br/> 66 <br/> 67 <br/> 68 <br/> 69 <br/> 70 </body> 71 </html>
（4）display显示属性
| display:none | 层不显示 |
| display:block | 块状显示，在元素后面换行，显示下一个块元素 |
| display:inline | 内联显示，多个块可以显示在一行内 |
代码示例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（布局相关的属性）</title> 6 <style type="text/css"> 7 body{ 8 padding: 0px; 9 margin:0; 10 } 11 div{ 12 background-color: green; 13 color: white; 14 display:inline; 15 } 16 span{ 17 background-color: red; 18 color: white; 19 display:block; 20 width:200px; 21 } 22 </style> 23 </head> 24 <body> 25 <div>南京邮电大学</div> 26 <div>南京邮电大学</div> 27 <div>南京邮电大学</div> 28 <span>南京邮电大学</span> 29 <span>南京邮电大学</span> 30 <span>南京邮电大学</span> 31 32 </body> 33 </html>
（5）float浮动属性
| left | 左浮动 |
| right | 右浮动 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（浮动以及溢出处理）</title> 6 <style type="text/css"> 7 body{ 8 padding: 0px; 9 margin:0; 10 } 11 .div{ 12 width:960px; 13 height:600px; 14 margin:0 auto; 15 background-color: #f1f1f1; 16 } 17 .left{ 18 float:left; 19 width:260px; 20 height:460px; 21 background-color: #cccccc; 22 } 23 .right{ 24 float:right; 25 width:690px; 26 height:460px; 27 background-color: #ddd; 28 } 29 .bottom{ 30 width:960px; 31 height:140px; 32 background-color: red; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="div"> 38 <div class="left"></div> 39 <div class="right"></div> 40 <div class="bottom"></div> 41 </div> 42 </body> 43 </html>
（6）clear清除浮动
clear:both
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（浮动以及溢出处理）</title> 6 <style type="text/css"> 7 body{ 8 padding: 0px; 9 margin:0; 10 } 11 .div{ 12 width:960px; 13 height:600px; 14 margin:0 auto; 15 background-color: #f1f1f1; 16 } 17 .left{ 18 float:left; 19 width:260px; 20 height:460px; 21 background-color: #cccccc; 22 } 23 .right{ 24 float:right; 25 width:690px; 26 height:460px; 27 background-color: #ddd; 28 } 29 .bottom{ 30 width:960px; 31 height:140px; 32 background-color: red; 33 } 34 .clear{ 35 clear:both; 36 margin-bottom:10px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="div"> 42 <div class="left"></div> 43 <div class="right"></div> 44 <div class="clear"></div> 45 <div class="bottom"></div> 46 </div> 47 </body> 48 </html>
（7）overflow溢出处理
| hidden | 隐藏超出层大小的内容 |
| scroll | 无论内容是否超出层大小都添加滚动条 |
| auto | 超出时自动添加滚动条 |
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Div+CSS布局（浮动以及溢出处理）</title> 6 <style type="text/css"> 7 body{ 8 padding: 0px; 9 margin:0; 10 } 11 .div{ 12 width:960px; 13 height:600px; 14 margin:0 auto; 15 background-color: #f1f1f1; 16 } 17 .left{ 18 float:left; 19 width:260px; 20 height:460px; 21 background-color: #cccccc; 22 } 23 .right{ 24 float:right; 25 width:690px; 26 height:460px; 27 background-color: #ddd; 28 } 29 .bottom{ 30 width:960px; 31 height:140px; 32 background-color: red; 33 } 34 .clear{ 35 clear:both; 36 margin-bottom:10px; 37 } 38 /*.jianjie{*/ 39 /*width:260px;*/ 40 /*height:120px;*/ 41 /*background-color: red;*/ 42 /*overflow: auto;*/ 43 /*}*/ 44 </style> 45 </head> 46 <body> 47 <div class="div"> 48 <div class="left"> 49 <!--<div class="jianjie">--> 50 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 51 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 52 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 53 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 54 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 55 <!--南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学南京邮电大学--> 56 <!--</div>--> 57 </div> 58 <div class="right"></div> 59 <div class="clear"></div> 60 <div class="bottom"></div> 61 </div> 62 </body> 63 </html>
4.兼容问题及高效开发工具
1.兼容性测试
（1）IE Tester
（2）Multibrowser
2.常用的浏览器
（1）Google chrome
（2）Firefox
（3）opera
3.高效的开发工具
| 轻量级的 | Notepad++ |
| sbulime Text | |
| 记事本 | |
| 重量级的 | WebStorm |
| Dreamweaver |
4.网页设计工具
（1）fireworks
（2）Photoshop
5.判断IE的方法
条件判断格式：
<!--[if 条件 版本]> 那么显示 <![endif]-->
（1）不等于
<!--[if !IE 8]> 除了IE8都可以显示 <![endif]-->
（2）小于
<!--[if lt IE 5.5]> IE浏览器版本小于5.5的显示 <![endif]-->
（3）大于
<!--[if gt IE 5]> IE浏览器版本大于5的显示 <![endif]-->
（4）小于等于
<!--[if lte IE 6]> IE浏览器版本小于6的显示 <![endif]-->
（5）大于等于
<!--[if gte IE 7]> IE浏览器版本小于7的显示 <![endif]-->
（6）大于和小于之间
<!--[if (gt IE 5)&(lt IE 7)]> IE浏览器版本大于IE5小于IE7的显示 <![endif]-->
（7）或
<!--[if (IE 6)|(IE 7)]> IE浏览器是IE6或IE7显示 <![endif]-->
（8）仅
<!--[if IE 8]> IE浏览器是IE8就显示 <![endif]-->
5.DIV+CSS网页布局实战
index.html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>实战训练</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div class="header"> 10 <div class="top"> 11 <div class="wp"> 12 <div class="z"> 13 <span><a href="practice.html">设为首页</a></span> 14 <span class="mr_0"><a href="practice.html">收藏本站</a></span> 15 </div> 16 <div class="y"> 17 <span>2019-08-14</span> 18 <span class="mr_0">晴28°C/32°C</span> 19 </div> 20 </div> 21 </div> 22 <div class="logos"> 23 <div class="wp"> 24 <div class="logo z"> 25 <h1><a href="practice.html"><img src="images/logo.jpg" alt="logo"></a></h1> 26 </div> 27 <div class="dianhua y"> 28 <span>客服热线：400-000-000</span> 29 </div> 30 <div class="sousuo y"> 31 <form action="practice.html" method="get"> 32 <table cellpadding="0" cellspacing="0" border="0"> 33 <tr> 34 <td class="s_z"></td> 35 <td class="s_c"> 36 <input type="text" name="text" id="s_c_text"/> 37 </td> 38 <td class="s_y"> 39 <button type="submit" name="submit"></button> 40 </td> 41 </tr> 42 </table> 43 </form> 44 </div> 45 </div> 46 </div> 47 <div class="nav"> 48 <div class="wp"> 49 <ul> 50 <li class="a"><a href="practice.html">网站首页</a></li> 51 <li><a href="practice.html">公司简介</a></li> 52 <li><a href="practice.html">业务描述</a></li> 53 <li><a href="practice.html">服务范围</a></li> 54 <li><a href="practice.html">产品中心</a></li> 55 <li><a href="practice.html">人才管理</a></li> 56 <li><a href="practice.html">在线留言</a></li> 57 <li><a href="practice.html">联系我们</a></li> 58 </ul> 59 </div> 60 </div> 61 </div> 62 <div class="center"> 63 <div class="wp"> 64 <div class="ad"> 65 <img src="images/ad.jpg" alt="ad"> 66 </div> 67 <div class="jianjie z"> 68 <div class="tit"> 69 <img src="images/jianjie.jpg" alt="jianjie"/> 70 <span><a href="practice.html">More</a></span> 71 </div> 72 <div class="jj_c"> 73 <img src="images/jianjie_img.jpg" alt="jianjietupian"> 74 <p>麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！</p> 75 <p>什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！</p> 76 <p>那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。</p> 77 </div> 78 </div> 79 <div class="xinwen z"> 80 <div class="tit"> 81 <img src="images/xinwen.jpg" alt="xinwen"/> 82 <span><a href="practice.html">More</a></span> 83 </div> 84 <div class="xw_c"> 85 <ul> 86 <li class="a"> 87 <img src="images/list_img.jpg" alt="xinwentupian"> 88 <a href="practice.html"> 89 <h3>Web前端开发之HTML+CSS基础入门</h3> 90 <p>麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂 ... ...</p> 91 </a> 92 </li> 93 <li> 94 <a href="practice.html"> 95 <h3>Web前端开发之HTML+CSS基础入门</h3> 96 <span>2019-08-14</span> 97 </a> 98 </li> 99 <li> 100 <a href="practice.html"> 101 <h3>Web前端开发之HTML+CSS基础入门</h3> 102 <span>2019-08-14</span> 103 </a> 104 </li> 105 <li> 106 <a href="practice.html"> 107 <h3>Web前端开发之HTML+CSS基础入门</h3> 108 <span>2019-08-14</span> 109 </a> 110 </li> 111 <li> 112 <a href="practice.html"> 113 <h3>Web前端开发之HTML+CSS基础入门</h3> 114 <span>2019-08-14</span> 115 </a> 116 </li> 117 <li> 118 <a href="practice.html"> 119 <h3>Web前端开发之HTML+CSS基础入门</h3> 120 <span>2019-08-14</span> 121 </a> 122 </li> 123 <li> 124 <a href="practice.html"> 125 <h3>Web前端开发之HTML+CSS基础入门</h3> 126 <span>2019-08-14</span> 127 </a> 128 </li> 129 <li> 130 <a href="practice.html"> 131 <h3>Web前端开发之HTML+CSS基础入门</h3> 132 <span>2019-08-14</span> 133 </a> 134 </li> 135 </ul> 136 </div> 137 </div> 138 <div class="chanpin z"> 139 <div class="tit"> 140 <img src="images/chanpin.jpg" alt="chanpin"/> 141 <span><a href="practice.html">More</a></span> 142 </div> 143 <div class="cp_c"> 144 <ul> 145 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 146 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 147 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 148 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 149 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 150 <li class="mr_0"><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 151 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 152 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 153 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 154 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 155 <li><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 156 <li class="mr_0"><a href="practice.html"><img src="images/chanpin_img.jpg" alt="chanpintupian"/><span>Web前端开发之HTML+CSS基础入门</span></a></li> 157 </ul> 158 </div> 159 </div> 160 </div> 161 </div> 162 <div class="cl"></div> 163 <div class="footer"> 164 <div class="wp"> 165 <div class="footer_top"> 166 <span class="z"> 167 <a href="practice.html">关于我们 | </a> 168 <a href="practice.html">联系我们 | </a> 169 <a href="practice.html">加入我们 | </a> 170 <a href="practice.html">给我留言</a> 171 </span> 172 <span class="y"> 173 © 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1 174 </span> 175 </div> 176 <div class="footer_bottom"> 177 <p> 178 友情链接：<a href="http:www.maiziedu.com">麦子学院</a><a href="http:www.maiziedu.com">DZ起点网</a><a href="http:www.maiziedu.com">麦子学院</a><a href="http:www.maiziedu.com">教育部</a><a href="http:www.maiziedu.com">新闻部</a> 179 </p> 180 </div> 181 </div> 182 </div> 183 </body> 184 </html>
style.css代码：
1 /*通用属性*/ 2 *{margin: 0;padding: 0;} 3 .wp{width: 960px;margin:0 auto;} /*居中*/ 4 .z{float:left} 5 .y{float:right} 6 .cl{clear:both} 7 8 9 10 11 .top{ 12 width: 100%; 13 height: 24px; 14 background: #303030; 15 line-height: 24px; 16 margin-bottom: 10px; 17 } 18 19 .top span{ 20 color:#d8d8d8; 21 margin-right: 15px; 22 } 23 .top .mr_0{ 24 margin-right: 0; 25 } 26 .top a{ 27 color: #d8d8d8; 28 text-decoration: none; 29 } 30 .top a:hover{ 31 color: #ff6600; 32 } 33 34 /*logos*/ 35 .logos{ 36 width: 100%; 37 height: 59px; 38 margin-bottom: 10px; 39 } 40 41 /*搜索*/ 42 .sousuo{ 43 margin-top: 8px; 44 } 45 .s_z{ 46 width: 6px; 47 background: url(images/s_z.jpg) no-repeat; 48 } 49 .s_c{ 50 width:240px; 51 background: url(images/s_c.jpg) repeat-x; 52 } 53 .s_y{ 54 width: 78px; 55 height: 41px; 56 background: url(images/s_r.jpg) no-repeat; 57 } 58 .s_c input{ 59 width: 200px; 60 height: 35px; 61 line-height: 35px; 62 border: 0; 63 margin-top: 2px; 64 } 65 .s_y button{ 66 width: 78px; 67 height: 41px; 68 background: none; 69 border: 0; 70 cursor: pointer; 71 } 72 .dianhua{ 73 74 height: 59px; 75 line-height: 59px; 76 77 margin-left: 15px; 78 } 79 .dianhua span{ 80 font-size: 26px; 81 color: darkred; 82 } 83 /*导航*/ 84 .nav{ 85 height: 39px; 86 width: 100%; 87 background: url("images/nav_bg.jpg") repeat-x; 88 /*margin-bottom: 2px;*/ 89 } 90 .nav li { 91 list-style: none; 92 float: left; 93 line-height: 39px; 94 padding: 0 28px; 95 } 96 .nav li.a , .nav li:hover{ 97 background: url("images/nav_hover.jpg") repeat-x; 98 } 99 .nav a{ 100 color:white; 101 text-decoration: none; 102 font-size: 16px; 103 } 104 /*center*/ 105 /*广告*/ 106 .ad{ 107 margin-bottom: 10px; 108 } 109 /*简介*/ 110 .tit{ 111 padding-bottom: 8px; 112 border-bottom: 1px solid darkred; 113 position: relative; 114 margin-bottom: 10px; 115 } 116 .tit span{ 117 position: absolute; 118 right:0; 119 bottom: 0; 120 } 121 .tit span a{ 122 color: darkred; 123 text-decoration: none; 124 } 125 .jianjie{ 126 width:540px; 127 height: 360px; 128 } 129 .jj_c img{ 130 float: left; 131 margin:0 10px 10px 0; 132 } 133 .jj_c p{ 134 font-size: 16px; 135 color: #616161; 136 text-indent: 24px; 137 } 138 139 140 /*新闻*/ 141 .xinwen{ 142 width: 400px; 143 height: 360px; 144 margin-left: 20px; 145 } 146 .xw_c{ 147 148 } 149 .xw_c li{ 150 list-style: none; 151 height: 24px; 152 line-height: 24px; 153 position: relative; 154 padding-left: 15px; 155 background: url("images/list_bg.jpg") no-repeat center left; 156 margin-bottom: 6px; 157 } 158 .xw_c li.a{ 159 background: none; 160 padding: 0; 161 height: 76px; 162 } 163 .xw_c .a img{ 164 float: left; 165 margin: 0 10px 10px 0; 166 } 167 .xw_c .a p{ 168 font-size: 12px; 169 color: #888; 170 text-indent: 24px; 171 } 172 .xw_c li span{ 173 position: absolute; 174 right: 0; 175 bottom: 0; 176 color: #888; 177 font-size: 12px; 178 } 179 .xw_c a{ 180 color: #616161; 181 text-decoration: none; 182 183 } 184 .xw_c h3{ 185 font-weight: normal; 186 } 187 /*产品*/ 188 .chanpin{ 189 width: 100%; 190 height:300px; 191 } 192 .cp_c{ 193 194 } 195 .cp_c li{ 196 float: left; 197 list-style: none; 198 margin: 0 10px 10px 0; 199 width: 151px; 200 height: 96px; 201 overflow: hidden; 202 position: relative; 203 } 204 .cp_c li span{ 205 display: none; 206 position: absolute; 207 left:0; 208 bottom: 0; 209 font-size: 14px; 210 height: 20px; 211 padding:0 10px; 212 width: 141px; 213 background:darkred; 214 color: #fff; 215 overflow: hidden; 216 } 217 .cp_c li a:hover span{ 218 display: block; 219 } 220 .cp_c li img{ 221 float:left; 222 } 223 .cp_c li.mr_0{ 224 margin-right: 0; 225 } 226 /*footer*/ 227 .footer{ 228 width: 100%; 229 height: 103px; 230 background: url("images/footer_bg.jpg") repeat-x; 231 } 232 .footer_top{ 233 height: 80px; 234 line-height: 80px; 235 color: white; 236 } 237 .footer_top a{ 238 font-size: 16px; 239 color:#ffffff; 240 text-decoration: none; 241 } 242 .footer_bottom{ 243 color: #ff6600; 244 } 245 .footer_bottom a{ 246 color: white; 247 text-decoration: none; 248 margin-right: 16px; 249 } 250 .footer_bottom a:hover{ 251 color:#ff6600; 252 }
效果图：
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
