社团第一课----网页制作

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