CSS基本练习01

最新推荐文章于 2024-07-18 17:34:14 发布

端木奇影

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量285

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_33756795/article/details/50525757

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<span style="font-size:14px;">CSS练习01

<!DOCTYPE PUBLIC >
<HTML>
     <head>
          <meta http-equiv="Content-Type" content="text/html;charset="" />
          <title>CSS层叠样式表</title>
     <style type="text/css">
        /*全局样式设置*/
        body,h4,ul,li{
            margin:0px;
            padding:0px;
            }
        ul,li{
                list-style:none;
            }    
        a:link,a:visited{
                color:#3399FF;
                text-decoration:none;
            }
        a:hover{
                color:red;
                text-decoration:underline;
            }
        body {
            width:250px;
            margin:50px auto;
            font-size:14px;
            }
        /*开班信息模块*/
        .kbxx{
            width:295px;
            border:0px solid red;
            padding:15px;
            }
        .kbxx .image1{
            padding:0px 5px;
            }
        .kbxx .title{
            width:295px;
            height:25px;
            background-color:#003399;
            color:white;
            padding:10px 10px 5px;
            }
        /*内容编辑页面*/
        .kbxx .content{
            padding:6px 5px 6px;
            }
        .kbxx .content h4{
            padding:6px 12px 6px;
            }    
        .kbxx .content li{
            with:295px;
            margin:0px 0px 3px 20px;
            border-bottom:1px dotted #6699FF;
            }
        .kbxx .content span{
            font-weight:bold;
            }
        .red{
            color:red;
            float:right;   /*向右浮动*/
            }
        .blue{
            color:blue;
            float:right;
            }
     </style>
     </head>
     <body>
                <div class="kbxx">
                    <div class="title"><img src="images/02.jpg" class="image1" />PHP培训开班信息</div>
                    <div class="content">
                        <h4>PHP基础班</h4>
                        <ul>
                            <li><a href="http://www.sina.com.cn">北京——第39期</a><span class="red">预约报名</span></li>
                            <li><a href="http://www.sina.com.cn">北京——第38期</a><span class="blue">爆满已开班</span></li>
                            <li><a href="http://www.sina.com.cn">北京——第37期</a><span class="blue">爆满已开班</span></li>
                            <li><a href="http://www.sina.com.cn">北京——第36期</a><span class="blue">爆满已开班</span></li>
                        </ul>
                    </div>
                    <div class="content">
                        <h4>PHP就业班</h4>
                        <ul>
                            <li><a href="http://www.sina.com.cn">北京——第39期</a><span class="red">预约报名</span></li>
                            <li><a href="http://www.sina.com.cn">北京——第38期</a><span class="blue">爆满已开班</span></li>
                            <li><a href="http://www.sina.com.cn">北京——第37期</a><span class="blue">爆满已开班</span></li>
                            <li><a href="http://www.sina.com.cn">北京——第36期</a><span class="blue">爆满已开班</span></li>
                        </ul>
                    </div>
                </div>
     </body>

</HTML>
</span>