前端布局实战：三国杀页面布局（下）
四、三国杀群殴界面第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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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”;>元素中加入一个<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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vhongtao.png"/>
</div>
<div id="card_num">
2
</div>
</div>
<div id="card">
<div id="card_type">
<img src="image/vhongtao.png"/>
</div>
<div id="card_num">
2
</div>
</div>
<div id="card">
<div id="card_type">
<img src="image/vhongtao.png"/>
</div>
<div id="card_num">
2
</div>
</div>
<div id="card">
<div id="card_type">
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vhongtao.png"/>
</div>
<div id="card_num">
2
</div>
</div>
<div class="card">
<div id="card_type">
<img src="image/vhongtao.png"/>
</div>
<div id="card_num">
2
</div>
</div>
<div class="card">
<div id="card_type">
<img src="image/vhongtao.png"/>
</div>
<div id="card_num">
2
</div>
</div>
<div class="card">
<div id="card_type">
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="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="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="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="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="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="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="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="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="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="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="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="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="image/vzhu.png"/>
</div>
<div id="hero_blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero2">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero3">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero4">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero5">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
</div>
<div id="num">
4
</div>
</div>
</div>
<div class="outer hero6">
<div id="inner">
<div id="identify">
<img src="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="image/vfan.png"/>
</div>
<div id="blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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="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="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="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="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="image/vzhu.png"/>
</div>
<div id="hero_blood">
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="image/vhongtao.png"/>
</div>
<div>
<img src="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/)
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
