学习css网页布局口诀

  用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的!
  
  一、IE边框若显若无,须注意,定是高度设置已忘记;
  
  二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;
  
  三、三像素文本慢移不必慌,高度设置帮你忙;
  
  四、兼容各个浏览须注意,默认设置行高可能是杀手;
  
  五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;
  
  六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。
  
  七、所有标签皆有源,只是默认各不同,span是无极,无极生两仪—内联和块级,img较特殊,但也遵法理,其他只是改造各不同,一个*号全归原,层叠样式理须多练习,万物皆规律。
  
  八、图片链接排版须小心,图片链接文字链接若对齐,padding和vertical-align:middle要设定,虽差微细倒无妨。
  
  九、IE浮动双边距,请用display:inline拘。(3lian素材)
  
  十、列表横向排版,列表代码须紧靠,空隙自消须铭记。

时间: 2024-10-27 19:31:19

学习css网页布局口诀的相关文章

学习CSS教程:学习CSS网页布局

文章简介:你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎. 这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础. 你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则

学习CSS网页布局时排查错误的方法

虽然浏览器可能存在着很多Bug,但是并不是与自己感觉不一样的时候就是出现了Bug.产生问题的原因可能有很多种,因此制作者需要一定的方法来排查问题. 选择一个先进的浏览器进行测试是明智的做法,例如对CSS 2.1支持比较好的Opera 9.2.Firefox 2.0或者Safari 3.0,而不要使用IE 6作为唯一的测试浏览器,因为IE 6的问题是最多的,这非常不利于制作者(特别是初学者)理解CSS 2.1的规范与判断浏览器的表现是否正确. 如果在先进的浏览器内测试是正确的,而在IE内有问题,那

DIV CSS网页布局学习中容易出现的问题汇总

css|网页|问题 应用Div+CSS网页布局,制作符合web标准的网站,容易出现的一些问题.现在总结一下,以便大家能够看到明白问题出在那里. 一.CSS校验的问题 我们设计的网页,都希望符合XHTML标准,CSS通过W3C的校验.有些未通过CSS2.0校验,主要校验错误都是:"Line : 0 font-family: 建议你指定一个种类族科作为最后的选择"W3C建议字体定义的时候,最后以一个类别的字体结束,而不要以单独某个字体结束.例如"sans-serif"就

CSS网页制作技巧:DIV+CSS网页布局常犯错误汇总

文章简介:随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 一.检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检

Div+CSS网页布局中CSS无效的十个常见原因

核心提示:我们学习Div+CSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能. 我们学习Div+CSS网页布局的知识,可是W3C validation有时难以操作,但用它你可以查看由版面设计引起的差错.验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能.下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决

CSS网页布局的意义与副作用

  随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,52CSS.com也成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手;但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了C

DIV+CSS网页布局对SEO优化有哪些影响

第一:DIV+CSS页面对于spider爬行效率 Div+Css的代码精简是table无法比拟的,即使DIV CSS的html加上对应CSS文件一般都小于table的html文件,div+css实现了样式和布局完全分离,前台垃圾代码大量减少,内容更加突出,让蜘蛛在你的网站上快速爬行,短时间内爬完你的网站. 第二:改善网页打开速度 众所周之:客户是上帝.搜索引擎也不例外,所以搜索引擎会优先抓取客户体验比较好的网站.真正的SEOer不只是为了追求收录.排名,快速的响应速度是提高用户体验度的基础网站.

使用DIV+CSS网页布局在SEO优化的优势

css|seo|优化|网页布局 SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在Google等搜索引擎中获得较高的评分,从而获得较好的排名.DIV+CSS网页布局对SEO有哪些影响呢? 一.精简网页代码 使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道. 代码精简所带来的直接好处有两点:一是提高Spider爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行

CSS网页布局错位:CSS宽度计算

文章简介:CSS网页布局错位. 为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么计算CSS宽度例一:我们计算一个左右结构的布局样式.假如总宽度为400px,那么左右加起来就应当小于400px,那我们可能左边为300px,右边为100px正确代码: <!DOCTYPE html><head><meta http-equiv=&q