使用工具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 改变文字大小

但是我们通过改变浏览器宽度,发现图片大小是固定的,怎么让它能改变大小

把刚才的标签去掉

在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,这样我们的一个最简单的网页就制作好了,下节课教大家如何把它放到服务器上,让别人通过浏览器访问

Last modification:October 14th, 2020 at 03:55 pm