15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页的 Table 布局和 DIV+CSS 布局从哪里可以看出来?Table 布局已经过时了吗?

网页的 Table 布局和 DIV+CSS 布局从哪里可以看出来?Table 布局已经过时了吗?

时间:2024-02-15 14:15:01 | 来源:网站运营

时间:2024-02-15 14:15:01 来源:网站运营

网页的 Table 布局和 DIV+CSS 布局从哪里可以看出来?Table 布局已经过时了吗?:DIV+CSS网页布局技巧实例1:设置网页整体居中的代码

以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。

<style>
#layout { width:778px; margin:0 auto; text-align:center;}
</style>
<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;

........

关键词:布局,经过

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭