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" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
        /*去除标签的内外边距*/
        body,h4,ul,li{
            padding:0;
            margin:0;
        }
        /*给body标签加样式*/
        body{
            font-size:15px;
        }
        /*给整个div大框架加样式*/
        .box{
            background-color:white;
            width:295px;
            margin:0px auto;
        }
        /*给title加样式*/
        .box .title{
            font-size:20px;
            background-image:url("images/righttitle.gif");
            height:35px;
            padding-left:40px;
            line-height:35px;
            color:white;
        }
        /*给超链接加样式*/
        a:link,a:visited{
            color:#336699;
            text-decoration:none;
        }
        a:hover{
            color:red;
            text-decoration:underline;
        }
        /*添加虚线*/
        li{
            border-bottom:1px dashed #ccc;
            padding:5px 10px;
            list-style-type:none;
        }
        /*分别给两类span标签加样式*/
        .box .content .red{
            color:red;
            font-weight:bold;
            float:right;
        }
        .box .content .blue{
            color:blue;
            font-weight:bold;
            float:right;
        }
        /*给标题添加内填充*/
        h4{
            padding-top:10px;
            padding-left:10px;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
<div class="box">
    <div class="title">
        PHP培训开班信息
    </div>
    <div class="content">
        <h4>PHP基础班</h4>
        <ul>
            <li><a href="#">北京--10月12号</a><span class="blue">爆满已开班</span></li>
            <li><a href="#">北京--11月12号</a><span class="red">预约报名</span></li>
        </ul>
        <h4>PHP就业班</h4>
        <ul>
            <li><a href="#">北京--10月16号</a><span class="blue">爆满已开班</span></li>
            <li><a href="#">北京--11月16号</a><span class="red">预约报名</span></li>
        </ul>
        <h4>PHP远程班</h4>
        <ul>
            <li><a href="#">北京--10月12号</a><span class="red">预约报名</span></li>
            <li><a href="#">北京--11月12号</a><span class="red">预约报名</span></li>
        </ul>
    </div>
</div>
</body>
</html>

posted @ 2016-11-25 23:29  panbee  阅读(196)  评论(1)    收藏  举报