【小练习06】HTML+CSS--教学大讲堂
要求实现如下效果图：
代码演示
<!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>
