星空网 > 软件开发 > 网页设计

CSS实例练习

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

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

实例:

CSS实例练习

代码:

<!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>

 




原标题:CSS实例练习

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

如何使用以覆盖人数为营销目标的Facebook广告?:https://www.ikjzd.com/articles/59614
亚马逊最近严查这些东西,卖家注意!:https://www.ikjzd.com/articles/59616
亚马逊销售五大误区揭秘,避免大家踩雷!:https://www.ikjzd.com/articles/59617
万分紧急!卖家注意,缺少这个标识将面临巨大损失!:https://www.ikjzd.com/articles/59620
火爆的《复仇者联盟4》周边产品,是商机还是危机?:https://www.ikjzd.com/articles/59624
全球产品禁售政策已经更新!卖家笔记要做好!:https://www.ikjzd.com/articles/59625
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流