html,CSS考试系统首页样式布局模板代码
时间: 2023-10-09 13:05:21 浏览: 85
以下是一个简单的HTML和CSS考试系统首页样式布局模板代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML/CSS考试系统</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav li a {
color: #333;
text-decoration: none;
padding: 10px;
display: block;
}
nav li a:hover {
background-color: #333;
color: #fff;
}
section {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.card {
background-color: #f2f2f2;
padding: 20px;
margin: 10px;
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 5px;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
.card h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
}
.card p {
margin: 0;
font-size: 16px;
text-align: center;
}
.card a {
background-color: #333;
color: #fff;
padding: 10px;
margin-top: 10px;
text-decoration: none;
border-radius: 5px;
transition: all 0.3s ease;
}
.card a:hover {
background-color: #fff;
color: #333;
border: 1px solid #333;
}
</style>
</head>
<body>
<header>
<h1>HTML/CSS考试系统</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">考试</a></li>
<li><a href="#">成绩查询</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<section>
<div class="card">
<h2>HTML基础考试</h2>
<p>考察HTML基础语法和标签使用</p>
<a href="#">开始考试</a>
</div>
<div class="card">
<h2>CSS基础考试</h2>
<p>考察CSS基础语法和样式定义</p>
<a href="#">开始考试</a>
</div>
<div class="card">
<h2>HTML/CSS综合考试</h2>
<p>考察HTML和CSS的综合应用能力</p>
<a href="#">开始考试</a>
</div>
</section>
</body>
</html>
```
这个模板代码包括了一个基本的页面布局,包括页眉、导航栏、和卡片式布局的内容区域。在这个模板中,我们使用了Flexbox布局来实现导航栏和内容区域的排列,并使用CSS样式来定义卡片的样式和动画效果。您可以在这个模板的基础上进行修改和扩展,以满足您的具体需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)