前言：这节课主要运用前面所学的知识写三个例子，并且学习浏览器兼容性的解决方法。
内容：
例子1：一个关于列表的例子
html代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>ListExample</title> 6 <link rel="stylesheet" type="text/css" href="css/list.css"/> 7 </head> 8 9 <body> 10 <ul> 11 <li class="list"><a href="javascript:;">体育明星</a> 12 <ul class="subList"> 13 <li><a href="javascript:;">乔丹</a></li> 14 <li><a href="javascript:;">纳什</a></li> 15 <li><a href="javascript:;">奥尼尔</a></li> 16 </ul> 17 </li> 18 <li class="list"><a href="javascript:;">政治明星</a> 19 <ul class="subList"> 20 <li><a href="javascript:;">习大大</a></li> 21 <li><a href="javascript:;">普金</a></li> 22 <li><a href="javascript:;">奥巴马</a></li> 23 </ul> 24 </li> 25 <li class="list"><a href="javascript:;">娱乐明星</a> 26 <ul class="subList"> 27 <li><a href="javascript:;">黄家驹</a></li> 28 <li><a href="javascript:;">刘德华</a></li> 29 <li><a href="javascript:;">周润发</a></li> 30 </ul> 31 </li> 32 <li class="list"><a href="javascript:;">历史人物</a> 33 <ul class="subList"> 34 <li><a href="javascript:;">康熙</a></li> 35 <li><a href="javascript:;">李世民</a></li> 36 <li><a href="javascript:;">秦始皇</a></li> 37 </ul> 38 </li> 39 </ul> 40 </body> 41 </html>
css代码：
1 @charset "utf-8"; 2 /* CSS Document */ 3 * 4 { 5 padding:0px; 6 margin:opx; 7 font-family:"微软雅黑"; 8 } 9 a 10 { 11 text-decoration:none; 12 color:#FFF; 13 } 14 a:hover 15 { 16 color:#FF0; 17 } 18 ul 19 { 20 list-style-type:none; 21 } 22 body 23 { 24 background-color:#FFDFE7; 25 } 26 .list 27 { 28 width:200px; 29 border-bottom:solid 1px #EF9E9C; 30 } 31 .list>a 32 { 33 height:30px; 34 line-height:30px; 35 background-color:#C61031; 36 display:block; 37 border-left:solid 13px #731410; 38 padding-left:5px; 39 } 40 .list>a:hover 41 { 42 background-color:#990020; 43 } 44 .subList li 45 { 46 border-bottom:solid 1px #EF9E9C; 47 } 48 .subList a 49 { 50 height:30px; 51 line-height:30px; 52 background-color:#EF5173; 53 display:block; 54 border-left:solid 28px #A51C18; 55 padding-left:5px; 56 } 57 .subList a:hover 58 { 59 background-color:#C2425D; 60 }
结果图：
例子2：一个关于布局的例子
html代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>AlighmentExample</title> 6 <link rel="stylesheet" type="text/css" href="css/alignment.css"/> 7 </head> 8 9 <body> 10 <div id="header"></div> 11 <div id="main-body"> 12 <div id="main-left"></div> 13 <div id="main-right"></div> 14 </div> 15 <div id="footer"></div> 16 </body> 17 </html>
css代码：
1 @charset "utf-8"; 2 /* CSS Document */ 3 * 4 { 5 padding:0px; 6 margin:0px; 7 font-family:"微软雅黑"; 8 } 9 #header 10 { 11 height:90px; 12 width:900px; 13 border:solid 2px #390; 14 margin:20px auto; 15 } 16 #main-body 17 { 18 height:400px; 19 width:900px; 20 margin:20px auto; 21 } 22 #main-left 23 { 24 width:200px; 25 height:400px; 26 border:solid 2px #F09; 27 float:left; 28 margin-right:10px; 29 } 30 #main-right 31 { 32 width:682px; 33 height:400px; 34 border:solid 2px #F00; 35 float:left 36 } 37 #footer 38 { 39 clear:both; 40 width:900px; 41 height:90px; 42 border:solid 2px #30F; 43 margin:0px auto; 44 }
结果图：
例子3：一个关于图文列表的例子
html代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>image-text</title> 6 <link rel="stylesheet" type="text/css" href="css/image-text.css"/> 7 </head> 8 9 <body> 10 <div id="dnews"> 11 <div id="title"> 12 <div id="theme"><a href="javascript:;">汽车 </a>/<a href="javascript:;"> 在线购车</a></div> 13 <div id="channel"><a href="javascript:;">更换频道</a></div> 14 </div> 15 <div id="con"> 16 <div id="con1"><a href="javascript:;"><img src="image/car.png"/></a></div> 17 <div id="con2"><a href="javascript:;">报废车辆搭成山寨“巨石阵”</a></div> 18 </div> 19 <div id="newslist"> 20 <ul> 21 <li><a href="javascript:;">国庆出游最佳选择 四款超实用7座SUV推荐</a></li> 22 <li><a href="javascript:;">国内SUV车型最新消息盘点 比亚迪宋领先</a></li> 23 <li><a href="javascript:;">东风本田歌瑞10月16日上市 起售价低于8万</a></li> 24 <li><a href="javascript:;">曝纳智捷3谍照 预计明年3季度上市</a></li> 25 <li><a href="javascript:;">2016款3系长轴版购车手册 推荐320Li进取型</a></li> 26 </ul> 27 28 </div> 29 <div id="singleNews1"><a href="javascript:;">在中国有车和没车的区别</a></div> 30 <div id="singleNews2"><a href="javascript:;">9.9元抢凯美瑞2.2万代金券</a></div> 31 </div> 32 </body> 33 </html>
css代码：
1 @charset "utf-8"; 2 /* CSS Document */ 3 * 4 { 5 padding:0px; 6 margin:0px; 7 font-family:"微软雅黑"; 8 } 9 a 10 { 11 text-decoration:none; 12 } 13 ul 14 { 15 list-style-type:none; 16 } 17 #dnews 18 { 19 width:340px; 20 height:307px; 21 margin:90px auto; 22 border-top:solid 1px #6DAAEA; 23 border-bottom:solid 1px #6DAAEA; 24 } 25 #title 26 { 27 height:33px; 28 line-height:33px; 29 background-color:#F7FAFD; 30 color:#0873CB; 31 } 32 #theme 33 { 34 float:left; 35 } 36 #theme a 37 { 38 color:#0873CB; 39 font-weight:700; 40 } 41 #theme a:hover 42 { 43 text-decoration:underline; 44 } 45 #channel 46 { 47 margin-right:20px; 48 float:right; 49 } 50 #channel a 51 { 52 color:#0873CB; 53 } 54 #con 55 { 56 margin-top:20px; 57 clear:both; 58 height:60px; 59 } 60 #con1 61 { 62 margin-right:15px; 63 float:left; 64 } 65 #con2 66 { 67 font-weight:700; 68 color:#3B63B7; 69 line-height:60px; 70 margin-top:15px; 71 } 72 #con2 a:hover 73 { 74 text-decoration:underline; 75 } 76 #newslist 77 { 78 margin-top:10px; 79 clear:left; 80 height:145px; 81 } 82 #newslist li 83 { 84 height:29px; 85 line-height:29px; 86 background-image:url("../image/tip.png"); 87 background-repeat:no-repeat; 88 background-position:left center; 89 } 90 #newslist a 91 { 92 font-size:15px; 93 font-family:"宋体"; 94 margin-left:17px; 95 color:#000; 96 } 97 #newslist a:hover 98 { 99 color:#F00; 100 text-decoration:underline; 101 } 102 #singleNews1 103 { 104 margin-left:0px; 105 height:29px; 106 line-height:29px; 107 float:left; 108 } 109 #singleNews1 a 110 { 111 font-family:"宋体"; 112 font-size:14px; 113 color:#000; 114 margin-right:9px; 115 } 116 #singleNews1 a:hover 117 { 118 color:#F00; 119 text-decoration:underline; 120 } 121 #singleNews2 122 { 123 height:29px; 124 line-height:29px; 125 float:left; 126 } 127 #singleNews2 a 128 { 129 font-family:"宋体"; 130 font-size:14px;; 131 color:#000; 132 } 133 #singleNews2 a:hover 134 { 135 color:#F00; 136 text-decoration:underline; 137 }
结果图：
浏览器兼容性问题的原因：
不同浏览器使用内核及所支持的HTML等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。目前暂没有统一的能解决这样的工具，最普遍的解决办法就是不断的在各浏览器间调试网页显示效果，通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。
浏览器兼容性问题解决参考：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
后记：还需多多练习。
原文：http://www.cnblogs.com/zoe-yan/p/4850566.html
