学习css网页布局口诀

2016-02-19 16:54 4 1 收藏

岁数大了,QQ也不闪了,微信也不响了,电话也不来了,但是图老师依旧坚持为大家推荐最精彩的内容,下面为大家精心准备的学习css网页布局口诀,希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发 】

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

来源:https://www.tulaoshi.com/n/20160219/1613484.html

延伸阅读
标签: Web开发
虽然浏览器可能存在着很多Bug,但是并不是与自己感觉不一样的时候就是出现了Bug。产生问题的原因可能有很多种,因此制作者需要一定的方法来排查问题。 选择一个先进的浏览器进行测试是明智的做法,例如对CSS 2.1支持比较好的Opera 9.2、Firefox 2.0或者Safari 3.0,而不要使用IE 6作为唯一的测试浏览器,因为IE 6的问题是最多的,这...
标签: Web开发
我在做网站项目的时候通常需要定义一个高度为10px以下的div。代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content=&...
标签: Web开发
许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。 但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:ce...
标签: Web开发
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS...

经验教程

900

收藏

48
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部