使用工具Hbuilder 新建一个基本html项目 先写一个名字以及自我介绍 <p>legroft</p><p>菜鸡大学生</p> 然后再添加一张背景图片 <img src="./i
.
使用工具Hbuilder
新建一个基本html项目
先写一个名字以及自我介绍
<p>legroft</p>
<p>菜鸡大学生</p>
然后再添加一张背景图片
<img src="./img/head.png"/>可以看到有图片出现了
但是怎么变成下面这样呢
我们需要给html添加css样式
在css文件夹内新建一个style.css
然后在html里面引用它
<link rel="stylesheet" type="text/css" href="./css/style.css">
（类的概念）
在css里面写，
这表示我们给元素们分了一个叫 p1 的类，凡是属于 p1 这个类的元素都会具有 p1 的属性 比如凡是 p1 类的颜色都为绿色
（div的概念）
我们把每一块内容，都写在一个div里
所以我们把这三个内容放到div里
<div>
<div>
<img src="./img/head.png"/>
</div>
<div>
<p>legroft</p>
<p>菜鸡大学生</p>
</div>
</div>然后为div写样式
先给他们都分好类
给他们写一些样式
.div_head{
position: relative;
}
.div_background{
position: absolute;
}
.div_title{
position: absolute;
}
.p1{
color: white;
}
.p2{
color: white;
}
相对布局的概念 relative为父元素 absolote为子元素
我们发现 文字浮动在了图片上面 那么如何改变位置
为父元素设定高度 改变子元素距离顶端的距离可以改变高度 水平方向同理（但是水平我们用另一种方法）
width为div设定宽度 100%表示设定为父元素的100%宽度
text-align:center，表示将div内元素居中处理
.div_title{
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
这样我们的文字就会水平居中
然后我们可以设定font-size 改变文字大小
但是我们通过改变浏览器宽度，发现图片大小是固定的，怎么让它能改变大小
把刚才的<img>标签去掉
在div_background里写
.div_background{
position: absolute;
width: 100%;
height: 100%;
background: url(../img/head.png);
}然后我们发现之前白的地方也有图了，但是两张一样的图连在一起很怪，能不能只要一张图
在为其加一句
.div_background{
position: absolute;
width: 100%;
height: 100%;
background: url(../img/head.png);
background-size: cover;
}这样图片就会随着浏览器大小而改变大小
最后在加一句-webkit-filter: blur(5px); 就会使图片虚化
这样我们的第一块部分就完成了
下面制作列表部分，因为都是重复性的，所以做一个，后面的都是套用
添加这部分代码
<div class="div_content_img">
<div class="div_opacity"></div>
<div class="div_post_item" >
</div>
</div>
然后在css里面写样式
首先准备一张文章的背景图
像前面一样，将其设为背景图
.div_content_img{
background-image: url(../img/post.png);
width: 50%;
height: 300px;
background-size: cover;
}这样这个div的宽度为浏览器一般宽度，高度为300px
下面我们使其居中
然后我们给图片加上一层暗淡的特效
.div_opacity {
width: 100%;
height: 100%;
background: #000000;
opacity: 0.4; /* 透明度 0到1的小数 */
}
然后我们写文章封面内的文字介绍
<div class="div_content_img">
<div class="div_opacity"></div>
<div class="div_post_item" >
<a class="post_title">LPL夺冠</a>
<p class="post_text">2020-10-31</p>
<p class="post_tag">lol 赛事</p>
</div>
</div>
可以看到文字都在图片下面 ，我们要让它们在封面上
添加下面几句
简单美化一下
但是文字之间显得十分紧凑，我们让它们之间有一些距离，方便阅读
然后这个<a></a> 标签是干啥的
通过<a></a>标签我们可以跳转到别的界面 也就是超链接
用过远古IE浏览器的同学应该有体会 有下划线的蓝色文字 点击后变成紫色
那么如何跳转链接
href后面写跳转的网址 target=“_blank”表示在新界面打开
<a class="post_title" href="https://bilibili.com" target="_blank">LPL夺冠</a>修改超链接的样式
/* 默认状态的超链接 */
.post_title:link {
text-decoration: none;
color: white;
}
/* 访问过的超链接 */
.post_title:visited {
color: white;
}
/* 鼠标悬浮在上面时的超链接 */
.post_title:hover {
color: #1ABC9C;
}这样鼠标悬浮在超链接上会改变颜色
既然是文章列表肯定不能只有一篇文章，我们直接在下面多复制几个
<div class="div_content_img">
<div class="div_opacity"></div>
<div class="div_post_item" >
<a class="post_title" href="https://bilibili.com" target="_blank">LPL夺冠</a>
<p class="post_text">2020-10-31</p>
<p class="post_tag">lol 赛事</p>
</div>
</div>这样就会出现三个一模一样的内容
他们之间是没有间距的，我们再为其增加间距
然后背景颜色纯白色 有些突兀
假如我们文章比较多，我们可以增加一个“下一页”的按钮
<div class="div_next">
<div class="div_button">
<a class="next" href="#" target="_blank">下一页</a>
</div>
</div>
然后在css里为其增加样式
.div_next{
margin: auto; /* 使其居中 */
margin-top: 50px;
width: 50%;
height: 40px;
}
改变超链接的样式
.next:link{
text-decoration: none; /* 下划线 */
font-size: 15px; /* 文字大小 */
color: white; /* 文字颜色 */
}
.next:visited{
color: white;
}
.next:hover{
color: #1ABC9C;
}
然后给“下一页”增加一个按钮的效果
.div_button{
float: right;
width: 120px;
height: 40px;
background: #ff0004;
}
但是现在很难看，我们尝试把它变成圆角矩形
.div_button{
float: right;
width: 120px;
height: 40px;
background: #ff0004;
border-radius: 40px 40px 40px 40px; /* 四个边框角的圆角半径*/
border-style: solid; /* 边框的样式 */
border-width: 1px; /* 边框宽度 */
border-color: white; /* 边框颜色 */
}
最后再改一下按钮的颜色
background: #2c2a2a;
然后 做了一个网页当然要有署名了
接着在下面写
然后修改样式
.div_footer {
margin: auto;
margin-top: 50px;
height: 30px;
width: 50%;
}
.text_footer {
font-size: 10px;
color: #CCCCCC;
}
ok，这样我们的一个最简单的网页就制作好了，下节课教大家如何把它放到服务器上，让别人通过浏览器访问
本文分享自微信公众号 - 两耳的速食汤包（gh_84c0fe6a460d）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
