div css网站页面设计
时间: 2023-11-04 11:51:02 浏览: 68
好的,以下是一个简单的 div CSS 网站页面设计示例:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 10px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 20px;
}
section {
background-color: #fff;
color: #333;
padding: 20px;
margin: 10px;
flex-basis: 30%;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>网站标题</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<main>
<section>
<h2>标题1</h2>
<p>内容1</p>
</section>
<section>
<h2>标题2</h2>
<p>内容2</p>
</section>
<section>
<h2>标题3</h2>
<p>内容3</p>
</section>
<section>
<h2>标题4</h2>
<p>内容4</p>
</section>
</main>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
CSS 代码解释:
- `body` 元素的 `margin` 和 `padding` 属性都设置为 0,以便在页面上创建一个无边距和内边距的区域。
- `body` 元素的 `font-family` 属性设置为 Arial 或 sans-serif 字体,以便在不同的操作系统和设备上都能正确显示。
- `body` 元素的 `background-color` 属性设置为 #f0f0f0,以便设置一个浅灰色的背景色。
- `header` 元素的 `background-color` 属性设置为 #333,字体颜色为白色,其余的属性设置为使其在页面中居中。
- `nav` 元素的 `background-color` 属性设置为 #555,字体颜色为白色,其余的属性设置为使其在页面中居中。
- `nav a` 元素的颜色和间距属性设置。
- `main` 元素设置为一个具有弹性的容器,让其子元素在页面上自动排列,并使其在页面中居中。
- `section` 元素设置为具有弹性的基础大小为 30% 的容器,并添加一些内外边距以及背景色和字体颜色属性。
- `footer` 元素的 `background-color` 属性设置为 #333,字体颜色为白色,其余的属性设置为使其在页面中居中。
这只是一个简单的示例,但它可以帮助您了解如何使用 div 和 CSS 来设计网站页面。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)