现在是深夜2：25分。正在值班当中。
晚上做了另外一个综合示例。
过程当中还是有很多内容发现自己忘了，然后又查查查。好在大概的样子算是完成了。
下面是原图：
原图.png
然后是我做的：
我做的.png
发现的问题：
1 - 图片的大小要预先处理好，这样在做的过程中会少很多麻烦。
2 - 合理恰当的使用选择器，这样可以理清结构，方便修改。
3 - 列表，列表，是按列来的哦，下次可别搞错了。
4 - 选择器应该还能重新写下，简化下。
5 - 不是好的方案，还可以用表格。
6 - 左边使用了无序列表，样式使用了图片。实际应该是表单。
列上代码吧：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>综合练习2</title>
<!-- <link type="text/css" rel="stylesheet" href="综合练习2.css"> -->
<style>
body{
width: 1200px;
height: 850px;
background-color: #333;
color: white;
}
.zuobian {
width: 330px;
height: 850px;
background-color: #11141b;
float: left;
}
.zuobian ul {
float: left;
/* clear: right; */
}
.zuobian li{
list-style-image: url('imgs/000.png');
}
.zuobian p{
clear: both;
}
.wupin{
margin: 0px -14px;
}
.ziliao{
margin: 10px 7.5px;
}
.jiage{
margin: 10px 5px;
}
.hero{
text-align: center;
font-size: 18px;
margin: 30px;
}
.yingxiongjiage{
color:rgb(255,166,0);
border-bottom: 1px dashed grey;
padding: 5px;
}
.youbian {
background-color: #11141b;
width: 860px;
height: 850px;
float: right;
}
.youbian ul{
list-style-type: none;
float: left;
}
.youbian li{
position: relative;
margin: 5px 3px;
}
.youbian li img{
border: 1px solid white;
}
.youbian li span{
width: 70px;
display: block;
margin: auto;
color: rgb(255, 166, 0);
}
</style>
</head>
<body>
<div>
<div class="zuobian">
<p class="hero">英雄资料</p>
<ul class="ziliao">
<li>坦克</li>
<li>法师</li>
<li>刺客</li>
<li>战士</li>
</ul>
<ul class="ziliao">
<li>辅助</li>
<li>新手</li>
<li>近战</li>
<li>潜行</li>
</ul>
<ul class="ziliao">
<li>远程</li>
<li>推进</li>
<li>大野</li>
<li>后期</li>
</ul>
<p class="yingxiongjiage">英雄价格</p>
<ul class="jiage">
<li>6300</li>
<li>1350</li>
</ul>
<ul class="jiage">
<li>4800</li>
<li>450</li>
</ul>
<ul class="jiage">
<li>3150</li>
</ul>
<p class="hero">物品资料</p>
<ul class="wupin">
<li>生命值</li>
<li>攻击速度</li>
<li>护甲穿透</li>
<li>法力回复</li>
<li>法术吸血</li>
<li>移动速度</li>
<li>护甲值</li></ul>
<ul>
<li>暴击</li>
<li>法术穿透</li>
<li>魔法抗性</li>
<li>冷却缩减</li>
<li>生命回复</li>
<li>附魔</li></ul>
<ul>
<li>法术伤害</li>
<li>物理伤害</li>
<li>消耗品</li>
<li>韧性</li>
<li>法力值</li>
<li>生命偷取</li>
</ul>
</div>
<div class="youbian">
<ul>
<li> <span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li></ul>
<ul>
<li> <span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li></ul>
<ul>
<li> <span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li></ul>
<ul>
<li> <span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li></ul>
<ul>
<li> <span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li>
<li><span>牛头酋长阿利斯塔</span></li></ul>
</div>
</div>
</body>
</html>
网友评论