你的位置:首页 > 网页设计

[网页设计]CSS实例练习


蓝色导航为图片,用background-image实现。

排版用到ul,li标签,下划线运用border-bottom中的dashed,右边文字用到CSS浮动float。

实例:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,div,a,span,ul,li{margin:0px;padding:0px;}body{  background-color:#cccccc;  }div{  background-color:#FFFFFF;  }ul,li{list-style:none;}a:link,a:visited{color:#0066CC;text-decoration:none;}.red{color:red}.green{color:green}h4{  color:#333;  }.kaiban{  width:295px;  margin:100px auto;  font-family:"Microsoft Yahei";  font-size:14px;  }.kaiban .title{  height:35px;  line-height:35px;  padding-left:35px;  color:#fff;  backgroudn-repeat:no-repeat;  background-image:url(righttitle.gif);  }.conten h4{  margin:5px;  }.conten{  margin:0px;  padding:10px;  }.conten li{  height:23px;  line-height:23px;  color:#333;  font-size:12px;  border-bottom:1px dashed #cccccc;  }.conten li span{  font-weight:bold;  float:right;  }</style></head>

<body> <div class="kaiban"> <div class="title">PHP培训开班信息</div> <div class="conten"> <ul><h4>PHP基础班</h4> <li><a href="#">北京第--27期(3月30号)</a><span class="red">爆满已开班</span></li> <li><a href="#">广州第--28期(4月30号</a>)<span class="green">预约报名</span></li> <li><a href="#">湖北第--27期(6月30号)</a><span class="green">预约报名</span></li> <li><a href="#">天津第--27期(8月30号)</a><span class="green">预约报名</span></li> </ul> <ul><h4>PHP就业班</h4> <li><a href="#">北京第--27期(3月30号)</a><span class="red">爆满已开班</span></li> <li><a href="#">广州第--28期(5月30号)</a><span class="green">预约报名</span></li> <li><a href="#">湖北第--27期(6月30号)</a><span class="green">预约报名</span></li> <li><a href="#">天津第--27期(6月30号)</a><span class="green">预约报名</span></li> </ul> <ul><h4>网页UI就业班</h4> <li><a href="#">北京第--27期(5月30号)</a><span class="red">爆满已开班</span></li> <li><a href="#">广州第--28期(6月30号)</a><span class="green">预约报名</span></li> <li><a href="#">湖北第--27期(7月30号)</a><span class="green">预约报名</span></li> <li><a href="#">天津第--27期(8月30号)</a><span class="green">预约报名</span></li> </ul> </div> </div></body></html>