使用CSS让前端网页布局变得更好的小技巧

  介绍

这篇文章主要介绍使用CSS让前端网页布局变得更好的小技巧,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

对CSS前端网页布局的技巧,可谓是名目繁多。这里将适合新手的CSS前端网页布局的小技巧总结出来,或许对您更有实际的参考价值:

<强> 1,ul标签在Mozilla中默认是有填充物值的,而在IE中只有保证金有值。

<强> 2,同一个类的选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用类和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为id的权值要比类大。

<强> 3,一个兼容性调整(即和Mozilla)的笨办法:
初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成一个显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。
临时解决方法:

选择符{属性名:B  !重要;属性名:一个}

4,如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的利润属性吧,而不要去定义位于外面的标签的填充
<强> 5,李标签前面的图标推荐使用背景图像,而不是list-style-image。
<强> 6,即分不清继承关系和父子关系的差,别全部都是继承关系。
<强> 7,在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。等你以后修改你的CSS的时候就知道为什么要这么做了。

<强> 8,如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。强建议这个时候给你的标签再设置一个深色调的背景颜色。

<强> 9日定义链接的四种状态要注意先后顺序:

Link  Visited  Hover 活跃的

<强> 10,与内容无关的图片请使用背景

<强> 11、定义颜色可以缩写# 8899 ff=# 89 f

<强> 12,表在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

<强> 13日& lt; script>没有语言这个属性
应该写成这样:

& lt; script  type=" text/JavaScript在

<强> 14日标题是标题,标题的文字是标题的文字。
有时候标题不一定需要显示文字,所以:& lt; h2>标题内容& lt;/h2>改成& lt; h2> & lt; span>标题内容& lt;/span> & lt;/h2>

<强> 15日完美的单象素外框线表格(在IE5 IE6, IE7及FF1.0.4以上中均可通过测试)

表{border-collapse:崩溃;}   td{边界:# 000,solid  1 px;}

<强> 16日保证金取负值可以在标签使用绝对定位的时候起到相对定位的作用在页面居中显示时,使用绝对定位的层不适合使用左:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用保证金的负值是个好方法。

<强> 17日绝对定位时使用边际值定位可以达到相对于本身所在位置的定,这与上面,左等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

<强> 18岁,如果文字过长,则将过长的部分变成省略号显示:IE5, FF无效,但可以隐藏,IE6有效

& lt; p 风格=翱矶?120 px;高度:50 px;边界:1 px  solid 蓝色;溢出:隐藏;文本溢出:省略“比;   & lt; NOBR>就是比如有一行文字,很长,表格内一行显示不下灵活;/NOBR>

<强> 19日在IE中可能由于注释带来的文字重复问题时可以把注释改为:

& lt; !——(if  ! IE)祝辞Put  your  commentary 这里…& lt;拷贝! [endif]→

<强> 20日如何用css调用外部字体
语法:

@font-face{字体类型:名称;src:网址(url); sRules}

取值:
名称:字体名称。任何可能的字体族属性的值
url(网址):使用绝对或相对url地址指定OpenType字体文件
sRules:样式表定义

<强> 21日如何让一个表单中的文本框中的文字垂直居中?
如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。

<强> 22日定义一标签要注意的小问题:
当我们定义{颜色:红色;}时,它代表了一个的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义:悬停就可以了,其它三种状态就是一个中所定义的样式。
只定义了一个答:链接时,一定要记得把其它三种状态定义出来!

使用CSS让前端网页布局变得更好的小技巧