作家
登录

一列固定宽度布局和背景图片绝对定位的实现代码

作者: 来源:www.28hudong.com 2012-11-19 22:45:29 阅读 我要评论

一列固定宽度网页用于我的学习笔记,很不错吧。这张网页,我只是尝试了一下背景图片的绝对定位设置。 1.HTML部分只需在<body ></body >之间编写一个DIV标签,给DIV标签使用layout作为ID名称即可:<div id="layout">这里写入文章内容</div>; 2.接下来先为body编写CSS代码:(方法还是和“我的第一张css+div布局网页”一样,用鼠标编代码,呵呵!) body { margin: 0px; padding: 0px; background-attachment: fixed; background-image: url(images/tupian/a017.JPG); background-repeat: no-repeat; background-position: left bottom; } 再为layout编写CSS代码,确定宽高度外,我进行了绝对定位,设定了上下左右边框距离,为缩小右上角的背景图片,进行了负数设置。 #layout { height: 480px; width: 720px; margin-top: 20px; margin-right: 30px; margin-bottom: 20px; margin-left: 150px; padding: 40px; background-image: url(images/tupian/a017-2.jpg); background-position: right -100px; background-repeat: no-repeat; border: thick double #F79A94; font-family: "宋体"; font-size: 9pt; color: #993300; line-height: 150%; } 如果需要一列固定宽度居中设置,只需把上面四个margin值改为:"margin: 0px auto;"即可。

  推荐阅读

  CSS教程:创建性感的CSS样式表

原文名称:Creating Sexy Stylesheets原文地址:http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets 作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和>>>详细阅读


本文标题:一列固定宽度布局和背景图片绝对定位的实现代码

地址:http://www.17bianji.com/kaifa2/CSS/17137.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)