這個代碼大神分分鐘寫完
。先來看效果圖：
下面是代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aa</title>
<style type="text/css">
*{padding:0;margin:0;}
ul,li{list-style:none;}
.wrap {
width:460px;
margin:0 auto;
}
.list-bg {
width:100%;
height:24px;
background:url(images/a.png) no-repeat;
}
.list li{float:left;width:33%;text-align: center;margin-top: 10px;}
.list li.first{
text-align:left;
}
.list li.last{
text-align:right;
}
</style>
</head>
<body>
<div class="wrap">
<div class="list-bg"></div>
<ul class="list">
<li class="first">基本信息</li>
<li>基本信息</li>
<li class="last">基本信息</li>
</ul>
</div>
</body>
</html>
再來看代碼：（其實和上面是一樣的，但是由於我的代碼裏面還有其他上下文環境，css略有不同）
<div class="wrap">
<div class="list-bg1 tp_create_procedure"></div>
<ul class="list">
<li class="first">基本信息</li>
<li>教學設計</li>
<li class="last">教學環節</li>
</ul>
</div>ul,li{list-style:none;}
.wrap {
width:460px;
margin:0 auto;
}
.list-bg1 {
width:100%;
height:24px;
background:url(../images/tp_create_first.png) center top no-repeat;
}
.list-bg2 {
width:100%;
height:24px;
background:url(../images/tp_create_second.png) center top no-repeat;
}
.list-bg3 {
width:100%;
height:24px;
background:url(../images/tp_create_third.png) center top no-repeat;
}
.list li{
float:left;
width:33%;
text-align: center;
margin-top:10px;
}
.list li.first{
text-align:left;
}
.list li.last{
text-align:right;
}先來看這個問題：
之所以稱之爲大神，一是對我而言，二是確實是看了之後分分鐘。。
佈局這個東西，android也是，一個塊要包含在一起，個人覺得不要因爲不影響效果就省事不寫必要的層，會很亂，個人覺得也不夠健壯。回到主題上，既然文字和圖片應該是一個整體出現，那就應該有一個大的div，然後這兩部分再分別包div，但是我沒有想清楚在最外層div中 設置圖片和文字兩個部分的共同屬性值，再者就是沒有上面代碼裏清晰的思路。。
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
background:url(../images/tp_create_third.png) center top no-repeat;除了no-repeat之外還可以取這些值：
center和top分別表示水平和豎直方向。具體再去查吧。。