前言：这节课主要运用前面所学的知识写三个例子，并且学习浏览器兼容性的解决方法。
内容：
例子1：一个关于列表的例子
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ListExample</title>
<link rel="stylesheet" type="text/css" href="css/list.css"/>
</head> <body>
<ul>
<li class="list"><a href="javascript:;">体育明星</a>
<ul class="subList">
<li><a href="javascript:;">乔丹</a></li>
<li><a href="javascript:;">纳什</a></li>
<li><a href="javascript:;">奥尼尔</a></li>
</ul>
</li>
<li class="list"><a href="javascript:;">政治明星</a>
<ul class="subList">
<li><a href="javascript:;">习大大</a></li>
<li><a href="javascript:;">普金</a></li>
<li><a href="javascript:;">奥巴马</a></li>
</ul>
</li>
<li class="list"><a href="javascript:;">娱乐明星</a>
<ul class="subList">
<li><a href="javascript:;">黄家驹</a></li>
<li><a href="javascript:;">刘德华</a></li>
<li><a href="javascript:;">周润发</a></li>
</ul>
</li>
<li class="list"><a href="javascript:;">历史人物</a>
<ul class="subList">
<li><a href="javascript:;">康熙</a></li>
<li><a href="javascript:;">李世民</a></li>
<li><a href="javascript:;">秦始皇</a></li>
</ul>
</li>
</ul>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:opx;
font-family:"微软雅黑";
}
a
{
text-decoration:none;
color:#FFF;
}
a:hover
{
color:#FF0;
}
ul
{
list-style-type:none;
}
body
{
background-color:#FFDFE7;
}
.list
{
width:200px;
border-bottom:solid 1px #EF9E9C;
}
.list>a
{
height:30px;
line-height:30px;
background-color:#C61031;
display:block;
border-left:solid 13px #731410;
padding-left:5px;
}
.list>a:hover
{
background-color:#990020;
}
.subList li
{
border-bottom:solid 1px #EF9E9C;
}
.subList a
{
height:30px;
line-height:30px;
background-color:#EF5173;
display:block;
border-left:solid 28px #A51C18;
padding-left:5px;
}
.subList a:hover
{
background-color:#C2425D;
}
结果图：
例子2：一个关于布局的例子
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AlighmentExample</title>
<link rel="stylesheet" type="text/css" href="css/alignment.css"/>
</head> <body>
<div id="header"></div>
<div id="main-body">
<div id="main-left"></div>
<div id="main-right"></div>
</div>
<div id="footer"></div>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
#header
{
height:90px;
width:900px;
border:solid 2px #390;
margin:20px auto;
}
#main-body
{
height:400px;
width:900px;
margin:20px auto;
}
#main-left
{
width:200px;
height:400px;
border:solid 2px #F09;
float:left;
margin-right:10px;
}
#main-right
{
width:682px;
height:400px;
border:solid 2px #F00;
float:left
}
#footer
{
clear:both;
width:900px;
height:90px;
border:solid 2px #30F;
margin:0px auto;
}
结果图：
例子3：一个关于图文列表的例子
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image-text</title>
<link rel="stylesheet" type="text/css" href="css/image-text.css"/>
</head> <body>
<div id="dnews">
<div id="title">
<div id="theme"><a href="javascript:;">汽车 </a>/<a href="javascript:;"> 在线购车</a></div>
<div id="channel"><a href="javascript:;">更换频道</a></div>
</div>
<div id="con">
<div id="con1"><a href="javascript:;"><img src="data:image/car.png"/></a></div>
<div id="con2"><a href="javascript:;">报废车辆搭成山寨“巨石阵”</a></div>
</div>
<div id="newslist">
<ul>
<li><a href="javascript:;">国庆出游最佳选择 四款超实用7座SUV推荐</a></li>
<li><a href="javascript:;">国内SUV车型最新消息盘点 比亚迪宋领先</a></li>
<li><a href="javascript:;">东风本田歌瑞10月16日上市 起售价低于8万</a></li>
<li><a href="javascript:;">曝纳智捷3谍照 预计明年3季度上市</a></li>
<li><a href="javascript:;">2016款3系长轴版购车手册 推荐320Li进取型</a></li>
</ul> </div>
<div id="singleNews1"><a href="javascript:;">在中国有车和没车的区别</a></div>
<div id="singleNews2"><a href="javascript:;">9.9元抢凯美瑞2.2万代金券</a></div>
</div>
</body>
</html>
css代码：
@charset "utf-8";
/* CSS Document */
*
{
padding:0px;
margin:0px;
font-family:"微软雅黑";
}
a
{
text-decoration:none;
}
ul
{
list-style-type:none;
}
#dnews
{
width:340px;
height:307px;
margin:90px auto;
border-top:solid 1px #6DAAEA;
border-bottom:solid 1px #6DAAEA;
}
#title
{
height:33px;
line-height:33px;
background-color:#F7FAFD;
color:#0873CB;
}
#theme
{
float:left;
}
#theme a
{
color:#0873CB;
font-weight:;
}
#theme a:hover
{
text-decoration:underline;
}
#channel
{
margin-right:20px;
float:right;
}
#channel a
{
color:#0873CB;
}
#con
{
margin-top:20px;
clear:both;
height:60px;
}
#con1
{
margin-right:15px;
float:left;
}
#con2
{
font-weight:;
color:#3B63B7;
line-height:60px;
margin-top:15px;
}
#con2 a:hover
{
text-decoration:underline;
}
#newslist
{
margin-top:10px;
clear:left;
height:145px;
}
#newslist li
{
height:29px;
line-height:29px;
background-image:url("../image/tip.png");
background-repeat:no-repeat;
background-position:left center;
}
#newslist a
{
font-size:15px;
font-family:"宋体";
margin-left:17px;
color:#000;
}
#newslist a:hover
{
color:#F00;
text-decoration:underline;
}
#singleNews1
{
margin-left:0px;
height:29px;
line-height:29px;
float:left;
}
#singleNews1 a
{
font-family:"宋体";
font-size:14px;
color:#000;
margin-right:9px;
}
#singleNews1 a:hover
{
color:#F00;
text-decoration:underline;
}
#singleNews2
{
height:29px;
line-height:29px;
float:left;
}
#singleNews2 a
{
font-family:"宋体";
font-size:14px;;
color:#000;
}
#singleNews2 a:hover
{
color:#F00;
text-decoration:underline;
}
结果图：
浏览器兼容性问题的原因：
不同浏览器使用内核及所支持的HTML等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。目前暂没有统一的能解决这样的工具，最普遍的解决办法就是不断的在各浏览器间调试网页显示效果，通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。
浏览器兼容性问题解决参考：http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html
后记：还需多多练习。