現在是深夜2：25分。正在值班當中。
晚上做了另外一個綜合示例封恰。
過程當中還是有很多內容發(fā)現自己忘了，然后又查查查褐啡。好在大概的樣子算是完成了诺舔。
下面是原圖：
原圖.png
然后是我做的：
我做的.png
發(fā)現的問題：
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>戰(zhàn)士</li>
</ul>
<ul class="ziliao">
<li>輔助</li>
<li>新手</li>
<li>近戰(zhàn)</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>
