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

布局

原图

首先，我们要明确网页的布局，以此来判断需要几个盒子，放在什么样的位置。从原网页中不难看出，我们可以把这张图分为这几个部分：

大的布局上，我们分为三个盒子。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);图片切出 保存 命名
}

效果：

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

不足及解决方案

没有让数字变成红色字体。使用标签定义同样的名称，设置为红色

在图片的右边的标题旁没有小图片。使用精灵图，定位到图标的位置上，或者截图保存，添加一个小盒子来放图片。

html制作《逆水寒》心得及部分代码相关推荐

逆水寒商业脚本制作视频
一章易语言基础共6课时 1.关于易语言必须了解的基本知识 2.易语言基本组件(不包括超级列表框)讲解 3.易语言超级列表框详解 3.易语言核心支持库讲解之一 4.易语言核心支持库讲解之二 5.易 ...
LeetCode高频题：《逆水寒》在地图的制作中，美术在地图上刷一片连通区域，连通区域自动填充，请你判断给定几个点位置，他们是否属于被刷区域
LeetCode高频题:<逆水寒>在地图的制作中,美术在地图上刷一片连通区域,连通区域自动填充,请你判断给定几个点位置,他们是否属于被刷区域? 提示:本题是系列LeetCode的150道高 ...
23行代码下载逆水寒壁纸图片
不多说直接来完整代码 #导入模块 import os import requestsurl = 'https://n.res.netease.com/xt/wallpaper_2018/cjjt/13 ...
逆水寒服务器维护7.5,逆水寒7.26日更新吐槽介绍逆水寒7.26日更新后心得分享
逆水寒7.26日更新吐槽介绍逆水寒7.26日更新后心得分享 2018-07-26 14:38:15来源:游戏下载编辑:苦力趴评论(0) <逆水寒>在今天进行了例行的服务器维护,以及针对游 ...
【逆水寒三周年】大型MMO项目UI管理的价值与责任
<逆水寒>作为一款大型MMO端游,UI工作的复杂和压力相当巨大,虽然最艰难紧张的时间是17年到19年,但是如今想来还是心有余悸.大型MMO端游流程复杂.资源繁多.开发过程中,参与人员多.开 ...
逆水寒大型MMO项目UI管理的价值与责任
<逆水寒>作为一款大型MMO端游,UI工作的复杂和压力相当巨大,虽然最艰难紧张的时间是17年到21年,但是如今想来还是心有余悸.大型MMO端游流程复杂.资源繁多.开发过程中,参与人员多.开 ...
周末，我打开《逆水寒》参加了一场AI学术会议
晓查发自凹非寺量子位编辑 | 公众号 QbitAI 今年,线上办AI学术会议已经是常态了. 但在中国古风游戏里开会,你肯定没见过. 会场设在大宋皇宫议事厅,门卫是带刀宫廷侍卫,参会者清一色换上 ...
网易逆水寒服务器型号,从服务器爆满到无人问津的经典游戏
逆水寒又名会呼吸的江湖,当打出中国最后一款端游的名号被玩家喷的狗血淋头以后,瞬间改口称了网易最后一款端游,该游戏是由网易易雷火工作室开发制作并于18年6月开启不删档测试的一款MMORPG端游,在那个将 ...
逆水寒7.25服务器维护,逆水寒7月4日更新维护公告角色交易功能上线
原标题:逆水寒7月4日更新维护公告角色交易功能上线逆水寒7月4日更新了什么内容,7月4日正式服中加入了角色交易的新功能,另外天江之战活动也正式开启,以下来看下完整的更新公告. 各位自在同门: 为了 ...

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

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

布局

设置宽高

小盒子布局

不足及解决方案

html制作《逆水寒》心得及部分代码相关推荐

最新文章

热门文章