div+css布局优势(基本步骤实例详解)

div+css布局优势

关于蜘蛛在匍匐一个网站的页面时，若是有太多的废物代码，会使搜索蜘蛛对其发生不友爱、不信任感，一起蜘蛛的匍匐速度也会因而而减缓，关于网站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。