效果图
代码
<!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.其余部分实现效果按效果图实现。
