学习啦——学设计>网页设计>网站建设>网站前端技术>

用CSS做网页布局需要什么方式_CSS网页布局有哪些方式

宇民分享

  现如今做网站已经不是单单考虑网站的美观性了,除了要美观大方,还要让搜索引擎抓取网页的内容。下面由学习啦小编为大家整理的网页布局方式,希望大家喜欢

  CSS网页布局方式

  一、代码精简

  采用DIV+CSS布局使代码很精简,这一点相信对此方法熟透的朋友都有所了解的都知道,css文件可以在每一个网页中使用,只要调用就可以,采用table表格修改一些页面的话就很麻烦了,如果是一个门户网站的话,要手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是这要是在css中只要改一个代码就可以了

  二、表格嵌套

  使用Table布局,为了达到一定的视觉效果,不得不套用多个表格,这样不仅表格会很多,还很乱;所以使用table为了达到很好的视觉效果,就要嵌套很多表格,这就会有很多的代码,不利于搜索引擎抓取。

  如果使用DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,DIV+CSS在控制样式时也不需要过多的嵌套,XHTML在控制样式时不需要过多的嵌套。

  三、网页的速度

  使用了DIV+CSS布局的网页较Table布局减少了页面代码,浏览加载速度得到很大的提高;

  四、SEO搜索引擎优化

  采用div-css设计的网站对于搜索引擎非常友好,很容能取得很好的排名,采用DIV+CSS避免了Table嵌套层次太多无法被搜索引擎抓取的问题;而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

  五、定位更准确

  div的代码的宽、高等都使用css或者页面的style来控制,也就是说在需要修改一个框的大小、位置时候,可以直接修改css的代码或者该标签的style代码即可实现,几乎不用修改其他代码,而且div可以精确的定位于网页的某一个地方,这点table是做不到的;

  使用table的情况下,则可能会因为table的位置出现变动,有的时候不能精确的定位于网页的某一个地方,而影响到对整片代码的修改。

  六、兼容性

  使用table布局,网页在不同浏览器的情况下就会发生错位,而DIV+CSS则不会,不论在什么浏览器下,网页都不会变形的。

  CSS细节关注成败

  一、使用CSS可以更大程度上的简化HTML代码,减少重构的难度。

  众所周知,SEO的最基本最核心的地方有两点,一是:让搜索引擎工作简单化,二是:高度的用户体验。而大家也都知道HTML是最影响SEO的部分, 这个观点是毋庸置疑的,但是仅仅通过HTML去给搜索引擎提供有用的信息还是不够的,要使用最精简的HTML就必须使用CSS辅助页面,以达到代码简 约,UI体验,使用CSS来控制HTML使代码更加简化,更加有意义,其次,网站重构,字面理解网站重构,是在不改变事物外部表现的情况下,对其内部结构 进行合理的优化;如果你在HTML代码中使用了大量的class、ID,那么这样,网站在不改变HTML结构的情况下通过去改变CSS去重构,势必会是一 件很费力气的事情。这是我的论点之一,即使用CSS可以更大程度上的简化HTML代码,减少重构的难度。

  二、使用精简的CSS来提高网站的用户体验

  用户体验也是SEO中很重要的一个因素,一个用户体验及内容都做的很优秀的网站,势必会有很高的粘度,间接的已经影响到了网站的搜索引擎优化,通过 精简的CSS代码,使用CSS sprites等优化技术减少网站的请求项,间接的减少网站的加载时间,通过影响用户体验来影响SEO;

  三、在SEO方面的考虑

  众所周知,几年前国内的SEO作弊的手段中有一种黑帽办法是讲关键词设置成和背景颜色相同的颜色,以欺骗用户,欺骗搜索引擎。当然我们的搜索引擎已 经不那么傻瓜了,他们有他们的技术可以识别CSS,CSS也已经在他们的考虑范围之内。我们不难猜测,CSS也在间接的影响着网站的搜索引擎优化。

  超酷的网页CSS导航有几种

  1. The Menu menu

  这另一个伟大的CSS菜单斯图尼科尔斯是独特的-在一个菜单项盘旋显示一个子菜单。

  2. Pure CSS hover menu

  这另一个伟大的CSS菜单斯图尼科尔斯是独特的-在一个菜单项盘旋显示一个子菜单。

  3. Matte CSS Menu

  雾是一种简单的CSS与使用两个小圆角菜单图像只能从13styles。

  4. CSS Blur Menu

  这说明你的CSS技巧从创建一个菜单,模糊兄弟在一个项目菜单项时,悬停的方法。

  5. CSS Navigation with Glowing Icons

  这个美丽的CSS菜单技术可以创建顺着这一广泛的分步教程。

  6. CSS Sliding Door using only 1 image

  这个漂亮的CSS菜单是基于推拉门技术,但只使用一个图像。

  8. CSS Horizontal Menu

  伊恩主提供了一个免费的CSS菜单大集,是时尚和易于使用。

  9. Woody CSS Menu

  伍迪是预先提出的CSS菜单,就能使用,并已在IE6,IE 7和Firefox,歌剧,Safari浏览器,铬测试。 页面中的演示 。

  10. Advanced CSS Menu

  先进的CSS菜单是由尼克香格里拉和采用先进的(特别)列表菜单利用CSS的位置属性。 页面中的演示 。