效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 328px;
margin: 0px;
/* background-color: aqua; */
}
a {
color: #666;
text-decoration: none;
font-size: 12px;
}
a:hover {
text-decoration: underline;
}
h2 {
border: 1px solid #e0e0e8;
font-size: 12px;
line-height: 27px;
padding-left: 38px;
background-image: url(./image/1.gif);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 15px 15px;
}
.middle .left {
float: left;
}
.middle .left img {
width: 100px;
height: 150px;
padding: 5px;
border: 1px solid #e0e0e8;
}
.middle .right {
padding-top: 20px;
float: right;
width: 198px;
font-size: 12px;
line-height: 25px;
color: #666;
}
h4 {
color: black;
}
.bottom {
clear: both;
}
.bottom ul li {
list-style-type: none;
}
ul li span {
float: right;
color: #666;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<h2>明星荐片</h2>
</div>
<div class="middle">
<div class="left">
<img src="./image/3.jpg" alt="">
</div>
<div class="right">
<h4>荐片:开端</h4>
<div>导演：孙墨龙</div>
<div>主演：白敬亭 赵今麦 刘奕君</div>
<div>点评：我最喜欢的悬疑电视剧,超喜<br>欢...[详情]</div>
</div>
</div>
<div class="bottom">
<ul>
<li><a href="#">《Wake up》：《开端》电视剧主题曲 </a><span>王啸坤</span></li>
<li><a href="#">《My Only》：《开端》电视剧片尾曲 </a><span>周深</span></li>
<li><a href="#">《Rebound》：《开端》电视剧插曲 </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>
</div>
</div>
</body>
</html>要求：
1.电视剧详情页面的总体宽度 328px
2.超链接的颜色#666，鼠标移入出现下划线
3.标题边框的颜色#e0e0e8，字体大小12px，字体垂直居中,标题高27px，左侧内边距38px
4.剧照宽100px高150px，并且有边框线
5.电视剧详情相关信息区域宽度198px，字体大小12px ，并且标题颜色为黑色
6.列表项的高度为30px
7.其余部分实现效果按效果图实现。
