关于蜘蛛在匍匐一个网站的页面时,若是有太多的废物代码,会使搜索蜘蛛对其发生不友爱、不信任感,一起蜘蛛的匍匐速度也会因而而减缓,关于网站SEO而言,可谓一大忌。就如传统的用table标签页面,对此我们就需要对网站进行代码优化,而这便需要动用CSS+div了,下面便来谈谈运用CSSdiv进行代码优化的一些益处。
一.精简代码,建造重构难度-TOP
网站运用DIV+CSS布局使代码很是精简,相信大多朋友也都略有所闻,css文件能够在网站的任意一个页面进行调用,而若是运用table表格修改部分页面却是显得很费事。要是一个门户网站的话,需手动改许多页面,并且看着那些表格也会感觉很乱也很浪费时间,但是运用css+div布局只需修改css文件中的一个代码即可。
二.css网页拜访速度-TOP
运用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览拜访速度自然得以提升,也然后提升了网站的用户体验度。
三.SEO优化-TOP
选用div-css布局的网站关于搜索引擎很是友爱,因而其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,并且简练、结构化的代码愈加有利于突出重点和合适搜索引擎抓取。
四.浏览器兼容性-TOP
DIV+CSS比较TABLE布局,更容易呈现多种浏览器不兼容的问题,首要原因是不同的浏览器对web规范默认值不同。国内干流是ie,firefox及chrome用的较少,在兼容性测试方面,首要需要保证在ie多版本不呈现问题,这儿涉及到一些办法和技巧,能够针对具体问题在网站查找解决办法。
五.CSS+DIV网页布局的时分常犯的小过错-TOP
1.查看HTML元素是否有拼写过错、是否忘掉完毕符号
即使是内行也经常会弄错div的嵌套联系。能够用dreamweaver的验证功用查看一下有无过错。
2.查看CSS是否书写正确
查看一下有无拼写过错、是否忘掉结尾的}等。能够运用CleanCSS来查看CSS的拼写过错。CleanCSS本是为CSS瘦身的东西,但也能查看出拼写过错。
3.用删去法确认过错发生的方位
假如过错影响了整体布局,则能够逐一删去div块,直到删去某个div块后显现恢复正常,即可确认过错发生的方位。
4.运用border特点确认出错元素的布局特性
运用float特点布局一不小心就会出错。这时为元素添加border特点确认元素边界,过错原因即水落石出。
5.float元素的父元素不能指定clear特点
MacIE[3]下假如对float的元素的父元素运用clear特点,周围的float元素布局就会紊乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
6.float元素务必指定width特点
许多浏览器在显现未指定width的float元素时会有bug。所以不论float元素的内容怎么,一定要为其指定width特点。
另外指定元素时尽量运用em而不是px做单位。
7.float元素不能指定margin和padding等特点
IE在显现指定了margin和padding的float元素时有bug。因而不要对float元素指定margin和padding特点(能够在float元素内部嵌套一个div来设置margin和padding)。也能够运用hack办法为IE指定特别的值。
8.float元素的宽度之和要小于100%
假如float元素的宽度之和正好是100%,某些陈旧的浏览器将不能正常显现。因而请保证宽度之和小于99%。
9.是否重设了默认的款式?
某些特点如margin、padding等,不同浏览器会有不同的解说。因而最好在开发前首要将全体的margin、padding设置为0、列表款式设置为none等。
10.是否忘掉了写DTD?
假如无论怎样调整不同浏览器显现成果仍是不一样,那么能够查看一下页面开头是不是忘了写下DTD声明(DOCTYPE)。
最终,需要注意的是,蜘蛛不喜欢一个页面有太多的css代码,不然同样会影响蜘蛛的匍匐,影响搜索引擎的录入,所以选用外部调用的办法调用CSS是非常不错的办法(html引入css文件)。而一起,若非有必要太多花哨的网站,选用CSS布局,同样能够抵达所想要的效果。如网站导航中的文字色彩变化、css下拉菜单等。
div+css布局优势基本步骤实例详解
都说用DIV+CSS布局来规划网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html经过DIV标签+CSS样式表代码开发制造的(html)网页的总称。DIV+CSS布局是现在十分盛行的布局办法,替代了本来的表格布局。下面咱们先来看下学习DIV+CSS布局的基本进程:
DIV+CSS?
一、认清学习的要求
1、弄清意图,首要要认识为什么要学习CSS?
2、心态不能急,假如你很急躁,否则会很快丧失爱好。
3、坚持,这个不是一到两天的工作,是一个漫长的进程(至少两个月)。
二、根底学习
1、了解CSS作用是什么?(即CSS、html和JS的关系是什么,HTML结构重要性)
2、CSS根底知识、CSS特点样式
3、HTML
上面几点,一般都是很快的把握了,也不需求做到通晓,了解大概就能够。
差不多时分,开端在网上找一些psd规划稿,自己做做看,做完之后发现问题,并把他们进行总结。
三、学会剖析他人网页布局
当你做psd规划的代码,发现问题,或许找不到答案或没有人帮你回答,也不要急,这时最好看看他人网页的布局结构,主要看html布局结构,进行学习(当然网上还有许多结构代码很槽糕)。然后了解美工图怎么剖析、怎么使用PS东西切出需求的资料、怎么使用这些切出的图片资料进行布局、布局技巧、兼容性解决与避免等。
总归:便是让自己布局时分能知道大的布局结构怎么布局,建立布局思维与技巧。
四、代码的标准
当你看完许多他人的网页代码之后,你会发现,他们都有标准,这些标准网上有许多,你需求总结和背诵,当然不是死记硬背,主要在切图上多做多实践,熟了就能记住。
五、大量操练
操练是从始到终的,不要断,即便找一些简单的网页进行布局实践,开端或许开发很慢,会遇到许多小问题,也不急。
制造DIVCSS网页前考虑布局:
首要咱们拿到一张网页美工图片咱们将从上下、上中下、左右、上中(中包含左右)下布局结构来考虑。
下面经过一个实例讲解下CSS布局剖析,咱们以DIVCSS5列表页面剖析CSS布局:
制造DIVCSS网页前考虑布局
首要咱们能够剖分出咱们DIVCSS布局重构此页面结构结构,咱们能够看出是上、中、下结构,其中又包含了左右结构。
由此咱们就要写此页面CSS和html时分就先从上到下从外到内准则写CSS与html。
咱们首要建一个web的文件夹并在此文件夹里新建html页面命名为index.html,CSS文件命名为index.css。这里有个窍门便是能够导入模板方式来建CSS与html初始页面,然后将CSS文件引用到html,再在CSS模板的根底上再写再添加CSS。