1.CSS3语句
.box {
width: 328px;
margin: 0 auto;
/* background-color: skyblue; */
}
a {
color: #666;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.top 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: 15px center;
}
.middle .left img {
width: 100px;
height: 150px;
padding: 5px;
border: 2px solid #e0e0e8;
}
.left {
float: left;
}
.right {
float: right;
font-size: 12px;
width: 198px;
color: #666;
line-height: 25px;
}
.right h4 {
color: black;
}
ul {
clear: both;
padding-left: 0;
}
ul li {
list-style: none;
line-height: 30px;
font-size: 14px;
}
ul li a {
float: left;
}
span {
float: right;
color: #666;
}
2.HTML语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</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>点评：我最喜欢的悬疑电视剧,超喜欢...[详情]</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>