|
DIV+CSS网页布局技巧实例1：设置网页整体居中的代码
以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，此刻呢，用DIV+CSS样式表掌控，好似不是那样容易了，其实亦很简单，只不外方式区别罢了。
#layout { width:778px; margin:0 auto; text-align:center;} <div id="layout">标准之路http://www.aa25.cn</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: 0.7;
把这两句代码加入到要实现半透明层的CSS样式表里就可，简单吧！！ 注：70和0.7的值可改为你必须的
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，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次暗示top,right,bottom,left
方便的记忆办法是顺时针，上右下左。详细应用在margin和padding的例子如下： margin:1em 0 2em 0.5em;
........
| 
发表于 2024-6-30 08:50:24
