制作电视剧详情列表页面。(共30分) 标题前面图标使用背景图片,标题字体为12px,高度为27px,距离左边38px 中间部分使用浮动让图片和右边的文字描述排在一行 下面的列表项中的文字使用左浮动,作者描述使用右浮动 所有的超链接都没有下划线,鼠标移入有下划线
时间: 2024-02-24 14:59:49 浏览: 35
以下是一个制作电视剧详情列表页面的示例代码,包含了要求中的所有要素:
```html
<!DOCTYPE html>
<html>
<head>
<title>电视剧详情列表页面</title>
<style>
/* 标题样式 */
h1 {
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: left center;
font-size: 12px;
height: 27px;
line-height: 27px;
padding-left: 38px;
margin-top: 0;
}
/* 中间部分样式 */
.row {
clear: both;
margin-bottom: 10px;
}
.row img {
float: left;
margin-right: 10px;
}
.row p {
float: left;
margin: 0;
}
/* 列表项样式 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
clear: both;
margin-bottom: 10px;
}
li a {
color: black;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-bottom-color 0.2s;
}
li a:hover {
border-bottom-color: black;
}
.author {
float: right;
}
</style>
</head>
<body>
<h1>电视剧详情</h1>
<div class="row">
<img src="image1.jpg" alt="电视剧封面">
<p>这是电视剧的描述文字。这是电视剧的描述文字。这是电视剧的描述文字。</p>
</div>
<div class="row">
<img src="image2.jpg" alt="电视剧封面">
<p>这是电视剧的描述文字。这是电视剧的描述文字。这是电视剧的描述文字。</p>
</div>
<ul>
<li><a href="#">第一集</a><span class="author">作者描述</span></li>
<li><a href="#">第二集</a><span class="author">作者描述</span></li>
<li><a href="#">第三集</a><span class="author">作者描述</span></li>
<li><a href="#">第四集</a><span class="author">作者描述</span></li>
<li><a href="#">第五集</a><span class="author">作者描述</span></li>
</ul>
</body>
</html>
```
在这个示例中,标题使用了一个背景图片作为图标,并且使用了居中对齐、38像素的左边距等样式。中间部分使用了一个包含图片和文字描述的行,并使用了浮动让它们排在一行。下面的列表项中,文本使用了左浮动,作者描述使用了右浮动,并且超链接在鼠标移入时会显示下划线。