Web前端布局实战：三国杀页面布局（上）

互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。

网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

这里首先介绍的是布局的实战，html5+css3技术来实现前端的页面，持续关注，后续会不定时进行前端技术的分享。

一、三国杀界面的介绍和布局思路的整理

本次布局实战的是三国杀界面，最终完成的效果如下所示。

从界面上看，其实有8位英雄，如果单从布局的结果上来看，可以把每个英雄做为图片排列起来，再把血条排列起来，再把数字排列起来，但这样做其实不是一种面向对象的开发思维，布局的最终目的是后期可以用js或框架对页面中的元素进行操作，如果在打三国杀牌的时候，出一张“杀”，然后指明目标英雄后，目标英雄如果没有一张“闪”，那么就会掉血，也就是英雄对应的桃心血量会减去一个，使用面向对象的思维，就会调用公式：英雄.血量-1,如果把血量的排列放在一层，就不容易控制到底是哪个英雄的血量。所以最好的方法就是把每个英雄的相关布局设置好，然后横向排列，这样使用面向对象的开发思维，每个英雄就可以看作是一个对象了，后续对英雄的编码行为也就很容易控制玩家英雄的出牌、掉血和阵亡了。

二、单个玩家英雄的布局

首先看单个玩家英雄的布局。如下图所示。

首先定义一个外层的div，可以设置背景是英雄人物张飞，张飞的图片如下。

把div起一个id的名字，在css样式中定义div的width宽度是张飞图片的宽度，height为张飞图片的高度，背景图片为张飞的图片，并且设置不重复。具体代码如下。

<html><head><title>三国杀单个武将界面</title><style>#outer{width:233px;height:250px;background:url(jiang/jzhangfei_1200.jpg) no-repeat;}</style></head><body><div id="outer"></div></body>
</html>

代码最终效果在界面上出现张飞的人物，如下图所示。

根据最终效果图参考，在张飞的div里再嵌套一个div，这个div的图像是三国杀玩家外框的设置，三国杀玩家外框图如下所示。

这个图片有透明效果处理，给这个图片的div设置width宽度，设置height高度和背景图片，不重复，就能用这个图片盖住背景为张飞图片，也就是三国杀玩家外框罩住了张飞的图片，代码如下。

<html><head><title>三国杀界面</title><style>#outer{width:233px;height:250px;background:url(jiang/jzhangfei_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;}</style></head><body><div id="outer"><div id="inner"></div></div></body>
</html>

代码中有一个id为”outer”的div包着一个id为”inner”的div，id为”outer”的div设置背景为张飞，id为”inner”的div设置背景为三国杀玩家外框。background中的参数no-repeat表示不重复。两个div都要设置width和height，即宽和高，宽和高的值可以根据图片的宽和高的值来确定。代码最终显示结果如下图所示。

从图片的结果上看，张飞的人物上面有一个三国杀人物外框。

下面根据最终效果图添加右侧上方的人物身份图，四个血量值，及右侧下面显示的牌的数目4，这三个元素都可以分别使用div来包起来，这样三个元素就能够控制一行，div元素就实现了对一行的统治。

设置一个div元素，里面只有一个身份的图像，这个图像可以做背景，也可以直接作为图像来处理。如果作为图像处理，包着这个图像的div就会自动被拉伸开来。然后在css中需要调整这个图片的距离，它是排列在右侧的，如果用margin-left这个来定位，这个参数值太大，在不同的浏览器中适配也会成为问题。如果把最外层的id为”inner”的div加上一个position属性,它的值是relative,进行相对位置处理，里面的人物身份图像作absolute设置，绝对定位处理，这样人物身份图像不管如何定位，都不会脱离relative相对定位元素的限制。只要将绝对定位的人物身份定义其right右侧的距离值和top距上侧的距离值即可。代码如下。

<html><head><title>三国杀界面</title><style>#outer{width:233px;height:250px;background:url(jiang/jzhangfei_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}</style></head><body><div id="outer"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div></div></div></body>
</html>

从代码中看，id为identify的身份标识div嵌套到id为inner的div中，identify身份标识div中有一个img标签，img图像标签的图片路径用src来进行标识，src中的值就是img图片的具体路径。在css设置中，把id为inner的div设置position的属性值为relative，即相对定位，把id为identify的div设置position的属性值为absolute，即绝对定位，然后就可以定义identify的div的right值和top值，调整人物身份的具体显示位置。代码显示的结果如下图所示。

从上图的结果上看，“反贼”的身份标识就显示在三国杀人物外框的右边。

接下来，再进行四个心型血值的显示，用一个div包裹心型血值的图像，这四个心型血值的img标签也可用div分别进行包裹，这样4个心型血值图片就可以竖向排列起来了。然后也是把包裹4颗心型血值的最外层div 定义position属性值为absolute，即绝对定位，定位其right值和top值，来实现位置上的调整，代码如下。

<html><head><title>三国杀界面</title><style>#outer{width:233px;height:250px;background:url(jiang/jzhangfei_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}</style></head><body><div id="outer"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div></div></div></body>
</html>

代码中，有id为blood的div，其中包含有四个div，每个div中有一个标签img，img的src属性指向的是心型血量的图片，用div包裹的原因是需要进行竖向排列处理，接下来在css中调置这个id为blood的div样式，其样式中，调整position的定位为绝对定位，设置绝对定位的right右侧的值及top上侧的值，两个值的交叉点确定血量值的位置。代码显示的结果如下图所示。

从界面显示的结果上来看，“反贼”的身份标识下面有四个心型血量值图案也显示在三国杀人物外框的右边。

下面处理右下角显示的4，即英雄玩家手拿的卡牌数。

这里还是用一个div包裹起来一个数字4，然后对这个div设置position的属性值是absolute，同时设置bottom距下面的距离值和right右侧的距离值，还要注意设置数字4的字体，字号，横向居中和竖向居中，中间对齐的css可以使用text-align：center这样的css语句来设置，竖向居中可以使用line-height结合height高度来设置，line-height的值与height的高度值一致，就可以达到竖向居中的效果。代码如下。

<html><head><title>三国杀界面</title><style>#outer{width:233px;height:250px;background:url(jiang/jzhangfei_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div id="outer"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></body>
</html>

从代码上看，在id为inner的div中又添加了一个id为num的div，包裹起来一个数字4，然后定义css样式position的定位方式，absolute绝对定位，font-size字体设置，color进行字体颜色设置，bottom底部位置设置，right右侧边距位置设置。显示的效果如下图所示。

从图中的效果上看，这样第一个英雄的设置就设置成功了。

三、三国杀群殴界面七个玩家英雄的布局

在三国杀身份8人局中，群殴界面中有7个是占据三国杀界面2/3的范围，这些英雄玩家div是一个接着一个排列起来的，可以理解成div块状元素进行浮动设置，经过浮动设置的div就会一个挨着一个排列起来。在排列之前首先设置三国杀界面的大背景，如下图所示。

根据背景的大小是1200*800，可以全界面网页文件body元素中设置一个大的div，大小为width设置成1200，height高设置为800，这样一个大的三国杀群殴背景就设置成功了。代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}</style></head><body><div  id="bg"></div></body>
</html>

代码中直接定义一个id为bg的div，然后定义其css样式为width宽度，height高度，以及background背景图片的内容。代码显示的效果如下图所示。

把之前设置的一个武将拷贝过来，把最外层的div设置成左浮动，即将原id为outer的div在css样式中添加一条float:left语句即可。代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}#outer{width:233px;height:250px;background:url(jiang/jzhangfei_1200.jpg) no-repeat;float:left;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div  id="bg"><div id="outer"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></div></body>
</html>

从代码上看，css样式代码中id 为outer的div添加了一条float:left，让这个英雄的div块状元素进行左浮动的设置，为了让之后的英雄块状元素都能够设置左浮动，把outer这个id的标志改成class标志，这样做可以把background背景图片css设置语句单独拿出来，利用class选择器可以复用的原则，将两个class选择器共同作用在原来是id为outer的div上面，这样，对于后面的英雄，只需要定义不同的英雄背景图片即可完成三国杀2/3界面中七位英雄玩家的设置。先看将id为outer的div改成背景英雄class和通过配置class共同作用的代码。代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}.outer{width:233px;height:250px;float:left;}.hero1{background:url(jiang/jzhangfei_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div  id="bg"><div class="outer hero1"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></div></body>
</html>

代码中把css中原来是#outer改成了.outer，在.outer中把background语句提出了出来，形成新的类选择器hero1，定义hero1的类选择器中的语句是background设置英雄的背景图片，再把html中英雄div原来是id=”outer”，现在改成class=”outer hero1”的形式，变成由类选择器outer和类选择器hero1共同作用的英雄div。这样的代码显示结果如下图所示。

从图中的结果上看，三国杀群殴的8人局中已有了其中一个将张飞，下面复制张飞的html的代码，粘贴到张飞的div下面，代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}.outer{width:233px;height:250px;float:left;}.hero1{background:url(jiang/jzhangfei_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div  id="bg"><div class="outer hero1"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero1"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></div></body>
</html>

在浏览器中打开这个页面，页面中就有了第二个张飞的界面，如下图所示。

现在把代码中的hero1变成hero2，换成另外一个将的图片，代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}.outer{width:233px;height:250px;float:left;}.hero1{background:url(jiang/jzhangfei_1200.jpg) no-repeat;}.hero2{background:url(jiang/jcaocao_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div  id="bg"><div class="outer hero1"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero2"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></div></body>
</html>

代码中在css中又定义了一个类选择器hero2,用background语句，把其中的背景图设置为曹操的图片，然后把第二个class=”outer” 的英雄标签中添加上hero2的类选择器名称，显示的网页结果如下图所示。

把这样的英雄div一直复制下去，再去修改class的名称，不断产生英雄，这样第一行的五位英雄就会依次产生，代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}.outer{width:233px;height:250px;float:left;}.hero1{background:url(jiang/jzhangfei_1200.jpg) no-repeat;}.hero2{background:url(jiang/jcaocao_1200.jpg) no-repeat;}.hero3{background:url(jiang/jguanyu_1200.jpg) no-repeat;}.hero4{background:url(jiang/jzhenji_1200.jpg) no-repeat;}.hero5{background:url(jiang/jzhaoyun_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div  id="bg"><div class="outer hero1"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero2"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero3"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero4"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero5"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></div></body>
</html>

代码中css中新定义了hero3，hero4，hero5三个类选择器，分别修改背景为不同的英雄名字，关羽，甄姬和赵云，然后在英雄的div中分别在class=“outer”中加入另外一个类选择器hero3，hero4和hero5。显示的网页结果如下图所示。

接下来排列第二行的英雄元素，第二行的英雄元素也可以直接复制原张飞的div元素，只不过需要把中间的三个英雄div元素中的内容删除掉就可以，也不需要设置hero的class类选择器，相当于中间有3个占位div而已，但这3个占位div中是没有内容的，只是一个空div而已。代码如下。

<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}.outer{width:233px;height:250px;float:left;}.hero1{background:url(jiang/jzhangfei_1200.jpg) no-repeat;}.hero2{background:url(jiang/jcaocao_1200.jpg) no-repeat;}.hero3{background:url(jiang/jguanyu_1200.jpg) no-repeat;}.hero4{background:url(jiang/jzhenji_1200.jpg) no-repeat;}.hero5{background:url(jiang/jzhaoyun_1200.jpg) no-repeat;}.hero6{background:url(jiang/jsunshangxiang_1200.jpg) no-repeat;}.hero7{background:url(jiang/jxiaoqiao_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><div  id="bg"><div class="outer hero1"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero2"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero3"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero4"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero5"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer hero6"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div><div class="outer"></div><div class="outer"></div><div class="outer"></div><div class="outer hero7"><div id="inner"><div id="identify"><img src="data:image/vfan.png"/></div><div id="blood"><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div><div><img src="data:image/vhongtao.png"/></div></div><div id="num">4</div></div></div></div></body>
</html>

代码中css中定义了新的类选择器hero6和hero7，分别设置了hero6和hero7的background属性，其值是孙尚香的将图片和小乔的将图片，在html代码中，复制的张飞将的div分别在class=”outer”类选择器使用上加入了hero6和hero7的class类选择器的名称，注意，在hero6和hero7类选择器作用的class类之间的div标签，只有class=”outer”的类选择器作用的属性，其中的div中间是没有内容的，只是占位来使用的。显示的结果如下图所示。

从上图的效果上来看，三国杀中参与群殴的七个将已经准备就绪了，排列的很成体系。下面就等着主角的登场了。

代码的github地址：https://github.com/wawacode/sanguosha_layout

B站视频教程地址：三国杀界面布局1-DIV+CSS实现七个英雄排座次（https://www.bilibili.com/video/BV1jK411F7g2/）