帮我设计一个校园网站首页,条件:html与css,运行看效果
时间: 2023-07-15 09:14:17 浏览: 83
好的,我来帮您设计一个校园网站首页。
首先,我们需要一个基本的 HTML 结构:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>校园网站首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<!-- 头部内容 -->
</header>
<nav>
<!-- 导航内容 -->
</nav>
<main>
<!-- 主要内容 -->
</main>
<footer>
<!-- 底部内容 -->
</footer>
</body>
</html>
```
接下来,我们来设计页面的样式。在 `style.css` 中添加以下代码:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
header h1 {
margin: 0;
}
/* 导航样式 */
nav {
background-color: #f1f1f1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
nav a {
color: #333;
text-decoration: none;
font-weight: bold;
margin-left: 20px;
}
nav a:hover {
color: #555;
}
/* 主要内容样式 */
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 160px);
background-image: url('bg.jpg');
background-size: cover;
}
main h2 {
color: #fff;
font-size: 48px;
margin: 0;
}
main p {
color: #fff;
font-size: 24px;
margin-top: 10px;
}
/* 底部样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
最后,我们来添加具体的内容:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>校园网站首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>校园网站</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">活动</a>
<a href="#">招聘</a>
<a href="#">关于</a>
</nav>
<main>
<h2>欢迎来到校园网站</h2>
<p>这里是我们学校的官方网站,提供最新的新闻和活动信息。</p>
</main>
<footer>
© 2021 校园网站. All rights reserved.
</footer>
</body>
</html>
```
现在您可以在浏览器中打开该 HTML 文件,查看效果了。
阅读全文