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

素颜马尾好姑娘i 2022-06-16 10:11 162阅读 0赞

**要求实现如下效果图：**

![这里写图片描述][SouthEast]

**代码演示**

<!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][http_download.csdn.net_detail_baidu_37107022_9840940]**

[SouthEast]: /images/20220616/67a76a0491d149fc8200a40b5eb77d87.png
[http_download.csdn.net_detail_baidu_37107022_9840940]: http://download.csdn.net/detail/baidu_37107022/9840940