div+css布局模式一_html/css_WEB-ITnose
程序员文章站
2024-01-09 16:00:10
...
写在前面的话:
由于个人兴趣爱好,学习Web编程一些知识,自己做一些笔记来记录学习的过程。如果大家哪里不懂或者是有错误的地方,欢迎指正。同时乐意同大家相互交流编程的一些经验。
由于个人兴趣爱好,学习Web编程一些知识,自己做一些笔记来记录学习的过程。如果大家哪里不懂或者是有错误的地方,欢迎指正。同时乐意同大家相互交流编程的一些经验。
笔记正式开始:
在很早的网页编程中,人们编程用到的网页布局一般是table式的布局。但是由于table布局的一些缺点,慢慢的table这种布局被DIV+CSS的布局方式所代替。但是table并未被废除,而是融合到了DIV+CSS的布局方式中去,因为table在显示数据的时候很方便。
DIV+CSS是网站标准或者成为WEB标准。简单的说就是:DIV是用来存放内容(文字、图片等元素)的容器。CSS是用来指定放在容易中的内容的样式的层叠样式单,控制这些内容的位置和外观。下面用一个图说明:
这种布局相对于table的优点是:
HTML文件中的代码大量的减少,并且变得十分的简洁,易于读懂;
内容和样式分离,样式更加容易调整;
符合搜索引擎的喜好,(这也是页面优化师SEO这个职业存在的原因);
对于一些大型的网站,这样的布局更加的节约传送时的带宽。
下面来一个快速的体验案例:
首先是HTML的代码:
第一个网站
1 2 3 1 2 3 1 2 3
然后是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的第一讲就到这里,先入门式的了解一下!后面继续学习。
推荐阅读
-
急求:发现一个匪夷所思的问题,在线等_html/css_WEB-ITnose
-
网页切片+div+css问题_html/css_WEB-ITnose
-
Div+CSS布局入门教程_html/css_WEB-ITnose
-
当你输入一个网址的时候,实际会发生什么?_html/css_WEB-ITnose
-
求解.如何给网页背景设置成一张不重复的图片?_html/css_WEB-ITnose
-
求一个简单的纯CSS3的实现_html/css_WEB-ITnose
-
一起来啃犀牛书:事件处理_html/css_WEB-ITnose
-
如何给一个开发好的网页添加黑白滤镜?_html/css_WEB-ITnose
-
纯DIV+CSS实现圆角!_html/css_WEB-ITnose
-
ASP.NET,请牛人进来解释一下_html/css_WEB-ITnose