生成一个适应PC端和移动端的知识宝库画面,包含循环出来的8个div,以及联系我们的模块
时间: 2024-02-20 14:57:07 浏览: 22
好的,可以参考下面的代码实现一个适应PC端和移动端的知识宝库画面,其中包含8个div和联系我们的模块:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知识宝库</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>知识宝库</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">搜索</a></li>
</ul>
</nav>
</header>
<main>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="contact">
<h2>联系我们</h2>
<p>电话:1234567890</p>
<p>邮箱:info@knowledgehub.com</p>
<p>地址:北京市朝阳区XXX路XXX号</p>
</div>
</main>
<footer>
<p>版权所有 © 2021 知识宝库</p>
</footer>
</body>
</html>
```
CSS代码:
```
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Microsoft YaHei", sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
header h1 {
float: left;
}
nav {
float: right;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex-basis: calc(33.33% - 10px);
height: 200px;
background-color: #ccc;
margin-bottom: 20px;
}
.contact {
margin-top: 50px;
text-align: center;
}
.contact h2 {
margin-bottom: 20px;
}
.contact p {
margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.item {
flex-basis: 100%;
}
}
```
这个页面中,顶部的导航栏和底部的版权信息固定不动,中间的部分通过Flexbox布局来实现,根据屏幕大小自动调整布局。在PC端,8个div依次排列,并且左右两边留有一定的间隔;在移动端,8个div变成一列,并且占据整个屏幕宽度。联系我们的模块在页面的底部,也采用了居中对齐的方式,适应不同的屏幕大小。