html制作《逆水寒》心得及部分代码

制作网页的心得和部分代码

布局

原图

首先，我们要明确网页的布局，以此来判断需要几个盒子，放在什么样的位置。从原网页中不难看出，我们可以把这张图分为这几个部分：
在这里插入图片描述
大的布局上，我们分为三个盒子。1号大盒子装下了2号盒子和3号盒子

<!-- 1号盒子命名为遇见区jujianqu，2号遇见yujian，3号遇见下yujianxia。（只是为了方便理解这样命名）  -->
<div class="yujianqu">1号<div class="yujian"></div>2号<div class="yujianxia"></div>3号
</div>

设置宽高

通过PS等软件，测量大盒子1号的宽和高，写在CSS样式表里

.yujianqu{width: 1722px;height: 300px;float: left;background-color: red;为了方便我们看到盒子的宽高以及位置 后期注释掉}

效果：
在这里插入图片描述
接着测量2号盒子的宽高

.yujian{width: 1722px;宽度和大盒子相同height: 61px;background-color: pink;
}

效果：
在这里插入图片描述
再测量3号盒子的宽高

.yujianxia{width: 1722px;height: 220px;float: left;background-color: slateblue;
}

效果：
在这里插入图片描述
接下来我们将图片换上（背景图用ps切出来或者截图或者查看源码保存图片）

.yujianqu{width: 1722px;height: 300px;float: left;/* background-color: red; */background:url(../images/nijiaobei.png);放在这里或者3号盒子里都可以 一般放在3号盒子防止上部分被覆盖background-size: 1722px 340px; 设置图片的宽1722px 高340px			margin-top: 20px;距上部分留20像素的距离
}
.yujian{width: 1722px;height: 61px;/* background-color: pink; */background:url(../images/yujian.png); background-size: 1722px 61px;
}.yujianxia{width: 1722px;height: 220px;float: left;/* background-color: slateblue; */
}

效果：
在这里插入图片描述

小盒子布局

大盒子布局完毕后，我们来设置小盒子。
观察原图，我们可以这样划分：
在这里插入图片描述
在2号盒子中设置一个小盒子，右上方

<div class="yujian"><div class="youshang"></div>
</div>

在3号盒子中添加无序列表ul和li，li中再设置放图片的盒子和放文字的盒子

<ul><li><a href="#"><div class="xiaotu16"></div></a>图片是可点击的，要设置链接 自己定义图片盒子的class名<div class="xiaozi"><a href="#"><h3></h3></a><p></p></div>标题用h3，p另起一行写内容</li><li><a href="#"><div class="xiaotu17"></div></a><div class="xiaozi"><a href="#"><h3></h3></a><p></p></div></li><li><a href="#"><div class="xiaotu18"></div></a><div class="xiaozi"><a href="#"><h3></h3></a><p></p></div></li><li><a href="#"><div class="xiaotu19"></div></a><div class="xiaozi"><a href="#"><h3></h3></a><p></p></div></li><li></li><li></li>
</ul>

设置小盒子的css样式

.youshang{width: 150px;height: 20px;float: right;margin-top: 12px;background-color: pink;小盒子是粉红颜色
}

效果：
在这里插入图片描述
设置ul和li

.yujianxia li{width: 574px;要根据自己设置盒子的宽度来计算每个li的宽度height: 110px;float: left;
}

设置li里放图片和文字的盒子的样式

.xiaotu16{width: 120px;height: 100px;float: left;/* background-color: salmon; */margin-top: 5px;margin-left: 80px;background:url(../images/xiaotu16.png);图片切出 保存 命名
}

效果：
在这里插入图片描述
最后我们只需要将每个图片都放在相对应的盒子里，设置好字体的大小颜色，调整文字的位置就可以了
经过调整后的效果：