帮我写个网页设计的代码具体要求：1整个网页高660px宽1000px在页面中水平居中显示。5分2版块内排列布局Banner图片、左侧标题区、右侧内容区域以及底部Footer区域与样张相同或相似。5分3页面上文字大小为16px10分4左侧列表样式：左侧为浅绿色#54a11d矩形文字颜色为#333背景色为#8dae9d当鼠标移入后列表子项的背景色变为浅绿色#54a11d文字颜色变为白色。10分5Hov
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页设计</title>
<style>
/* 整个网页的样式 */
body {
height: 660px;
width: 1000px;
margin: 0 auto;
font-size: 16px;
}
/* Banner图片的样式 */
#banner {
width: 100%;
height: 200px;
background-image: url("banner.jpg");
background-size: cover;
background-position: center;
}
/* 左侧标题区的样式 */
#left {
float: left;
width: 200px;
height: 460px;
background-color: #8dae9d;
padding: 20px;
}
/* 左侧列表的样式 */
#left ul {
list-style: none;
padding: 0;
margin: 0;
}
#left li {
background-color: #8dae9d;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
color: #333;
transition: all 0.5s;
}
#left li:hover {
background-color: #54a11d;
color: #fff;
cursor: pointer;
}
/* 右侧内容区域的样式 */
#right {
float: left;
width: 780px;
height: 460px;
padding: 20px;
}
/* 文本标题的样式 */
.title {
font-weight: bold;
font-size: 18px;
text-align: left;
margin-bottom: 10px;
margin-left: 2rem;
}
/* 文本段落的样式 */
.content p {
text-indent: 2em;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="left">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</div>
<div id="right">
<div class="title">文本标题1</div>
<div class="content">
<p>文本段落1</p>
<p>文本段落2</p>
<p>文本段落3</p>
</div>
</div>
<div id="footer"></div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hrhX 著作权归作者所有。请勿转载和采集!