您现在的位置:主页 > 常见问题 > 武汉做网站相关问题 > 正文

欣零点网络跟大家分享DIV+CSS的学习心得

时间:2015-03-04 21:43 来源:未知 点击:
最近学习了一下DIV+CSS,领悟了它的优势和强大。今天我们就借用武汉做网站平台跟大家分享一下学习的心得和一些小技巧。希望能对大家有所帮助。闲话少说,书归正传。先跟大家说说它的有优势再说一些小技巧。

DIV+CSS的优势何在?

表现和内容相分离 
        将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。符合W3C标准,微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

提高搜索引擎对网页的索引效率
         用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价。

代码简洁,提高页面浏览速度
        对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,代码更加简洁,前者一般只有后者的1/2大小。对于一个大型网站来说,可以节省大量带宽。并且支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。

易于维护和改版
        样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。
 

DIV+CSS布局小技巧

      div+css布局样式间有一种继承关系,就类似于面向对象程序设计一样。首先,我们先了解一下各层级关系。即是 星(*)、ID、class。这三个层级的顺序是星(*)最高,class最低。因此,我们在星(*)定义整体通用样式。比如整体页面对齐等。
比如:*{ margin:0 auto; padding:0px 0px;} 表示整体页面外部补白上下顶对齐、左右居中,内部补白上下左右都为0。 因为星(*)权重级别最高,在这样不能定义网站页面的字体颜色,字体大小。如果在这里设置了相关属性,你会发现下面的不管你怎么定义相关样式都不起作用。ID的权级比class的权级高,一般这样使用先使用class定义通用属性,然后ID补充定义特殊属性。
如果您想让一个块级元素放在同一行上显示,就要使用float属性,让两个快级元素浮动起来。等这两个快级元素定义结束时,记得要使用clear:both;清除浮动。这一点很关键。对于刚学习者非常忘记遗忘。可能要检测个老半天也不知道问题出在哪里。
比如:
<style type="text/css">
   .main{width:800px;}
   .mainL{width:200px; float:left;}
   .mainR{width:600px; float:right;}
</style>

<div class="main">
   <div class="mainL" style="float:left;"></div>
   <div class="mainR"></div>
   <div style="clear:both;"></div>
</div>

以上信息是欣零点,整理提供,我们的优势是做网站,武汉网站建设公司欢迎您的光临。


copyright@欣零点网络科技有限公司 All rights reserved 360网站安全检测平台 地址:武汉市东湖高新区鲁磨路联峰大厦14层 电话:13476019269(刘先生)027-66000068 技术支持:欣零点