【小练习06】HTML+CSS--教学大讲堂

来源：互联网发布：工作流程梳理软件编辑：程序博客网时间：2024/05/01 16:11
要求实现如下效果图：
这里写图片描述
代码演示
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            h3,h4,p{                margin: 0;            }            ul{                margin: 0;                padding: 0;                list-style: none;            }            a{                text-decoration: none;            }            img{                vertical-align: middle;            }            .clearfix:after{                content: '';                display: block;                clear: both;            }            body{                background: #f1f1f1;            }            section{                width: 980px;                border: 1px solid #ddd;                background: #fff url(images/section_bg.gif) repeat-x;            }            section h3{                height: 54px;                font: bold 16px/54px '宋体';                color: #333;                padding-left: 15px;                margin-bottom: 3px;            }            .list1{                padding-left: 39px;            }            .list1 li{                width: 272px;                height: 134px;                float: left;            }            .space{                margin: 0 43px;            }            .imgLink{                float: left;            }            .imgLink img{                padding: 1px;                margin-right: 16px;                border: 1px solid #c7c7c7;            }            .list1 li div{                float: left;                width: 157px;            }            .list1 li h4{                height: 13px;                line-height: 13px;                margin-bottom: 5px;                font-size:11px ;                font-weight: normal;            }            .list1 li span,.list1 li p{                font: 11px/22px '字体';                display: block;            }            .list1 li p.btn{                line-height: 20px;            }            .btn a{                display: inline-block;                width: 44px;                height: 20px;                margin-top: 8px;                background: url(images/btn_01.gif);                font-size: 0;            }            .btn a.preview{                background: url(images/btn_02.gif);                margin-left: 9px;            }            .list2{                margin: 30px 0 21px 0;                padding-left: 39px;            }            .list2 li{                width: 124px;                float: left;                margin-right: 32px;            }            .list2 li img{                padding: 1px;                border: 1px solid #c7c7c7;            }            .list2 h4{                height: 25px;                line-height: 25px;                margin-top: 10px;            }            .list2 h4 a{                font-size: 11px;                color: #0b57ab;            }            .list2 p{                font: 11px/23px "宋体";            }            .list2 p a{                color: #0b57ab;            }        </style>    </head>    <body>        <section>            <h3>本周主打</h3>            <ul class="list1 clearfix">                <li>                    <a href="#" class="imgLink"><img src="images/img_02.jpg"/></a>                    <div>                        <h4><a href="#">妙用性格</a></h4>                        <span>讲师：<a href="#">张在</a></span>                        <span>技术：花12集</span>                        <span>类型：生活</span>                        <p>性格 工顶替枯奇才标有顶替</p>                        <p class="btn"><a href="#">购买</a><a href="#" class="preview">预览</a></p>                    </div>                </li>                <li class="space">                    <a href="#" class="imgLink"><img src="images/img_02.jpg"/></a>                    <div>                        <h4><a href="#">妙用性格</a></h4>                        <span>讲师：<a href="#">张在</a></span>                        <span>技术：花12集</span>                        <span>类型：生活</span>                        <p>性格 工顶替枯奇才标有顶替</p>                        <p class="btn"><a href="#">购买</a><a href="#" class="preview">预览</a></p>                    </div>                </li>                <li>                    <a href="#" class="imgLink"><img src="images/img_02.jpg"/></a>                    <div>                        <h4><a href="#">妙用性格</a></h4>                        <span>讲师：<a href="#">张在</a></span>                        <span>技术：花12集</span>                        <span>类型：生活</span>                        <p>性格 工顶替枯奇才标有顶替</p>                        <p class="btn"><a href="#">购买</a><a href="#" class="preview">预览</a></p>                    </div>                </li>            </ul>            <ul class="list2 clearfix">                <li>                    <a href="#"><img src="images/img_03.jpg"/></a>                    <h4><a href="#">进水届枯城</a></h4>                    <p>讲师：<a href="#">张在</a></p>                    <p>类型：生活</p>                </li>                <li>                    <a href="#"><img src="images/img_03.jpg"/></a>                    <h4><a href="#">进水届枯城</a></h4>                    <p>讲师：<a href="#">张在</a></p>                    <p>类型：生活</p>                </li>                <li>                    <a href="#"><img src="images/img_03.jpg"/></a>                    <h4><a href="#">进水届枯城</a></h4>                    <p>讲师：<a href="#">张在</a></p>                    <p>类型：生活</p>                </li>                <li>                    <a href="#"><img src="images/img_03.jpg"/></a>                    <h4><a href="#">进水届枯城</a></h4>                    <p>讲师：<a href="#">张在</a></p>                    <p>类型：生活</p>                </li>                <li>                    <a href="#"><img src="images/img_03.jpg"/></a>                    <h4><a href="#">进水届枯城</a></h4>                    <p>讲师：<a href="#">张在</a></p>                    <p>类型：生活</p>                </li>                <li>                    <a href="#"><img src="images/img_03.jpg"/></a>                    <h4><a href="#">进水届枯城</a></h4>                    <p>讲师：<a href="#">张在</a></p>                    <p>类型：生活</p>                </li>            </ul>        </section>    </body></html>
源码地址：http://download.csdn.net/detail/baidu_37107022/9840940
0 0