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

 

你可能感兴趣的:(css)