首页头部提示布局

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

 

HTML：

 

	

    	

        	
X
            
由于年关将至，2月12日—2月15日期间除顺丰和EMS物流以外，其他物流暂停发货。在此期间购买产品
的用户如果顺丰或EMS物流到不了的偏远地区则延迟到2月26日开始发货。2月16日以后	购买产品的用户全部延迟到2月26日开始发货。带来不便敬请见谅！
			
        
    

 

 

一、外层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：

	

    	

            
X
            
由于年关将至，2月12日—2月15日期间除顺丰和EMS物流以外，其他物流暂停发货。在此期间购买产品
的用户如果顺丰或EMS物流到不了的偏远地区则延迟到2月26日开始发货。2月16日以后	购买产品的用户全部延迟到2月26日开始发货。带来不便敬请见谅！
			
        
    



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

 

..