`
liss
  • 浏览: 844110 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

几个经典的css技巧

    博客分类:
  • CSS
阅读更多

使用 line-height 垂直居中

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=line-height%3A24px%3B" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. line-height:24px;  
line-height:24px;

 

 

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

清除容器浮动

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=%23main%20%7B%0A%20%20%20%20overflow%3Ahidden%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. #main {  
  2.     overflow:hidden;  
  3. }  
#main {
    overflow:hidden;
}

 

 

期前也提到过这样的问题,更多信息可以看这里。

不让链接折行

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=a%20%7B%0A%20%20%20%20white-space%3Anowrap%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. a {  
  2.     white-space:nowrap;  
  3. }  
a {
    white-space:nowrap;
}

 

 

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

始终让 Firefox 显示滚动条

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=html%20%7B%0A%20%20%20%20overflow%3A-moz-scrollbars-vertical%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. html {  
  2.     overflow:-moz-scrollbars-vertical;  
  3. }  
html {
    overflow:-moz-scrollbars-vertical;
}

 

 

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

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=body%2C%20html%20%7B%0A%20%20%20%20min-height%3A101%25%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. body, html {  
  2.     min-height:101 %;  
  3. }  
body, html {
    min-height:101%;
}

 

 

使块元素水平居中

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=margin%3A0%20auto%3B" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. margin: 0  auto;  
margin:0 auto;

 

 

其实就是

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=margin-left%3A%20auto%3B%0Amargin-right%3A%20auto%3B" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. margin-left: auto;  
  2. margin-right: auto;  
margin-left: auto;
margin-right: auto;

 

 

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

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=body%7B%0A%20%20%20%20text-align%3A%20center%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. body{  
  2.     text-align: center;  
  3. }  
body{
    text-align: center;
}

 

 

然后定义内层容器

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=text-align%3A%20left%3B" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. text-align: left;  
text-align: left;

 

 

恢复。

隐藏 Exploer textarea 的滚动条

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=textarea%20%7B%0A%20%20%20%20overflow%3Aauto%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. textarea {  
  2.     overflow:auto;  
  3. }  
textarea {
    overflow:auto;
}

 

 

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

设置打印分页

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=h2%20%7B%0A%20%20%20%20page-break-before%3Aalways%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. h2 {  
  2.     page-break-before:always;  
  3. }  
h2 {
    page-break-before:always;
}

 

 

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

删除链接上的虚线框

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=a%3Aactive%2C%20a%3Afocus%20%7B%0A%20%20%20%20outline%3Anone%3B%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. a:active, a:focus {  
  2.     outline:none;  
  3. }  
a:active, a:focus {
    outline:none;
}

 

 

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

最简单的 CSS 重置

Css代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=*%20%7B%0A%20%20%20margin%3A%200%3B%20padding%3A%200%0A%7D%0A" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. * {  
  2.    margin: 0 ; padding:  0   
  3. }
分享到:
评论

相关推荐

    收藏的几个经典的css样式表示例

    这个压缩包文件"收藏的几个经典的css样式表示例"显然包含了几个使用CSS实现的独特设计技巧。下面我们将深入探讨其中可能涉及的知识点,特别是关于“纯css实现的圆角、山顶角”的部分。 首先,我们来讨论CSS中的圆角...

    CSS几个技巧及问题处理.rar

    这个名为"CSS几个技巧及问题处理.rar"的压缩包显然包含了关于CSS的一些实用技巧和常见问题的解决方案。让我们深入探讨一下这些可能包含的知识点。 1. **选择器的高效利用**: - CSS选择器的精确性至关重要,如ID...

    经典CSS+DIV布局模板

    CSS在网页布局中的作用主要体现在以下几个方面: 1. **盒模型**:CSS盒模型是理解布局的关键。每个HTML元素都可以视为一个矩形盒子,包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。通过调整...

    几款经典网站CSS效果

    本篇文章将深入探讨【标题】"几款经典网站CSS效果"所涵盖的一些常见且实用的CSS技巧,这些技巧被广泛应用于各种知名网站中。 首先,我们来看"51job上的地区选择效果"。这个效果通常体现在下拉菜单或者级联选择器中...

    CSS常用的十几个技巧

    【CSS常用的十几个技巧】 在Web开发中,CSS(层叠样式表)是不可或缺的一部分,用于控制网页元素的样式和布局。以下是一些常用的CSS开发技巧,对于初学者和经验丰富的开发者来说都十分实用。 1. **使用css缩写**:...

    几个不错的CSS网站模版

    【标题】"几个不错的CSS网站模版"指出的是一个包含多个CSS设计的网站模板集合,这些模板可能适用于各种类型的网页项目。CSS(层叠样式表)是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它...

    CSS使用技巧的word文档

    本文档提供了几个实用的CSS使用技巧,帮助开发者更高效地控制页面样式。 1. 文字水平居中:通过设置`text-align`属性为`center`,可以实现一段文字在容器内的水平居中对齐。 ```css text-align: center; ``` 2. ...

    几个好看的国外CSS模板

    通过下载并研究这些国外CSS模板,开发者不仅可以学习到当前流行的设计趋势,还能掌握实用的CSS技巧和最佳实践。这些模板通常已经考虑到了兼容性、可访问性和性能优化,是提升个人技能和项目质量的好资源。在实际应用...

    CSS+DIV网页布局技巧(精髓)

    在实际开发中,不同的浏览器对CSS的支持程度不同,因此需要特别注意以下几点以确保网页在各种浏览器中都能正常显示。 ##### 1. IE6/7与Firefox的盒模型差异 在IE6/7与Firefox中,对于设置了 `float` 的元素,它们...

    几个常用经典的css技巧

    在实际开发中,一些经典的CSS技巧能够帮助我们快速高效地实现特定效果。以下是一些常用且经典的CSS技巧及知识点: 1. 使用line-height实现垂直居中 当需要在固定宽度的容器中使文本垂直居中时,可以利用line-height...

    CSS技巧整理.pdf

    【CSS技巧整理】 在网页设计和开发中,CSS(Cascading Style Sheets)扮演着至关重要的角色,它负责页面的布局和样式呈现。本篇资料主要涵盖了五个优化CSS编码实践的技巧,旨在帮助你写出更高效、易维护的CSS代码。...

    用CSS定义标题的几个实例

    在这个主题“用CSS定义标题的几个实例”中,我们将深入探讨如何使用CSS来美化和定制HTML文档中的标题。通过以下实例,我们将了解到CSS在标题样式化方面的多样性和灵活性。 1. **基本样式定义** CSS允许我们直接对...

    100个经典的CSS完整网页模板_之二

    本资源“100个经典的CSS完整网页模板_之二”提供了一系列实用的CSS模板,这些模板可以帮助开发者快速构建美观、功能齐全的网页。 这些CSS模板通常包含一系列预定义的样式规则,如颜色方案、布局、字体样式等,...

    html+css静态网页,适合学生作业,主要体现css布局技巧

    这个压缩包文件包含了几个关键元素,让我们一一解析。 首先,我们有`templatemo_style.css`,这是一个外部样式表文件,用于定义HTML文档的样式。在CSS中,我们可以设置字体、颜色、布局等视觉元素,使得网页看起来...

    几款不错的css特效

    CSS特效是指利用CSS的特定属性和技巧,为网页元素添加视觉上的吸引力和交互性。以下将详细介绍标题和描述中提及的几款CSS特效,以及它们背后的原理和实现方法。 1. 导航栏的放大特效: 这种特效通常通过CSS3的:...

    分享几个CSS小众但炫酷的技巧

    今天我们将探讨几个鲜为人知但十分炫酷的CSS技巧,这些技巧能让你的网站或应用增添不少亮点。 首先,我们来看如何将彩色图像转化为黑白。利用CSS的滤镜功能,可以轻松实现这一效果。通过添加以下样式,你可以将图片...

    你必须要知道的几个CSS技巧

    有些经典的CSS技巧,我们还是需要记住的,这样可以节省我们大量的时间,下面零度就为大家推荐几个比较好的CSS技巧: 1、在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就...

    Div+Css 好用的几个后台模板

    "Div+Css 好用的几个后台模板" 提到的资源可能是一些预设的、基于Div+CSS 的后台界面设计,帮助开发者快速搭建功能完善的管理平台。以下是对Div+CSS及相关知识点的详细解释: 1. Div(Division):在HTML中,`&lt;div&gt;...

    css技巧:经典CSS使用技巧几则

    本文将详细介绍几个实用的CSS技巧,帮助你更好地理解和应用CSS。 首先,我们来看如何使用`line-height`实现垂直居中。当你的元素在一个固定宽度的容器内,并且希望其内容一行展示并垂直居中对齐时,可以设置`line-...

Global site tag (gtag.js) - Google Analytics