首頁頭部提示佈局

cbjcry發表於2015-02-12

最終效果（兩邊留白看不到）：



 

HTML：

 

<div class="add_layer" id="ads">
	<div class="layer_con">
    	<ul>
        	<li class="close" onclick="noneAds()">X</li>            <li>由於年關將至，2月12日—2月15日期間除順豐和EMS物流以外，其他物流暫停發貨。在此期間購買產品<br/>的使用者如果順豐或EMS物流到不了的偏遠地區則延遲到2月26日開始發貨。2月16日以後	購買產品的使用者全部延遲到2月26日開始發貨。帶來不便敬請見諒！
			</li>
        </ul>
    </div>
</div>
 

 

一、外層DIV

中間黑色部分：

 

.add_layer { 
	max-width:1600px; 
	width:100%; 
	top:0; 
	height:150px; 
	overflow:hidden; 
	margin:0 auto; 
	clear:both;
	background:url(../image/if/bg.jpg) top repeat-y;
	
	}

 分析：

1、寬度100%，本來應該從左到右，但設定了max-width:1600,所以現在DIV只有1600寬

2、又設定了margin:0 auto，所以該DIV會水平居中

3、背景bg.jpg，為一長條圖片，寬度為1600，縱向平鋪，所以該DIV背景即為bg.jpg鋪滿

 

二、內層DIV

圖中黑色部分



 

.layer_con { width:820px; margin:0 auto;}
//設定中間的文字DIV，居中

 

三、UL

.layer_con ul { list-style:none; padding:0; margin:0;}
.layer_con li { 	
	font-size:16px; 
	font-family:Arial, "微軟雅黑"; 
	color:#000; 
	line-height:30px; 
	padding-top:5px;
	padding-bottom:5px;
	padding-right:85px;
	text-shadow:1px 1px 1px #ddd;
	}
.layer_con li.close { text-align:right; padding:0; padding-right:45px; font-size:20px; margin-top:5px;font-family:Arial; cursor:pointer;}

 

全部CSS：

<div class="add_layer" id="ads">
	<div class="layer_con">
    	<ul>
            <li class="close" onclick="noneAds()">X</li>
            <li>由於年關將至，2月12日—2月15日期間除順豐和EMS物流以外，其他物流暫停發貨。在此期間購買產品<br/>的使用者如果順豐或EMS物流到不了的偏遠地區則延遲到2月26日開始發貨。2月16日以後	購買產品的使用者全部延遲到2月26日開始發貨。帶來不便敬請見諒！
			</li>
        </ul>
    </div>
</div>


.add_layer { 
	max-width:1600px; 
	width:100%; 
	top:0; 
	height:150px; 
	overflow:hidden; 
	margin:0 auto; 
	clear:both;
	background:url(../image/if/bg.jpg) top repeat-y;
	
	}

.layer_con ul { list-style:none; padding:0; margin:0;}
.layer_con li { 	
	font-size:16px; 
	font-family:Arial, "微軟雅黑"; 
	color:#000; 
	line-height:30px; 
	padding-top:5px;
	padding-bottom:5px;
	padding-right:85px;
	text-shadow:1px 1px 1px #ddd;
	}
.layer_con li.close { text-align:right; padding:0; padding-right:45px; font-size:20px; margin-top:5px;font-family:Arial; cursor:pointer;}

 

..

 

相關文章