文章目录
静态网页练习之我的网站
布局
搭积木盒子思维
根据我们上一期学习的思想，也就是说网页中的元素，我们都可以看作一个一个盒子，也就是当这个元素的布局属性 diplay 是block 时，或者是 div 标签时
div
这里顺带介绍一下，我们使用的 html 标签大部分是自带布局或者其他属性的，但是我们的 div 就是专门为了我们设置布局的一个标签。
静态网页案例：
比如这样一个静态网页的案例
首先就可以分成这样的三个盒子：
实现思路：
也就是说，可以使用3个 div 标签，再在里面的标签里添加内容，我们的静态网页就做好了
实现步骤：
1.初始化页面，并且写好三个div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
2.引入头像，写好第一个div盒子的样式
在第一个盒子里添加 img 标签，在src中输入图片位置，这里有一个相对路径和绝对路径，自己搜索一下如何使用。
导入图片后是这样
我们的头像应该要缩小一点
这里设置高度和宽度为 80 px
给 div 标签加入class属性，使用css调整样式
设置一个灰色的背景颜色，然后图片居中，加入内边距
目前代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header{
background-color: #f1f1f1;
text-align: center;
padding: 40px;
}
</style>
</head>
<body>
<div class="header">
<img src="./image/1.jpg" alt="" width="80px" height="80px">
</div>
<div></div>
<div></div>
</body>
</html>
2.第二个 div 盒子设置样式
给中间的 div 盒子加入主题内容（随意）：
加入属性text，并且设置样式，最大宽度为700px，外边距 40px auto， 字体大小 14px， 行间距 1.7倍
目前代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header{
background-color: #f1f1f1;
text-align: center;
padding: 40px;
}
.text{
max-width: 700px;
margin: 40px auto;
font-size: 14px;
line-height: 1.7;
}
</style>
</head>
<body>
<div class="header">
<img src="./image/1.jpg" alt="" width="80px" height="80px">
</div>
<div class="text">
<p>
很早之前，在一次和朋友偶然的交谈中，他突然询问了我一个问题。他问道：“我看了很多的书，但是发现没有地方得以实践，好像读了很多的书，但是发现在生活中，并没有什么作用，你觉得呢？”
然而，我当时被问住了，我想了半天，难以回答。
但是当我回到家的时候，我想到了一个故事，那就是西西弗斯藐视诸神的故事。
这个故事很有意思，讲的是西西弗斯因为背叛诸神，而被惩罚他把一块巨石推上山顶。然而，由于巨石太重，每每未上山顶就又滚下山去，前功尽弃。于是，西西弗斯就不断重复、永无止境地做这件事。
诸神认为，再也没有比进行这种无效无望的劳动更为严厉的惩罚了。
</p>
</div>
<div></div>
</body>
</html>
3.第三个 div 盒子
第一步，给第三个盒子加入内容，关于我的网页
加入样式，这里的样式和第一个 div 盒子的样式一样，我直接粘贴来：
但是仔细看这里发现，下面的字太大了，不好看，设置字体大小为 10px
这就好啦
完整demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header{
background-color: #f1f1f1;
text-align: center;
padding: 40px;
}
.text{
max-width: 700px;
margin: 40px auto;
font-size: 14px;
line-height: 1.7;
}
.foot{
background-color: #f1f1f1;
text-align: center;
padding: 40px;
font-size: 10px;
}
</style>
</head>
<body>
<div class="header">
<img src="./image/1.jpg" alt="" width="80px" height="80px">
</div>
<div class="text">
<p>
很早之前，在一次和朋友偶然的交谈中，他突然询问了我一个问题。他问道：“我看了很多的书，但是发现没有地方得以实践，好像读了很多的书，但是发现在生活中，并没有什么作用，你觉得呢？”
然而，我当时被问住了，我想了半天，难以回答。
但是当我回到家的时候，我想到了一个故事，那就是西西弗斯藐视诸神的故事。
这个故事很有意思，讲的是西西弗斯因为背叛诸神，而被惩罚他把一块巨石推上山顶。然而，由于巨石太重，每每未上山顶就又滚下山去，前功尽弃。于是，西西弗斯就不断重复、永无止境地做这件事。
诸神认为，再也没有比进行这种无效无望的劳动更为严厉的惩罚了。
</p>
</div>
<div class="foot">
<p>myblog</p>
<a href="https://blog.csdn.net/qq_61715584?spm=1010.2135.3001.5343">我的csdn网址</a>
</div>
</body>
</html>
