HTML学校网站首页头部css代码
时间: 2023-09-16 07:14:25 浏览: 63
以下是一个简单的HTML学校网站首页头部的CSS代码示例:
```css
/* 设置整个网站的字体和颜色 */
body {
font-family: Arial, sans-serif;
color: #333;
}
/* 设置网站标题 */
h1 {
font-size: 3em;
margin-top: 0;
text-align: center;
}
/* 设置导航栏 */
nav {
background-color: #ccc;
padding: 10px;
}
/* 设置导航链接样式 */
nav a {
color: #333;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
/* 设置当前页面链接的样式 */
nav a.current {
color: #fff;
background-color: #333;
padding: 5px 10px;
border-radius: 5px;
}
/* 设置头部图像 */
header {
background-image: url(images/header.jpg);
background-size: cover;
height: 300px;
}
```
注:上述代码仅供参考,具体的样式需要根据实际情况进行调整。
相关问题
母校介绍网页设计html+css代码
下面是一个简单的母校介绍网页设计的 HTML+CSS 代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>母校介绍</title>
<style>
/* 设置全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* 设置头部样式 */
header {
background-color: #0078d7;
color: #fff;
padding: 20px;
}
header h1 {
font-size: 36px;
margin-bottom: 10px;
}
header p {
font-size: 18px;
margin-bottom: 20px;
}
/* 设置主要内容区域样式 */
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 30px;
}
section h2 {
font-size: 24px;
margin-bottom: 10px;
}
section p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
/* 设置页脚样式 */
footer {
background-color: #eaeaea;
padding: 20px;
text-align: center;
}
footer p {
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<header>
<h1>母校介绍</h1>
<p>这里是母校的简介。</p>
</header>
<main>
<section>
<h2>学校历史</h2>
<p>这里是学校历史的内容。</p>
</section>
<section>
<h2>学校荣誉</h2>
<p>这里是学校荣誉的内容。</p>
</section>
<section>
<h2>师资力量</h2>
<p>这里是师资力量的内容。</p>
</section>
<section>
<h2>校园环境</h2>
<p>这里是校园环境的内容。</p>
</section>
</main>
<footer>
<p>版权所有 © 母校名称</p>
</footer>
</body>
</html>
```
这个网页包含一个头部、主要内容区域和页脚。在主要内容区域中,分别包含了学校历史、学校荣誉、师资力量和校园环境等部分。通过 CSS 样式设置,我们为网页添加了一些颜色和排版样式,使得网页看起来更加美观和整洁。当然,这只是一个简单的示例,实际上母校介绍网页可能需要更多的内容和样式。
HTML利用CSS+DIV技术设计学校官网的布局结构,写下代码
很抱歉,我是一个语言模型,无法提供代码输出功能,但我可以提供一个简单的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>
</section>
<section class="news">
<h2>最新动态</h2>
<ul>
<li><a href="#">新闻标题1</a></li>
<li><a href="#">新闻标题2</a></li>
<li><a href="#">新闻标题3</a></li>
<li><a href="#">新闻标题4</a></li>
</ul>
</section>
<section class="teaching">
<h2>教学简介</h2>
<p>这里是教学简介的内容</p>
</section>
<section class="enrollment">
<h2>招生信息</h2>
<p>这里是招生信息的内容</p>
</section>
<section class="about">
<h2>关于我们</h2>
<p>这里是关于我们的内容</p>
</section>
</main>
<footer>
<p>版权信息 © 学校名称</p>
</footer>
</body>
</html>
```
CSS代码:
```
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 10px;
}
header h1 {
margin: 0;
}
/* 导航栏样式 */
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
/* 主要内容样式 */
main {
display: flex;
flex-wrap: wrap;
}
section {
flex: 1;
padding: 20px;
box-sizing: border-box;
}
section h2 {
margin-top: 0;
}
/* 横幅样式 */
.banner {
background-image: url(banner.jpg);
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
}
.banner h2 {
margin-top: 100px;
}
/* 脚部样式 */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
```