浮动之电视剧详情页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电视剧详情页面</title>
		<link href="css/Page_232_3.css" rel="stylesheet" type="text/css"  />
	</head>
	<body>
		<div class="container">
			<!--明星荐片-->
			<div class="top">
				<h1>明星荐片</h1>
			</div>
			<!--电影详情-->
			<div class="middle">
				<img src="img/3.gif"  />
				<!--电视剧详情-->
				<ul>
					<li><h3>周秀娜荐片:让子弹飞</h3></li>
					<li>导演：姜文</li>
					<li>主演：姜文 周润发 葛优</li>
					<li>点评：我最喜欢的要算《让子弹飞》<br />
						了,超喜欢...[详情]</li>
				</ul>
			</div>
			<!--电视剧列表-->
			<div class="bottom">
				<ul>
					<li><a href="#">《巴别塔》：好的故事引人深思<span>阿朵</span></a></li>
					<li><a href="#">《洛杉矶之战》：外星人那么弱智？<span>丁子俊</span></a></li>
					<li><a href="#">《让子弹飞》：武侠里也可以有爱情<span>周秀娜</span></a></li>
					<li><a href="#">《剑雨》：好的故事引人深思<span>叶年生</span></a></li>
					<li><a href="#">《春风沉醉的夜晚》：非常真实<span>如小果</span></a></li>
					<li><a href="#">《克洛伊》：故事简单却细致<span>刘若英</span></a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

//CSS样式
body{
	background: pink;
}
.container{
	/*border:1px solid red;*/
	background: white;
	width: 360px;
	margin: 0px auto;
}
.top,.middle,.bottom{
	margin: 0px auto;
}
.top{
	width: 350px;
	border:1px solid #e0e0e8;
	background: url(../img/1.gif) 10px 12px no-repeat;
	
}
.top h1{
	font-size: 14px;
	padding-left: 45px;
}
.middle{
	width: 350px;
	/*border: 1px dashed gray;*/
	overflow: hidden;
	/*line-height: 142px;*/
	
}
.middle img{
	display: block;
	float: left;
	margin-top:9px;
	padding: 2px;
	border: 1px solid #e0e0e8;
}
.middle ul{
	list-style: none;
	float: left;
	/*padding-top: 14px;*/
	padding-left: 4px;
	margin-top: 16px;
	margin-bottom: 30px;
	
	
}
.middle ul li h3{
	color: black;
}
.bottom{
	/*border: 1px dashed gray;*/
	width: 350px;
}

.bottom ul{
	list-style: none;
	/*float: left;*/
	padding: 0px;
}

.bottom ul li{
	width: 350px;
	line-height: 20px;
}
.bottom ul li span{
	float: right;
}
li{
	color: #666666;
	font-size: 12px;
}
a{
      text-decoration: none;
      color:#666666 ;
}
a:hover{
	color: red;
}
浮动之电视剧详情页面

猜你喜欢
