首页头部提示布局

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

 

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

 

..