简单的网页布局 根据下列要求,利用CSS做出下图所示的样式。Ⅰ、网页整体边距为0; Ⅱ、横幅的图片宽度为100%; Ⅲ、导航栏高度为80像素,行高为80像素,文本排列为居中,背景颜色为白色。 Ⅳ、导航栏内的“首页”、“关于王力”、“产品世界”、“新闻中心”、“网络事件”、“联系我们”、“关于我们”、“网络新闻”----均为超链接,此处用 # 代替超链接的网址,文本修饰为无,颜色为黑色,边距设置为左0像素右15像素。其中首页需要加粗。 Ⅴ、底部样式设置为文本居中,字体大小为14像素,颜色为灰色,高度为40像素,行高为40像素,“版权所有:浙江王力门业有限公司技术支持派桑网络”这句设置为斜体字。 Ⅵ、整个页面背景颜色设置为灰色(使用#ddd代表灰色)
时间: 2023-12-06 10:43:43 浏览: 68
HTML代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>网页布局</title>
<style>
body {
margin: 0;
background-color: #ddd;
}
header {
margin: 0;
padding: 0;
}
img {
width: 100%;
}
nav {
height: 80px;
line-height: 80px;
background-color: white;
text-align: center;
padding: 0 15px 0 0;
}
nav a {
text-decoration: none;
color: black;
margin-left: 0;
margin-right: 15px;
}
nav a:first-child {
font-weight: bold;
}
footer {
height: 40px;
line-height: 40px;
font-size: 14px;
color: #666;
text-align: center;
}
footer em {
font-style: italic;
}
</style>
</head>
<body>
<header>
<img src="banner.jpg" alt="横幅图片">
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于王力</a>
<a href="#">产品世界</a>
<a href="#">新闻中心</a>
<a href="#">网络事件</a>
<a href="#">联系我们</a>
<a href="#">关于我们</a>
<a href="#">网络新闻</a>
</nav>
<footer>
版权所有:浙江王力门业有限公司技术支持派桑网络<em>(技术支持派桑网络使用斜体字)</em>
</footer>
</body>
</html>
```
效果如下图所示:
![网页布局效果图](https://img-blog.csdnimg.cn/20211015174720968.png)
阅读全文