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

四、三国杀群殴界面第8人主角玩家的布局

从案例开始的最终结果图显示，首先要设置牌区，而牌区在整个三国杀布局图的最底部中间的位置，在牌区的上面需要有一段距离，这段距离可以用一个空的div做占位，玩家主角底部的装备区内没有设置任何的装备，可以用一个div，设定宽度和高度进行占位即可。而装备区、卡牌区和主角技术显示区三个部分构成了主角玩家的底部布局，可以把玩家底部的布局定义成一个大的div，里面包括了左边的装备区div，中间的卡牌区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;}#space{width:100%;height:95px;background:black;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"></div><div id="right"></div></div></div></body>
</html>

代码的html中在英雄div的下面继续添加一个div，其id为space，定义css样式是width宽度为整屏100%，竖向高度为95px，为了帮助找到这个div,在css中加入了背景色为黑色的语句，即background:black。在html代码id为space的div下面跟了一个id为myhero的div,高度为190px，宽度为100%，这个div其作用就是玩家第8人的英雄位置，内部有三个div,id为left为左边的装备区，中间是id为middle_card的中间卡牌区，右边是id为right的英雄技能显示区。左边的装备区在css中设了width宽度为235px，这是左边装备区的宽度，高度跟外面大的id为myhero的div高度一致，使用background:red实际上是便于识别这个div的宽度和位置是不是适合，更有效地定位卡牌区的位置。显示的效果图如下所示。

从上图显示的效果来看，没有看到黑色div和红色的div的位置，这是什么原因呢?
通过查看元素，在dom树型结果中找到<div id=”space”>的标签，看一下界面上面的提示，如下图所示。

从上图中看，鼠标指向<div id=”space”>时，图中有亮框显示的地方在浏览器的顶部，说明id为space的黑色div在浏览器顶部这个位置上，这是由于前面的div元素float:left造成了，造成了后面的元素能够被float：left的元素覆盖掉，需要将当前
的元素做清除浮动的操作，即clear:both的css语句去清除

元素两端的浮动效果，就完成了元素能够正常在英雄的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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"></div><div id="right"></div></div></div></body>
</html>

代码中在css中的id为space的语句中添加了一句:clear:both来完成清除浮动的操作。显示的浏览器结果如下图所示。

从上图中效果来看，黑色显示在最后一个英雄div的下面，这是一段空白的地方，左边红色的块显示的是玩家第8人的装备区。现在可以对中间的卡牌区进行布局，跟英雄道理是一样的，先做一张卡牌的效果。
定义一个卡牌背景的div，然后在其中加入数字的div和花色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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;}#myhero #middle_card #card{width:98px;height:138px;background:url(card/ktao.png) no-repeat;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div id="card"></div></div><div id="right"></div></div></div></body>
</html>

代码中在html中的<div id=”middle_card”;&gt元素中加入一个<div>素，在其元素上设置id=“card”，然后设置css元素时根据图片的宽和高设置width和height，并用backgroud设置背景图片为卡牌的背景图片。显示的结果如下图所示。

从图中的结果看，“桃”这张牌已经放到了三国杀布局中，不过没有显示在玩家第8人的牌区，这是由于没有把玩家第8人的装备区div，牌区div和技术显示区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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;}#myhero #middle_card #card{width:98px;height:138px;background:url(card/ktao.png) no-repeat;}#myhero #right{float:left;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div id="card"></div></div><div id="right"></div></div></div></body>
</html>

代码中把#myhero玩家第8人div区里面的三个div，id分别为left、middle_card和right的css代码中都加入了float:left这样的语句，实现了玩家第8人div区中的所有div浮动的效果。
显示的效果如下图所示。

从图中的效果上看，“桃”这个牌的宽度和高度都小了一些，证明原图的牌需要放大一点，这时就需要使用css3中的背景属性语句background-size来扩大背景图的尺寸，让其尽量满足牌的大小。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;}#myhero #middle_card #card{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;}#myhero #right{float:left;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div id="card"></div></div><div id="right"></div></div></div></body>
</html>

代码中在css里把id为card的语句进行了修改，把width宽度调整为140px，height高度调整为188px，加入了background-size背景尺寸的语句，把背景图片拉伸为外部的div大小，这样调整后的代码，效果如下图所示。

从图中看，“桃”的大小基本上符合玩家第8人的牌区大小，现在需要在背景卡牌div里面加入两个div，一个div中含有数字，一个div是一个花色。调整花色和数字的位置可以依据三国杀人物布局中的relative相对定位和absolute相对定位，“桃”的整个牌div可以设置定位position的值是relative相对定位，把“桃”的整个牌div里面的数字标签div和花色标签div设置成absolute，同时利用left 和top的值来限定花色及数字的位置。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;}#myhero #middle_card #card{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card #card #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card #card #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:left;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div id="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div id="right"></div></div></div></body>
</html>

代码中在html中的<div id=”card”>元素中添加两个div元素，一个是id为cardtype的div，里面包含一个花色的图片，这里是红桃的图片，一个是id为cardnum的div，里面是一个数字。在css代码中，把<div id=”card”>这张牌div设置成position定位为relative，把里面的card_type的div和cardnum的div都定位成absolute，调整left和top的值使其显示在牌div的左侧位置，看起来就像是卡牌的花色和点数。注意cardnum的div需要设置宽width和高height，以保证数字的显示，font-size属性实现数字的字号大小设置。浏览器显示的结果如下图所示。

从上图中的效果上来看，英雄第8人的卡牌区有了一张牌“桃”，花色是红桃，点数是2。下面现复制其它的牌，形成4张牌，代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;}#myhero #middle_card #card{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card #card #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card #card #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:left;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div id="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div><div id="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div><div id="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div><div id="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div id="right"></div></div></div></body>
</html>

代码中html中复制了几次<div id=”card”>及其下包含的所有元素。这里的属性id也可以改成class=”card”来进行类标签的设置。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;}#myhero #middle_card .card{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card .card #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card .card #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:left;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div class="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div><div class="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div><div class="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div><div class="card"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div id="right"></div></div></div></body>
</html>

代码中html元素<div id=”card”>被设置成<div class=”card”>，设置成功后css中原来用”#”设置的id标志也要更换成”.”，变成类选择器的标志。最终代码在浏览器中显示的结果如下图所示。

从图中的结果上看，“桃”被竖向排列了起来，这是由于没有浮动，但要注意，就算设置了浮动，最终也是每张牌并排显示，就像英雄的显示一样，没有重叠的压盖，而从最终效果上看，牌区的显示是需要覆盖的，如下图所示最终效果的牌区。

从图中效果上看，有牌与牌之间的压盖，这就需要设置定位，让每张牌进行脱离文档流的绝对定位处理，即position设置成absolute，那就需要外层的middle_card设置成为position:relative，然后控制着里面的position定位为绝对定位的牌的位置。再不断调整每张牌的left左边的距离值实现重叠覆盖。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;position:relative;}#myhero #middle_card .cardouter{width:140px;height:188px;position:absolute}.card1{left:0px;top:0px;}.card2{left:80px;top:0px;}.card3{left:160px;top:0px;}.card4{left:240px;top:0px;}#myhero #middle_card .cardinner{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card .cardinner #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card .cardinner #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:left;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div class="cardouter card1"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card2"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card3"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card4"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div></div><div id="right"></div></div></div></body>
</html>

代码中html对<div class=”card”>进行了改变，用<div class=”cardouter”>来代替，这是有原因的，因为外层<div id=”middle_card”>元素定义成relative之后，里面的<div class=”card”>在css中已经定义过了position:relative ，再进行定义position:absolute就会产生冲突，解决这种定义上冲突的方法只有一种，那就是把原来的一个<div class=”card”>拆分成两个div元素，外层的div的id名字叫cardouter，内层的div的id名字叫cardinner，外层id名为cardouter的div其css语句中可以设置position:absolute进行牌的绝对定位，通过left和top的值来结合调整位置，内层id名为cardinner的div其css语句中可以设置position:relative相对定位去控制里面的花色和数字的元素定位。这样的思路就可以控制牌的显示重叠了，而top和left的值可以通过定义每张牌的类选择器来调整位置，根据类选择器可以复用的原则可以把cardouter和card1这样的类选择器确定第一张牌的位置，同理，cardouter和card2类选择器结合确定第二张牌的位置，cardouter和card3 类选持器确定第三张牌的位置，cardouter和card4类选择器确定第四张牌的位置。浏览器显示的效果如下图所示。

从上图中的结果上看，4张卡牌已经重叠覆盖在玩家第8人的卡牌区了。
卡牌区设置成功后，进行最后的人物区的设置。
对于人物区的设置，还是首先需要定义一个div，背景图像为第8个游戏玩家的人物头像。在这个div的上面设置一个div，背景图像是一个边框，调整边框的位置，可以通过调整margin-top的负值，将这个框提高到人物头像的上面，而不是和人物头像的顶部对齐，可以通过调整margin-left的负值，将这个框移动到人物头像的左面，而不是和人物头像的左边对齐。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;position:relative;width:740px;}#myhero #middle_card .cardouter{width:140px;height:188px;position:absolute}.card1{left:0px;top:0px;}.card2{left:80px;top:0px;}.card3{left:160px;top:0px;}.card4{left:240px;top:0px;}#myhero #middle_card .cardinner{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card .cardinner #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card .cardinner #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:right;width:233px;height:188px;background:url(jiang/jhuatuo_1200.jpg) no-repeat;}#myhero #right #hero_border{width:266px;height:220px;background:url(image/vp1qu.png) no-repeat;background-size:100% 100%;margin-top:-20px;margin-left:-20px;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div class="cardouter card1"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card2"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card3"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card4"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div></div><div id="right"><div id="hero_border"></div></div></div></div></body>
</html>

代码中加入了中间卡牌区的宽度，在css代码中加入了id为“middlecard”的div层width宽度属性为740px，然后把id为right的div定义width宽度188px，高度为188px，背景图片华佗的第8个玩家主角的图片，同时将浮动改为了右浮动，这样华佗的第8位玩家主角就在右边显示了出现，接下来html中在id为 right的div中加入一个id为heroborder的div，背景图像是第8个玩家主角的图片，因为边框比较小，需要定义div的宽度为266px，高度为220px，同时需要定义background-size将背景图片进行拉伸，拉伸效果为x轴100%，拉伸效果为y轴的100%。再把边框的margin-top调整到第8位玩家主角头像的上面，margin-left调整到第8位玩家主角头像的左边。代码在浏览器中显示的效果如下图所示。

第8位玩家主角的位置摆放好以后，可以将角色和血值放置在人物头像框内的右边，仍然可以采用外框是相对定位，人物身份是绝对定位，血量值是绝对定位，定位后通过top和right值可以调整具体的位置。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;position:relative;width:740px;}#myhero #middle_card .cardouter{width:140px;height:188px;position:absolute}.card1{left:0px;top:0px;}.card2{left:80px;top:0px;}.card3{left:160px;top:0px;}.card4{left:240px;top:0px;}#myhero #middle_card .cardinner{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card .cardinner #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card .cardinner #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:right;width:233px;height:188px;background:url(jiang/jhuatuo_1200.jpg) no-repeat;}#myhero #right #hero_border{width:266px;height:220px;background:url(image/vp1qu.png) no-repeat;background-size:100% 100%;margin-top:-20px;margin-left:-20px;position:relative;}#myhero #right #hero_border #hero_identity{position:absolute;right:35px;top:40px;}#myhero #right #hero_border #hero_blood{position:absolute;right:40px;     top:90px;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div class="cardouter card1"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card2"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card3"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card4"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div></div><div id="right"><div id="hero_border"><div id="hero_identity"><img src="data:image/vzhu.png"/></div><div id="hero_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></div></div></div></div></body>
</html>

代码在html中加入了一个id为heroidentity的第8位玩家主角的身份标志div，这个div定义其定位为position:absolute绝对定位，调整top和right值分别是40px和35px共同作用其位置，其外层id为heroborder的div其position:relative定义成相对定位。紧接着在html中再加入id为heroblood的血量值div，其中有3个竖向div排列的心型血值。id为heroblood的div其css样式定义为position:absolute绝对定位，利用top和right值分别为90px和40px确定其位置。代码在浏览器中显示的效果如下图所示。

接下来就是技能名称的定位，也可以使用外框相对定位，两个技能框进行绝对定位。代码如下。

<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;}#space{width:100%;height:95px;background:black;clear:both;}#myhero{width:100%;height:190px;}#myhero #left{width:235px;height:190px;background:red;float:left;}#myhero #middle_card{float:left;position:relative;width:740px;}#myhero #middle_card .cardouter{width:140px;height:188px;position:absolute}.card1{left:0px;top:0px;}.card2{left:80px;top:0px;}.card3{left:160px;top:0px;}.card4{left:240px;top:0px;}#myhero #middle_card .cardinner{width:140px;height:188px;background:url(card/ktao.png) no-repeat;background-size:100% 100%;position:relative}#myhero #middle_card .cardinner #card_type{position:absolute;left:8px;top:10px;}#myhero #middle_card .cardinner #card_num{width:12px;     height:12px;font-size:20px;position:absolute;left:12px;top:30px;}#myhero #right{float:right;width:233px;height:188px;background:url(jiang/jhuatuo_1200.jpg) no-repeat;}#myhero #right #hero_border{width:266px;height:220px;background:url(image/vp1qu.png) no-repeat;background-size:100% 100%;margin-top:-20px;margin-left:-20px;position:relative;}#myhero #right #hero_border #hero_identity{position:absolute;right:35px;top:40px;}#myhero #right #hero_border #hero_blood{position:absolute;right:40px;     top:90px;}#myhero #right #hero_border .skill{position:absolute;width:58px;height:90px;font-size:30px;color:red;background:url(image/vjineng.png) no-repeat;background-size:100%  100%;text-align:center;font-weight:bold;}#myhero #right #hero_border .one{bottom:20px;left:30px;}#myhero #right #hero_border .two{bottom:20px;left:100px;}</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 id="space"></div><div id="myhero"><div id="left"></div><div id="middle_card"><div class="cardouter card1"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card2"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card3"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div><div class="cardouter card4"><div class="cardinner"><div id="card_type"><img src="data:image/vhongtao.png"/></div><div id="card_num">2</div></div></div></div><div id="right"><div id="hero_border"><div id="hero_identity"><img src="data:image/vzhu.png"/></div><div id="hero_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><div class="skill one">急救</div><div class="skill two">倾囊</div></div></div></div></div></body>
</html>

代码在html中加入两个div，分别代表两个技能框，由于两个技能框位置不同，样式都是相同的，所以采用class选择器，class选择器的特点是可以复用的，这样，bottom和left的位置不同可以采用另外一个class选择器，一些边框共同的样式可以采用一个class选择器。技能框相同的样式使用命名为skill的类选择器，定义其width宽度为58px，height高度为90px，背景图片是技能框，由于技能框很小，不能容纳分行的字体，就设置background-size其内容为x轴的100%和y轴的100%。font-size字体大小为30px，颜色为红色，font-weight设置字体为粗体bold，text-align设置文本的对齐方式为居中center，最重要的是position:absolute绝对定位。再定义个别样式的命名one的class选择器和命名为two的class选择器，这两个比较个别的样式只要定义bottom值和left值的位置即可。代码在浏览器中的效果如下图所示。

代码的github地址：https://github.com/wawacode/sanguosha_layout
B站视频教程地址：三国杀界面布局2-DIV+CSS实现三国杀玩家英雄布局(https://www.bilibili.com/video/BV1Qf4y1a73M/)