发布时间：2025-12-10 19:36:10 浏览次数：7
三国杀专用页面_页面布局有哪几种方法Web前端布局实战：三国杀页面布局（上）互联网进入web2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。这里首先介绍的是布局的实战，html5+css3技术来实现前端的页面，持续关注，后续会不定时进行前端技术的分享。一
互联网进入web 2.0时代，由单一的文字和图片组成的静态网页已经不能满足用户的需求，用户需要更好的体验。在web 2.0时代，网页有静态网页和动态网页。所谓动态网页，就是用户不仅仅可以浏览网页，还可以与服务器进行交互。
网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
这里首先介绍的是布局的实战，html5+css3技术来实现前端的页面，持续关注，后续会不定时进行前端技术的分享。
本次布局实战的是三国杀界面，最终完成的效果如下所示。
从界面上看，其实有8位英雄，如果单从布局的结果上来看，可以把每个英雄做为图片排列起来，再把血条排列起来，再把数字排列起来，但这样做其实不是一种面向对象的开发思维，布局的最终目的是后期可以用js或框架对页面中的元素进行操作，如果在打三国杀牌的时候，出一张“杀”，然后指明目标英雄后，目标英雄如果没有一张“闪”，那么就会掉血，也就是英雄对应的桃心血量会减去一个，使用面向对象的思维，就会调用公式：英雄.血量-1,如果把血量的排列放在一层，就不容易控制到底是哪个英雄的血量。所以最好的方法就是把每个英雄的相关布局设置好，然后横向排列，这样使用面向对象的开发思维，每个英雄就可以看作是一个对象了，后续对英雄的编码行为也就很容易控制玩家英雄的出牌、掉血和阵亡了。
首先看单个玩家英雄的布局。如下图所示。
首先定义一个外层的p，可以设置背景是英雄人物张飞，张飞的图片如下。
把p起一个id的名字，在css样式中定义p的width宽度是张飞图片的宽度，height为张飞图片的高度，背景图片为张飞的图片，并且设置不重复。具体代码如下。
<html> <head> <title>三国杀单个武将界面</title> <style> #outer{ width:233px; height:250px; background:url(jiang/jzhangfei_1200.jpg) no-repeat; } </style> </head> <body> <p > </p> </body></html>是否还在为Ide开发工具频繁失效而烦恼，来吧关注以下公众号获取最新激活方式。亲测可用！
【正版授权，激活自己账号】：Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】：官方授权 正版激活 自己使用，支持Jetbrains家族下所有IDE…
代码最终效果在界面上出现张飞的人物，如下图所示。
根据最终效果图参考，在张飞的p里再嵌套一个p，这个p的图像是三国杀玩家外框的设置，三国杀玩家外框图如下所示。
这个图片有透明效果处理，给这个图片的p设置width宽度，设置height高度和背景图片，不重复，就能用这个图片盖住背景为张飞图片，也就是三国杀玩家外框罩住了张飞的图片，代码如下。
<html> <head> <title>三国杀界面</title> <style> #outer{ width:233px; height:250px; background:url(jiang/jzhangfei_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; } </style> </head> <body> <p > <p > </p> </p> </body></html>代码中有一个id为”outer”的p包着一个id为”inner”的p，id为”outer”的p设置背景为张飞，id为”inner”的p设置背景为三国杀玩家外框。background中的参数no-repeat表示不重复。两个p都要设置width和height，即宽和高，宽和高的值可以根据图片的宽和高的值来确定。代码最终显示结果如下图所示。
从图片的结果上看，张飞的人物上面有一个三国杀人物外框。
下面根据最终效果图添加右侧上方的人物身份图，四个血量值，及右侧下面显示的牌的数目4，这三个元素都可以分别使用p来包起来，这样三个元素就能够控制一行，p元素就实现了对一行的统治。
设置一个p元素，里面只有一个身份的图像，这个图像可以做背景，也可以直接作为图像来处理。如果作为图像处理，包着这个图像的p就会自动被拉伸开来。然后在css中需要调整这个图片的距离，它是排列在右侧的，如果用margin-left这个来定位，这个参数值太大，在不同的浏览器中适配也会成为问题。如果把最外层的id为”inner”的p加上一个position属性,它的值是relative,进行相对位置处理，里面的人物身份图像作absolute设置，绝对定位处理，这样人物身份图像不管如何定位，都不会脱离relative相对定位元素的限制。只要将绝对定位的人物身份定义其right右侧的距离值和top距上侧的距离值即可。代码如下。
<html> <head> <title>三国杀界面</title> <style> #outer{ width:233px; height:250px; background:url(jiang/jzhangfei_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } </style> </head> <body> <p > <p > <p > <img src="image/vfan.png"/> </p> </p> </p> </body></html>从代码中看，id为identify的身份标识p嵌套到id为inner的p中，identify身份标识p中有一个img标签，img图像标签的图片路径用src来进行标识，src中的值就是img图片的具体路径。在css设置中，把id为inner的p设置position的属性值为relative，即相对定位，把id为identify的p设置position的属性值为absolute，即绝对定位，然后就可以定义identify的p的right值和top值，调整人物身份的具体显示位置。代码显示的结果如下图所示。
从上图的结果上看，“反贼”的身份标识就显示在三国杀人物外框的右边。
接下来，再进行四个心型血值的显示，用一个p包裹心型血值的图像，这四个心型血值的img标签也可用p分别进行包裹，这样4个心型血值图片就可以竖向排列起来了。然后也是把包裹4颗心型血值的最外层p 定义position属性值为absolute，即绝对定位，定位其right值和top值，来实现位置上的调整，代码如下。
<html> <head> <title>三国杀界面</title> <style> #outer{ width:233px; height:250px; background:url(jiang/jzhangfei_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } </style> </head> <body> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> </p> </p> </body></html>代码中，有id为blood的p，其中包含有四个p，每个p中有一个标签img，img的src属性指向的是心型血量的图片，用p包裹的原因是需要进行竖向排列处理，接下来在css中调置这个id为blood的p样式，其样式中，调整position的定位为绝对定位，设置绝对定位的right右侧的值及top上侧的值，两个值的交叉点确定血量值的位置。代码显示的结果如下图所示。
从界面显示的结果上来看，“反贼”的身份标识下面有四个心型血量值图案也显示在三国杀人物外框的右边。
下面处理右下角显示的4，即英雄玩家手拿的卡牌数。
这里还是用一个p包裹起来一个数字4，然后对这个p设置position的属性值是absolute， 同时设置bottom距下面的距离值和right右侧的距离值，还要注意设置数字4的字体，字号，横向居中和竖向居中，中间对齐的css可以使用text-align：center这样的css语句来设置，竖向居中可以使用line-height结合height高度来设置，line-height的值与height的高度值一致，就可以达到竖向居中的效果。代码如下。
<html> <head> <title>三国杀界面</title> <style> #outer{ width:233px; height:250px; background:url(jiang/jzhangfei_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } #num{ position:absolute; right:16px; bottom:6px; font-size:25px; color:white; } </style> </head> <body> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> </body></html>从代码上看，在id为inner的p中又添加了一个id为num的p，包裹起来一个数字4，然后定义css样式position的定位方式，absolute绝对定位，font-size字体设置，color进行字体颜色设置，bottom底部位置设置，right右侧边距位置设置。显示的效果如下图所示。
从图中的效果上看，这样第一个英雄的设置就设置成功了。
在三国杀身份8人局中，群殴界面中有7个是占据三国杀界面2/3的范围，这些英雄玩家p是一个接着一个排列起来的，可以理解成p块状元素进行浮动设置，经过浮动设置的p就会一个挨着一个排列起来。在排列之前首先设置三国杀界面的大背景，如下图所示。
根据背景的大小是1200*800，可以全界面网页文件body元素中设置一个大的p，大小为width设置成1200，height高设置为800，这样一个大的三国杀群殴背景就设置成功了。代码如下。
<html> <head> <title>三国杀界面</title> <style> #bg{ width:1200px; height:800px; background:url(image/bgfight01.jpg) no-repeat; } </style> </head> <body> <p > </p> </body></html>代码中直接定义一个id为bg的p，然后定义其css样式为width宽度，height高度，以及background背景图片的内容。代码显示的效果如下图所示。
把之前设置的一个武将拷贝过来，把最外层的p设置成左浮动，即将原id为outer的p在css样式中添加一条float:left语句即可。代码如下。
<html> <head> <title>三国杀界面</title> <style> #bg{ width:1200px; height:800px; background:url(image/bgfight01.jpg) no-repeat; } #outer{ width:233px; height:250px; background:url(jiang/jzhangfei_1200.jpg) no-repeat; float:left; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } #num{ position:absolute; right:16px; bottom:6px; font-size:25px; color:white; } </style> </head> <body> <p > <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> </p> </body></html>从代码上看，css样式代码中id 为outer的p添加了一条float:left，让这个英雄的p块状元素进行左浮动的设置，为了让之后的英雄块状元素都能够设置左浮动，把outer这个id的标志改成class标志，这样做可以把background背景图片css设置语句单独拿出来，利用class选择器可以复用的原则，将两个class选择器共同作用在原来是id为outer的p上面，这样，对于后面的英雄，只需要定义不同的英雄背景图片即可完成三国杀2/3界面中七位英雄玩家的设置。先看将id为outer的p改成背景英雄class和通过配置class共同作用的代码。代码如下。
<html> <head> <title>三国杀界面</title> <style> #bg{ width:1200px; height:800px; background:url(image/bgfight01.jpg) no-repeat; } .outer{ width:233px; height:250px; float:left; } .hero1{ background:url(jiang/jzhangfei_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } #num{ position:absolute; right:16px; bottom:6px; font-size:25px; color:white; } </style> </head> <body> <p > <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> </p> </body></html>代码中把css中原来是#outer改成了.outer，在.outer中把background语句提出了出来，形成新的类选择器hero1，定义hero1的类选择器中的语句是background设置英雄的背景图片，再把html中英雄p原来是id=”outer”，现在改成class=”outer hero1”的形式，变成由类选择器outer和类选择器hero1共同作用的英雄p。这样的代码显示结果如下图所示。
从图中的结果上看，三国杀群殴的8人局中已有了其中一个将张飞，下面复制张飞的html的代码，粘贴到张飞的p下面，代码如下。
<html> <head> <title>三国杀界面</title> <style> #bg{ width:1200px; height:800px; background:url(image/bgfight01.jpg) no-repeat; } .outer{ width:233px; height:250px; float:left; } .hero1{ background:url(jiang/jzhangfei_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } #num{ position:absolute; right:16px; bottom:6px; font-size:25px; color:white; } </style> </head> <body> <p > <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> </p> </body></html>在浏览器中打开这个页面，页面中就有了第二个张飞的界面，如下图所示。
现在把代码中的hero1变成hero2，换成另外一个将的图片，代码如下。
<html> <head> <title>三国杀界面</title> <style> #bg{ width:1200px; height:800px; background:url(image/bgfight01.jpg) no-repeat; } .outer{ width:233px; height:250px; float:left; } .hero1{ background:url(jiang/jzhangfei_1200.jpg) no-repeat; } .hero2{ background:url(jiang/jcaocao_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } #num{ position:absolute; right:16px; bottom:6px; font-size:25px; color:white; } </style> </head> <body> <p > <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> </p> </body></html>代码中在css中又定义了一个类选择器hero2,用background语句，把其中的背景图设置为曹操的图片，然后把第二个class=”outer” 的英雄标签中添加上hero2的类选择器名称，显示的网页结果如下图所示。
把这样的英雄p一直复制下去，再去修改class的名称，不断产生英雄，这样第一行的五位英雄就会依次产生，代码如下。
<html> <head> <title>三国杀界面</title> <style> #bg{ width:1200px; height:800px; background:url(image/bgfight01.jpg) no-repeat; } .outer{ width:233px; height:250px; float:left; } .hero1{ background:url(jiang/jzhangfei_1200.jpg) no-repeat; } .hero2{ background:url(jiang/jcaocao_1200.jpg) no-repeat; } .hero3{ background:url(jiang/jguanyu_1200.jpg) no-repeat; } .hero4{ background:url(jiang/jzhenji_1200.jpg) no-repeat; } .hero5{ background:url(jiang/jzhaoyun_1200.jpg) no-repeat; } #inner{ width:229px; height:248px; background:url(image/vaiqu.png) no-repeat; position:relative; } #identify{ position:absolute; right:5px; top:10px; } #blood{ position:absolute; right:13px; top:70px; } #num{ position:absolute; right:16px; bottom:6px; font-size:25px; color:white; } </style> </head> <body> <p > <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> <p > <p > <p > <img src="image/vfan.png"/> </p> <p > <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> <p> <img src="image/vhongtao.png"/> </p> </p> <p > 4 </p> </p> </p> </p> </body></html>代码中css中新定义了hero3，hero4，hero5三个类选择器，分别修改背景为不同的英雄名字，关羽，甄姬和赵云，然后在英雄的p中分别在class=“outer”中加入另外一个类选择器hero3，hero4和hero5。显示的网页结果如下图所示。
接下来排列第二行的英雄元素，第二行的英雄元素也可以直接复制原张飞的p元素，只不过需要把中间的三个英雄p元素中的内容删除掉就可以，也不需要设置hero的class类选择器，相当于中间有3个占位p而已，但这3个占位p中是没有内容的，只是一个空p而已。代码如下。
<html><head><title>三国杀界面</title><style>#bg{width:1200px;height:800px;background:url(image/bgfight01.jpg) no-repeat;}.outer{width:233px;height:250px;float:left;}.hero1{background:url(jiang/jzhangfei_1200.jpg) no-repeat;}.hero2{background:url(jiang/jcaocao_1200.jpg) no-repeat;}.hero3{background:url(jiang/jguanyu_1200.jpg) no-repeat;}.hero4{background:url(jiang/jzhenji_1200.jpg) no-repeat;}.hero5{background:url(jiang/jzhaoyun_1200.jpg) no-repeat;}.hero6{background:url(jiang/jsunshangxiang_1200.jpg) no-repeat;}.hero7{background:url(jiang/jxiaoqiao_1200.jpg) no-repeat;}#inner{width:229px;height:248px;background:url(image/vaiqu.png) no-repeat;position:relative;}#identify{position:absolute;right:5px;top:10px;}#blood{position:absolute;right:13px;top:70px;}#num{position:absolute;right:16px;bottom:6px;font-size:25px;color:white;}</style></head><body><p ><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p><p ></p><p ></p><p ></p><p ><p ><p ><img src="image/vfan.png"/></p><p ><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p><p><img src="image/vhongtao.png"/></p></p><p >4</p></p></p></p></body></html>代码中css中定义了新的类选择器hero6和hero7，分别设置了hero6和hero7的background属性，其值是孙尚香的将图片和小乔的将图片，在html代码中，复制的张飞将的p分别在class=”outer”类选择器使用上加入了hero6和hero7的class类选择器的名称，注意，在hero6和hero7类选择器作用的class类之间的p标签，只有class=”outer”的类选择器作用的属性，其中的p中间是没有内容的，只是占位来使用的。显示的结果如下图所示。
从上图的效果上来看，三国杀中参与群殴的七个将已经准备就绪了，排列的很成体系。下面就等着主角的登场了。
代码的github地址：https://github.com/wawacode/sanguosha_layout
B站视频教程地址：三国杀界面布局1-DIV+CSS实现七个英雄排座次（https://www.bilibili.com/video/BV1jK411F7g2/）
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流