写一篇使用盒子模型和选择器制作网页的实验报告
时间: 2023-08-11 21:05:48 浏览: 116
实验报告:使用盒模型和选择器制作网页
一、实验目的
本实验旨在通过使用盒模型和选择器,制作一个简单的网页,熟悉HTML元素、CSS样式的基本使用方法。
二、实验内容
1. 创建一个HTML文档,命名为“index.html”;
2. 在文档中添加头部信息,包括页面标题、引入CSS文件等;
3. 在文档中添加页面主体内容,包括标题、导航菜单、正文等;
4. 使用盒模型和选择器设置页面元素的样式,包括背景色、边框、字体等;
5. 在CSS文件中设置响应式布局,使网页适应不同设备屏幕大小。
三、实验步骤
1. 创建HTML文档并添加头部信息:
```
<!DOCTYPE html>
<html>
<head>
<title>实验报告</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
```
2. 添加页面主体内容,包括标题、导航菜单、正文等:
```
<header>
<h1>实验报告</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<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>
</nav>
</header>
<main>
<section>
<h2>实验目的</h2>
<p>本实验旨在通过使用盒模型和选择器,制作一个简单的网页,熟悉HTML元素、CSS样式的基本使用方法。</p>
</section>
<section>
<h2>实验步骤</h2>
<ol>
<li>创建HTML文档并添加头部信息;</li>
<li>添加页面主体内容,包括标题、导航菜单、正文等;</li>
<li>使用盒模型和选择器设置页面元素的样式,包括背景色、边框、字体等;</li>
<li>在CSS文件中设置响应式布局,使网页适应不同设备屏幕大小。</li>
</ol>
</section>
</main>
```
3. 使用盒模型和选择器设置页面元素的样式,包括背景色、边框、字体等:
```
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
font-size: 36px;
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
section {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
h2 {
font-size: 24px;
margin: 0;
margin-bottom: 10px;
}
p {
margin: 0;
}
ol li {
margin-bottom: 10px;
}
main {
max-width: 800px;
margin: 0 auto;
}
```
4. 在CSS文件中设置响应式布局,使网页适应不同设备屏幕大小:
```
@media screen and (max-width: 768px) {
header {
padding: 10px;
}
h1 {
font-size: 24px;
}
nav li {
display: block;
padding: 5px;
}
section {
padding: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 20px;
margin-bottom: 5px;
}
}
```
四、实验结果
经过以上步骤,我们成功制作出了一个简单的网页,实现了盒模型和选择器的基本应用,具有一定的响应式布局能力。
五、实验总结
通过本次实验,我们学习了HTML元素和CSS样式的基本应用方法,了解了盒模型和选择器的概念,掌握了响应式布局的基本技能。在今后的学习和实践中,我们应该进一步加强对HTML和CSS的理解和应用能力,不断提高自己的编程水平。