蓝色导航为图片，用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 xmlns="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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
147
