帮我写一个大学城网页设计
时间: 2023-08-28 12:28:33 浏览: 54
好的,下面是一个简单的大学城网页设计:
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<li><a href="#">校园招聘</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<div class="banner">
<img src="banner.jpg" alt="Banner">
</div>
<section class="news">
<h2>新闻资讯</h2>
<ul>
<li>
<img src="news1.jpg" alt="News 1">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是新闻内容,可以写一些新闻摘要。</p>
</li>
<li>
<img src="news2.jpg" alt="News 2">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是新闻内容,可以写一些新闻摘要。</p>
</li>
<li>
<img src="news3.jpg" alt="News 3">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是新闻内容,可以写一些新闻摘要。</p>
</li>
</ul>
</section>
<section class="life">
<h2>校园生活</h2>
<ul>
<li>
<img src="life1.jpg" alt="Life 1">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是校园生活内容,可以写一些校园生活摘要。</p>
</li>
<li>
<img src="life2.jpg" alt="Life 2">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是校园生活内容,可以写一些校园生活摘要。</p>
</li>
<li>
<img src="life3.jpg" alt="Life 3">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是校园生活内容,可以写一些校园生活摘要。</p>
</li>
</ul>
</section>
<section class="job">
<h2>校园招聘</h2>
<ul>
<li>
<img src="job1.jpg" alt="Job 1">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是校园招聘内容,可以写一些校园招聘摘要。</p>
</li>
<li>
<img src="job2.jpg" alt="Job 2">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是校园招聘内容,可以写一些校园招聘摘要。</p>
</li>
<li>
<img src="job3.jpg" alt="Job 3">
<h3><a href="#">标题标题标题标题标题标题标题标题</a></h3>
<p>这里是校园招聘内容,可以写一些校园招聘摘要。</p>
</li>
</ul>
</section>
<footer>
<p>版权所有 © 2021 大学城网</p>
</footer>
</body>
</html>
```
CSS代码:
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
header h1 {
font-size: 36px;
}
nav ul {
display: flex;
list-style: none;
}
nav li {
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 20px;
}
.banner {
height: 400px;
overflow: hidden;
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news,
.life,
.job {
background-color: #f5f5f5;
padding: 50px;
text-align: center;
}
h2 {
font-size: 36px;
margin-bottom: 20px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
}
li {
width: 300px;
margin: 20px;
}
li img {
width: 100%;
height: 200px;
object-fit: cover;
}
li h3 {
font-size: 24px;
margin: 20px 0;
}
li p {
font-size: 18px;
line-height: 1.5;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
这个网页设计包括了一个简单的导航栏、一个轮播图、以及三个板块:新闻资讯、校园生活和校园招聘。每个板块包含多个文章,每个文章包含一张图片和标题、内容摘要。同时,网页底部包含了版权信息。这个设计可以根据实际需求进行修改和扩展。
相关推荐
![](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)
![](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)