【小练习06】HTML+CSS--电影公告

雨点打透心脏的1/2处 2022-06-16 10:11 126阅读 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;
    			}
    			.clearfix:after{
    				content: '';
    				display: block;
    				clear: both;
    			}
    			
    			
    			section{
    				width: 310px;
    			}
    			section h3{
    				height: 28px;
    				background: url(images/head_bg.gif);
    				font: bold 12px/28px '宋体';
    				color: #4c5354;
    				padding-left: 38px;
    			}
    			.imgWrap{
    				height: 131px;
    				margin: 14px 0;
    			}
    			.imgLink{
    				float: left;
    			}
    			.imgWrap img{
    				padding: 2px;
    				margin-right: 12px;
    				border: 1px solid #c8c4d3;
    			}
    			.imgWrap div{
    				float: left;
    				width: 176px;
    			}
    			.imgWrap div h4{
    				height: 27px;
    				line-height: 27px;
    			}
    			.imgWrap div h4 a{
    				font-size: 12px;
    				color: #333;
    			}
    			.imgWrap div span,.imgWrap div p{
    				font: 12px/20px "宋体";
    				display: block;
    				color: #666;
    			}
    			
    			section li{
    				height: 22px;
    				font: 12px/22px "宋体";
    				background: url(images/ico_01.gif) no-repeat 17px 9px;
    				padding: 0 18px 0 31px;
    			}
    			section li a{
    				color: #333;
    			}
    			section li span{
    				color: #888;
    				float: right;
    			}
    		</style>
    	</head>
    	<body>
    		
    		
    		<section>
    			<h3>明星荐片</h3>
    			<div class="imgWrap clearfix">
    				<a href="#" class="imgLink"><img src="images/img_01.jpg" alt="" /></a>
    				<div>
    					<h4><a href="#">让子弹飞一会</a></h4>
    					<span>导演：姜文</span>
    					<span>主演：姜文 姜文 姜文</span>
    					<p>点评：我最近喜欢的要算我最近喜欢的要算我最近喜欢的要</p>
    				</div>
    			</div>
    			<ul>
    				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
    				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
    				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
    				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
    				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
    				<li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li>
    			</ul>
    		</section>
    	</body>
    </html>

**源码地址：[http://download.csdn.net/detail/baidu\_37107022/9840935][http_download.csdn.net_detail_baidu_37107022_9840935]**

[SouthEast]: /images/20220616/3e802fa76fba4d4b9fec0ea58441305e.png
[http_download.csdn.net_detail_baidu_37107022_9840935]: http://download.csdn.net/detail/baidu_37107022/9840935