css技巧-经典中的经典

2016-02-19 16:13 9 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐css技巧-经典中的经典,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

删除链接上的虚线框

a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。

最简单的 CSS 重置

* {
   margin: 0; padding: 0
}


不让链接折行

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

a {
    white-space:nowrap;
}

上面的设定就能避免链接折行,不过个人建议长链接会有相应的这行(有关换行方面的讨论,参看圆心的记录)。

始终让 Firefox 显示滚动条

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

html {
    overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 私有 CSS 属性可以参考这里。需跨浏览器的支持,也可以使用

body, html {
    min-height:101%;
}

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。

清除容器浮动

#main {
    overflow:hidden;
}

使块元素水平居中
margin:0 auto;
其实就是

margin-left: auto;
margin-right: auto;

这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用

body{
    text-align: center;
}

然后定义内层容器

text-align: left;

恢复。

隐藏 Exploer textarea 的滚动条

textarea {
    overflow:auto;
}

Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。

设置打印分页

h2 {
    page-break-before:always;
}

page-break-before 属性能设置打印网页时的分页。

来源:http://www.tulaoshi.com/n/20160219/1611368.html

延伸阅读
标签: 摄影技巧
摄影 是一门技术,同样也是经验的积累。下面是无数摄影师的经验汇聚而成的十二条最经典、最实用的摄影技巧,将其熟记于心,将帮助你应对很多难以掌控的拍摄场景 1.阳光十六法则 (Sunny 16 Rule) “阳光十六法则”是在没有测光表时,正确估算日光下曝光数值的方法,所以这条法则只有在阳光充足的情况下适合使用。将光圈设为F/16...
经典摄影有什么技巧   1.阳光十六法则(Sunny 16 Rule):阳光十六法则是在没有测光表时,正确估算日光下曝光数值的方法,所以这条法则只有在阳光充足的情况下适合使用。将光圈设为F/16,快门与ISO同步,或者略快。如,ISO设为100时,快门应该设为1/100秒(1/125秒)。所以,根据这个法则,在海滩上摄影时,应该使用F/22光圈,在多云时应...
阳光十六法则 对于风景摄影而言,过分依靠相机的测光结果往往不能得到最佳的拍摄效果。比如场景中存在大面积暗色景物时,相机的测光系统会增加曝光量,得到的照片效果呈现过曝的效果,天空变成惨白一片,没有任何细节。 这时如果采用“阳光十六法则”,就不会出现这种情况。阳光的照射强度是相对固定的,在阳光照射充足的室外,将相...
我父亲以前是抽烟斗的。我想当时所有人的父亲都是抽烟斗但我的同龄人却一个都没有。不过就象各类烟草产品一样,近年来又刮起了一股抽烟斗的热潮。 在以前,抽烟斗就等于是抽烟的代名词。穿着斜纹夹克的大学教授、作沉思状的人们、独立影片的导演烟斗都可以说是他们的一件重要道具。 历史学家认为美洲土著是首先使用烟斗来抽烟的...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title52css.com/title style type="text/css" label{ float: left; width: 80px; } form{margin:0px} i...

经验教程

270

收藏

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