首页头部提示布局

最终效果（两边留白看不到）：

 

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;}

 

..