校园官网首页htmlcss
时间: 2023-09-20 12:09:34 浏览: 81
学校官网页面设计html+css+javaScript
5星 · 资源好评率100%
以下是一个简单的校园官网首页的HTML和CSS示例代码,你可以根据自己的需求和风格进行修改和扩展。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>校园官网首页</title>
<link rel="stylesheet" type="text/css" 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>
<main>
<section class="banner">
<h2>欢迎来到我们的校园</h2>
<p>这里有最好的师资力量,最先进的教学设施,最优秀的学生。</p>
<button>了解更多</button>
</section>
<section class="news">
<h2>最新新闻</h2>
<ul>
<li>
<img src="news1.png">
<h3>校运会圆满结束</h3>
<p>本次校运会取得了很好的成绩,大家都非常努力。</p>
</li>
<li>
<img src="news2.png">
<h3>学校获得国家级荣誉</h3>
<p>我校在最新评比中获得了全国三好学校的称号,值得庆贺。</p>
</li>
<li>
<img src="news3.png">
<h3>学生会换届选举</h3>
<p>本次学生会换届选举将于下周举行,请各位同学积极参与。</p>
</li>
</ul>
</section>
<section class="activities">
<h2>校园活动</h2>
<ul>
<li>
<img src="activity1.png">
<h3>大型文艺晚会</h3>
<p>时间:6月15日 下午6点<br>
地点:学生活动中心<br>
欢迎大家前来观看。</p>
</li>
<li>
<img src="activity2.png">
<h3>志愿者招募</h3>
<p>我们正在招募志愿者,欢迎各位同学积极参与。</p>
</li>
<li>
<img src="activity3.png">
<h3>科技创新比赛</h3>
<p>我们将于下个月举办科技创新比赛,欢迎各位同学参加。</p>
</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 校园官网 2021</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
main {
padding: 20px;
}
.banner {
background-image: url(banner.jpg);
background-size: cover;
background-position: center;
color: #fff;
padding: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.banner h2 {
font-size: 40px;
margin-bottom: 20px;
}
.banner p {
font-size: 20px;
margin-bottom: 40px;
}
.banner button {
background-color: #fff;
color: #333;
padding: 10px 20px;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
}
.news {
margin-top: 50px;
}
.news h2 {
font-size: 30px;
margin-bottom: 20px;
}
.news ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news li {
margin-bottom: 30px;
flex-basis: 30%;
}
.news img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.news h3 {
font-size: 20px;
margin-bottom: 10px;
}
.news p {
font-size: 14px;
line-height: 1.5;
}
.activities {
margin-top: 50px;
}
.activities h2 {
font-size: 30px;
margin-bottom: 20px;
}
.activities ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.activities li {
margin-bottom: 30px;
flex-basis: 30%;
}
.activities img {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.activities h3 {
font-size: 20px;
margin-bottom: 10px;
}
.activities p {
font-size: 14px;
line-height: 1.5;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
阅读全文