最终效果(两边留白看不到):
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;}
..
相关推荐
3、头部个人菜单展开下拉菜单时,消息提示框同时显示的优化; 4、在门户、论坛顶部的时候,增加了微信关注等功能,当滚动到内容部分是在变回默认头部效果; 5、头部配色修改IE6支持透明效果; 6、将 谈婚论嫁...
30.首页布局调整,使之能显示最新产品 31.编辑器里面的图片库,文件库可以从我们附件表里面选择 32.对于禁用的会员,希望后台可以增加解除禁用功能 33.公司简介区块更多链接放在标题右侧 34.文章列表显示的条目数可...
顶级分类页调用该分类下精品商品排行,左右切换滚动特效,头部购物车鼠标移入显示购物车商品,首页分类下方调用各分类商品,并且商品有立即购买功能,列表页左侧商品分类默认商品展开状态,点击哪个分类进入此页面,...
---discuz(默认布局).php 这个文件也是论坛首页的,(和第二版一样,只有纯粹的版块布局和官方默认的多格) 这里多说一句,如果不喜欢默认的论坛首页,喜欢版块结构的这个,那么将名称改成 discuz.php 更新缓存...
#YX_AY_Head#头部信息 Ø #YX_AY_Banner#导航信息 Ø #YX_AY_guanggao#广告信息(也可以将广告放入每个页面中) 注:以上标签在《定义标签管理》内可以找到并修改 b) 动态标签(新增加动态标签,只能运用...
修改提示: ※ 首页默认搜索引擎在js/config.js修改; ※ 搜索引擎右侧热门关键字在js/rthot.js修改; ※ 头部右侧广告在js/right.js文件,请自行修改; ※ 统计代码修改在js/tj.js修改; ※ 留言板登陆http://你的...
3、更新 最新连接资讯和友情连接知识库连接,重新布局,首页更美观; 4、重点:添加站长工具,添加PR真假查询\ALEXA流量查询\百度指数查询\网站反链查询\历史记录查询\网站备案查询\域名历史查询\域名Whois查询\同IP...
30.首页布局调整,使之能显示最新产品 31.编辑器里面的图片库,文件库可以从我们附件表里面选择 32.对于禁用的会员,希望后台可以增加解除禁用功能 33.公司简介区块更多链接放在标题右侧 34.文章列表显示的条目数可...
首页明星榜设置:首先进入快捷方式——管理首页,在这个表单中选择上传头像复选框,如果需要设置是区分性别的,可以在这个表单中选定。然后点击[给我搜]按钮进入用户列表。然后在搜索结果列表中操作选定要设置的...
3、统一全站头部和尾部 4、修正展会列表不能分页的BUG 5、一键更新用户网站 6、增加会员等级图片然。 7、增强邮件群发功能 8、增加动态调用功能 9、增加订单功能及其他 10:加强会员权限内容管理(收费方向) 12、添加...
实例197 页面布局(2列固定宽度+头部+导航+尾部) 242 实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例...
实例197 页面布局(2列固定宽度+头部+导航+尾部) 242 实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例...