<!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;
}
浮动之电视剧详情页面
最新推荐文章于 2022-11-02 19:49:34 发布