首页 > web前端 > html教程 > div+css布局模式一_html/css_WEB-ITnose

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

WBOY
发布: 2016-06-24 12:27:32
原创
1061 人浏览过

写在前面的话:
由于个人兴趣爱好,学习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的第一讲就到这里,先入门式的了解一下!后面继续学习。  

  

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板