div+css布局模式一_html/css_WEB-ITnose-html教學-PHP中文網

div+css布局模式一_html/css_WEB-ITnose

WBOY

發布： 2016-06-24 12:27:32

原創

1023 人瀏覽過

写在前面的话：
由于个人兴趣爱好，学习Web编程一些知识，自己做一些笔记来记录学习的过程。如果大家哪里不懂或者是有错误的地方，欢迎指正。同时乐意同大家相互交流编程的一些经验。

笔记正式开始：
在很早的网页编程中，人们编程用到的网页布局一般是table式的布局。但是由于table布局的一些缺点，慢慢的table这种布局被DIV+CSS的布局方式所代替。但是table并未被废除，而是融合到了DIV+CSS的布局方式中去，因为table在显示数据的时候很方便。

DIV+CSS是网站标准或者成为WEB标准。简单的说就是：DIV是用来存放内容（文字、图片等元素）的容器。CSS是用来指定放在容易中的内容的样式的层叠样式单，控制这些内容的位置和外观。下面用一个图说明：

这种布局相对于table的优点是：
HTML文件中的代码大量的减少，并且变得十分的简洁，易于读懂；
内容和样式分离，样式更加容易调整；
符合搜索引擎的喜好，（这也是页面优化师SEO这个职业存在的原因）；
对于一些大型的网站，这样的布局更加的节约传送时的带宽。

下面来一个快速的体验案例：
首先是HTML的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 第一个网站 </title>  <!--从当前路径下引入层叠样式单-->  <link href="my.css" type="text/css" rel="stylesheet" /> </head> <body> <!--这里的class代表的是类选择器-->  <div class="style1">  <table>  <tr><td>1</td><td>2</td><td>3</td></tr>  <tr><td>1</td><td>2</td><td>3</td></tr>  <tr><td>1</td><td>2</td><td>3</td></tr>  </table>  </div> </body></html>

登入後複製

然后是CSS的代码：

/*CSS只有这一种注释的方式，其他的无效*//*类选择器*/.style1{width:300px;height:200px;/*三个属性中间隔开一个空格，不能用逗号隔开*/border:1px solid red;/*注意这四个参数的顺序，后面讲*/margin:0px 0px 0px 200px;}/*父子选择器*/.style1 table{width:298px;height:150px;border:1px solid black;}.style1 table td{border:1px solid black;/*使这个标签中的文字居中*/text-align:center;}

登入後複製

好了，DIV+CSS的第一讲就到这里，先入门式的了解一下！后面继续学习。　　