1 / 13
文档名称:

DIV CSS网页布局技巧实例.doc

格式:doc   页数:13页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

DIV CSS网页布局技巧实例.doc

上传人:xxj16588 2016/5/31 文件大小:0 KB

下载得到文件列表

DIV CSS网页布局技巧实例.doc

相关文档

文档介绍

文档介绍:DIV+CSS 网页布局技巧实例 DIV+CSS 网页布局技巧实例 1 :设置网页整体居中的代码以前用表格布局时设置网页居中非常方便, 把表格对齐方式设置为居中就行了, 就这么简单, 现在呢,用 DIV+CSS 样式表控制, 好像不是那么容易了,其实也很简单,只不过方式不同而已。<style> #layout { width:778px; margin:0 auto; text-align:center;} </style> <div id="layout"> 标准之路</div> 请看这段代码,宽度为适合 800 × 600 分辨率浏览器的宽度, margin:0 auto; 这句代码就是让居中了,意思是外边距上下设置为 0 ,左右设为自动。这样它就居中了。那么可能你要问了, text-align:center; 为什么还要让内容居中呢?呵呵,别着急,这句是为了适应 IE6 以下版本的浏览器而加的, IE6 以下对 margin:0 auto; 不能解析为居中, 所以用这种方式来补救, 以下在设计内容时再用 text-align:left; 就可以了。注: margin 和 padding 的值的顺序为顺时针上右下左, 如 margin:1px 2px 3px 4px; 还可以缩写为上下、左右,如本例,如果为 margin:0px; 则是各边都为 0 提示:可以先修改部分代码后再运行 DIV+CSS 网页布局技巧实例 2 :设置容器中的内容垂直居中如实例 1 设置网页整体居中的代码中内容是居容器的顶部的, 而在表格布局时默认是垂直居中的,当我们需要垂直居中的时候该怎么办呢?别害怕, 跟我来, 也是比较简单的, 只用设置容器内的行高就行了。 line-height:500px; 提示:可以先修改部分代码后再运行这是一种方法, 另外和种方法就是设置的它内边距 padding 了, 自己可以试试哟~~ DIV+CSS 网页布局技巧实例 3 :设置层的透明度有时候我们需要用到层的透明度,把下边的背景透出来,如下图: 这种半透明的形式在 blog 上应用比较广泛,那么这种效果是怎么做出来的呢?用 JS, NO,NO , 既然我们是 CSS 布局教程, 那么就尽量用 CSS 来解决问题! filter: alpha(opacity=70); opacity: ; 把这两句代码加入到要实现半透明层的 CSS 样式表里即可, 简单吧!! 注: 70和 的值可改为你需要的提示:可以先修改部分代码后再运行 DIV+CSS 网页布局技巧实例 4 :使用 css 缩写使用缩写可以帮助减少你 CSS 文件的大小, 更加容易阅读。 css 缩写的主要规则请参看《常用 css 缩写语法总结》, css 缩写的主要规则如下: 颜色 16 进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000 可以缩写为#000;#336699 可以缩写为#369; 注意: 在同一个 CSS 配置节中, 不要交错使用全写和缩写的颜色配置, 在系统资源极低时,会导致浏览器渲染失败。盒尺寸通常有下面四种书写方法: ? property:value1; 表示所有边都是一个值 value1 ; ? property:value1 value2; 表示 top 和 bottom 的值是 value1,right 和 left 的值是 value2 ? property:value1 value2 value3; 表示 top 的值是 value1 , righ t 和 left 的值是 value2 , bottom 的值是 value3 ? property:value1 value2 value3 value4; 四个值依次表示 top,right,bottom,left 方便的记忆方法是顺时针, 上右下左。具体应用在 margin 和 paddin g 的例子如下: margin:1em 0 2em ; 边框(border) 边框的属性如下: ? border-width:1px; ? border-style:solid; ? border-color:#000; 可以缩写为一句: border:1px solid #000; 语法是 border:width style color; 背景(Backgrounds) 背景的属性如下: ? background-color:#f00; ? background-image:url(); ? background-repeat:no-repeat; ? background-attachment:fixed; ? background-position:0 0;

最近更新

2025年统计局财务工作总结及明年计划范文5篇 15页

2025年绝美的古诗词摘抄大全 15页

2025年给自己勇气的励志名句 9页

2025年给男朋友讲的睡前故事 12页

2025年皮带机头除铁器安装施工安全技术措施 11页

2025年给妈妈过母亲节一年级作文 6页

最新教科版三年级上册科学期末测试卷(培优b卷.. 8页

最新人教版六年级下册数学期末测试卷精品【名.. 10页

2025年经理助理简历参考模板2 5页

新部编版小学二年级上册道德与法治期末测试卷.. 7页

2025年经典谚语大全 9页

新部编版六年级下册道德与法治期末测试卷(基础.. 8页

新苏教版二年级下册科学期末测试卷答案免费下.. 5页

2025年经典的励志诗词鉴赏 2页

新人教版六年级下册数学期中测试题精品(历年真.. 6页

新人教版五年级下册数学期末研优卷(真题汇编).. 9页

新人教版二年级下册数学-期末测试卷(word) 8页

新人教版二年级下册-数学期末测试题【典型题】.. 7页

教科版科学四年级下册第二单元《电路》测试卷.. 7页

2025年组织校园活动实施方案 13页

教科版科学四年级下册第1单元-植物的生长变化.. 5页

2025年纪念雷锋节日标语文案(0句) 12页

高分突破教材全解 5页

2024版八年级下册英语模拟试卷 7页

白酒酒庄运营商业计划书 4页

自愿离婚协议书电子版可打印 4页

初中语文中考作文辅导--让你的语言文采飞扬省.. 22页

小学歌唱教学促进学生审美能力问卷调查报告范.. 2页

阴极电泳漆生产工艺技术进展及当前发展趋势 6页

重庆市南岸区政府投资项目管理办法(试行)南岸.. 30页