资讯频道 → Web前端
阅读更多

51顶
1踩

Web前端

翻译新闻 10个非常有用的CSS技巧

2009-12-31 14:35 by 副主编 just_cool 评论(18) 有40892人浏览
CSS

1. 将网页或元素居中       

center     

    
HTML：

 

  1. <div class="wrap">  
  2. </div><!-- end wrap -->  

CSS：

 

  1. .wrap { width:960px; margin:0 auto;}  

 

 

2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
   
stickyfooter

   

 
HTML：

 

  1. <div id="wrap">  
  2.   
  3. <div id="main" class="clearfix">  
  4.   
  5. </div>  
  6.   
  7. </div>  
  8.   
  9. <div id="footer">  
  10.   
  11. </div>  

CSS：

 

  1. * { margin:0; padding:0; }   
  2.   
  3. html, body, #wrap { height: 100%; }  
  4.   
  5. body > #wrap {height: auto; min-height: 100%;}  
  6.   
  7. #main { padding-bottom: 150px; }  /* must be same height as the footer */  
  8.   
  9. #footer {  
  10.         position: relative;  
  11.  margin-top: -150px; /* negative value of footer height */  
  12.  height: 150px;  
  13.  clear:both;}   
  14.   
  15. /* CLEAR FIX*/  
  16. .clearfix:after {content: ".";  
  17.  display: block;  
  18.  height: 0;  
  19.  clear: both;  
  20.  visibility: hidden;}  
  21. .clearfix {display: inline-block;}  
  22. /* Hides from IE-mac */  
  23. * html .clearfix { height: 1%;}  
  24. .clearfix {display: block;}  
  25. /* End hide from IE-mac */  

 

3.跨浏览器最小高度设置      
min-height

       

 CSS：

 

  1. .element { min-height:600px; height:auto !important; height:600px; }  

 

 

4.Box阴影(CSS3)
   
box-shadow

   

    
CSS：

 

  1. .box { box-shadow: 5px 5px 5px #666;  -moz-box-shadow: 5px 5px 5px #666;  -webkit-box-shadow: 5px 5px 5px #666; }  

 

5.文字阴影（CSS3）

   
text-shadow

        

CSS：

 

  1. .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }  

 

6.跨浏览器的CSS透明度
   
opac

 

CSS：

  1. .transparent {  
  2.     
  3.   /* Modern Browsers */ opacity: 0.7;  
  4.   
  5.   /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";  
  6.   
  7.   /* IE 5-7 */ filter: alpha(opacity=70);  
  8.   
  9.   /* Netscape */ -moz-opacity: 0.7;  
  10.   
  11.   /* Safari 1 */ -khtml-opacity: 0.7;  
  12.     
  13. }  

 

 

7.著名的 Meyer Reset（重置）
   
reset

 

CSS：

 

  1.   html, body, div, span, applet, object, iframe,  
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
  3. a, abbr, acronym, address, big, cite, code,  
  4. del, dfn, em, font, img, ins, kbd, q, s, samp,  
  5. small, strike, strong, sub, sup, tt, var,  
  6. dl, dt, dd, ol, ul, li,  
  7. fieldset, form, label, legend,  
  8. table, caption, tbody, tfoot, thead, tr, th, td {  
  9.  margin: 0;  
  10.  padding: 0;  
  11.  border: 0;  
  12.  outline: 0;  
  13.  font-weight: inherit;  
  14.  font-style: inherit;  
  15.  font-size: 100%;  
  16.  font-family: inherit;  
  17.  vertical-align: baseline;  
  18. }  
  19. /* remember to define focus styles! */  
  20. :focus {  
  21.  outline: 0;  
  22. }  
  23. body {  
  24.  line-height: 1;  
  25.  color: black;  
  26.  background: white;  
  27. }  
  28. ol, ul {  
  29.  list-style: none;  
  30. }  
  31. /* tables still need 'cellspacing="0"' in the markup */  
  32. table {  
  33.  border-collapse: separate;  
  34.  border-spacing: 0;  
  35. }  
  36. caption, th, td {  
  37.  text-align: left;  
  38.  font-weight: normal;  
  39. }  
  40. blockquote:before, blockquote:after,  
  41. q:before, q:after {  
  42.  content: "";  
  43. }  
  44. blockquote, q {  
  45.  quotes: "" "";  
  46. }  
  47.    

 

8.删除虚线轮廓      
dotted

   

CSS：

 

  1. a, a:active { outline: none; }  

 

 

9.圆角
   
rounded

         

CSS：

 

  1. .element {  
  2.  -moz-border-radius: 5px;  
  3.  -webkit-border-radius: 5px;  
  4.  border-radius: 5px; /* future proofing */  
  5. }  
  6. .element-top-left-corner {  
  7.  -moz-border-radius-topleft: 5px;  
  8.  -webkit-border-top-left-radius: 5px;  
  9. }  

 

10.覆盖内联的样式
import

     

 CSS:

 

  1. .override {  
  2.  font-size: 14px !important;  
  3. }  
来自: webdevmania
51
顶
1
踩
评论 共 18 条 请登录后发表评论
18 楼 m2maomao 2011-09-29 17:30
2,4,5,6，9都不兼容或者代码有问题，其他都测了IE6+版本，均正确。IE6支持滤镜透明？？？？这个新手都知道吧？当时我就震惊了，还兼容IE5~7。被吓了一跳。
17 楼 qiusa1989 2011-08-02 14:18
[/i][/b][b][u][/u][i][i][/i]      
16 楼 lengdie2002 2010-12-22 11:24
不错。。
15 楼 glh 2010-01-25 16:42
谢啦，很不错
14 楼 simo8025_lee 2010-01-14 10:30
学习了，多谢
13 楼 axiseed 2010-01-05 14:27
longer042 写道
bluemeteor 写道
wyinwing 写道
以上的写法都是所有浏览器通用的？貌似圆角的不是哦


我想，圆角和阴影应该都是CSS3的

但是第十个有点搞笑，这也叫技巧？


圆角 现在 还不行 微软IE6 不刁cs3


同意，CSS2中肯定不能这样实现。
12 楼 longer042 2010-01-04 10:46
bluemeteor 写道
wyinwing 写道
以上的写法都是所有浏览器通用的？貌似圆角的不是哦


我想，圆角和阴影应该都是CSS3的

但是第十个有点搞笑，这也叫技巧？


圆角 现在 还不行 微软IE6 不刁cs3
11 楼 energykey 2010-01-04 10:18
引用
# #footer { 
#         position: relative; 
#  margin-top: -150px; /* negative value of footer height */ 
#  height: 150px; 
#  clear:both;}
10 楼 bluemeteor 2010-01-04 10:06
wyinwing 写道
以上的写法都是所有浏览器通用的？貌似圆角的不是哦


我想，圆角和阴影应该都是CSS3的

但是第十个有点搞笑，这也叫技巧？
9 楼 shinezhou 2010-01-04 09:34
mark

8 楼 black.angel 2010-01-04 08:32
文章虽好，可是浏览器兼容有问题哦。
7 楼 swing6 2010-01-03 14:46
学习一下技巧，兼容再考虑
6 楼 lianzerong 2010-01-03 14:05
thinks !
5 楼 lym6520 2010-01-03 09:12
很值得收藏！LZ赞一个！
4 楼 拜月小刀 2010-01-02 17:36
一点小经验吧 不能兼顾兼容性
3 楼 yak47 2010-01-02 13:37
不错不错
2 楼 wyinwing 2010-01-02 11:20
以上的写法都是所有浏览器通用的？貌似圆角的不是哦
1 楼 lijie250 2009-12-31 20:42
不错

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 必须掌握10个非常不错的CSS技巧

    我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时，我经常“不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美。对了。之所以...

  • 10个非常不错的CSS技巧收集整理分享

    巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷，感兴趣的朋友可以参考下哈

  • 10个必备的CSS技巧总结

    今天我们精心准备了10条对网页设计师最有用的CSS技巧，如果你想设计出独一无二脱颖而出的网页你必须得好好注意了。这篇博客是在与一家提供高质量印刷服务的在线印刷公司“ Business Card Printing”合作时写的。 1. ...

  • 要知道的10个CSS技巧

    当然我们不可能一下子就记住所有CSS的规则和语法，但为了以后的发展我们还是应该记住那些非常有用的CSS技巧。今天我们精心准备了10条对网页设计师最有用的CSS技巧，如果你想设计出独一无二脱颖而出的网页你必须得...

  • css12个技巧,12个真正有用的CSS3技巧

    CSS3的出现无疑是一个强大的新东西，我现在在一些Web项目中开始在使用，很方便，同也很高兴能开始使用这一种新的技术。其先进的功能，给我们Web的页面制作真的带来极大的方便，比如说圆角、阴影、渐变等。这里我总结...

  • Web前端基本： 10个非常有用的CSS技巧

    转自：http://www.pinlue.com/article/2018/11/2006/177553992404.html

  • 12 个优秀的 CSS 技巧

    它是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域。css代码： .any-shape { width: 300px; float: left; shape-outside: circle(50%); } 复制代码 魔法组合 这个小组合实际上可以防止你在 ...

  • 10 个不错的 CSS 小技巧

    CSS 大约有两百个属性。...所以，本文分享一些有用的 CSS 小技巧，方便开发者和设计师参考。1. 打字效果Typing-effect-for-text.gif网页设计变得越来越有创意。在 CSS 动画的协调下，你的网页会像活...

  • 你应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中，经常要设置特殊的字体效果，边框圆角等等，还要考虑兼容性的问题， CSS网页布局，说难，其实很...这里有25个非常有用的CSS技巧，将帮助你解决让你棘手的CSS代码问题。你可以直接使用到你现

  • 20个很有用的CSS技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为...css 代码 img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...

  • 21个超实用的 CSS 技巧分享（附图示）

    本文中分享的所有CSS技巧都是来自GitHub代码库“css tips tricks”的手工精选，此代码库专为开发者提供专业的CSS技巧。1、文档布局使用仅两行CSS代码，创建一个响应式的文档布局。这个布局风格类似于文档页面，可以...

  • 10 个 web前端开发者必须要掌握的CSS 技巧

    英文 |https://medium.com/@nasyxrakeeb2/10-css-pro-tips-code-this-not-that-codipher-f94558e82756翻译 | 杨小爱CSS 是每个 Web 开发人项目中的重要组成部分。对于没有设计和 UI 的 Web 开发人员来说，一切都是不...

  • 11 个非常有用的 CSS 代码片段

    英文 | https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a287820047...

  • onnxruntime-1.16.0-cp311-cp311-win_amd64.whl

    onnxruntime-1.16.0-cp311-cp311-win_amd64.whl

  • 基于springboot的流浪猫狗救助系统源码数据库文档.zip

    基于springboot的流浪猫狗救助系统源码数据库文档.zip

  • springboot美容院管理系统(代码+数据库+LW)

    摘  要 如今的信息时代，对信息的共享性，信息的流通性有着较高要求，因此传统管理方式就不适合。为了让美容院信息的管理模式进行升级，也为了更好的维护美容院信息，美容院管理系统的开发运用就显得很有必要。并且通过开发美容院管理系统，不仅可以让所学的SpringBoot框架得到实际运用，也可以掌握MySQL的使用方法，对自身编程能力也有一个检验和提升的过程。尤其是通过实践，可以对系统的开发流程加深印象，无论是前期的分析与设计，还是后期的编码测试等环节，都可以有一个深刻的了解。 美容院管理系统根据调研，确定其实现的功能主要包括美容用品管理，美容项目管理，美容部位管理，销量信息管理，订单管理，美容项目预约信息管理等功能。 借助于美容院管理系统这样的工具，让信息系统化，流程化，规范化是最终的发展结果，让其遵循实际操作流程的情况下，对美容院信息实施规范化处理，让美容院信息通过电子的方式进行保存，无论是管理人员检索美容院信息，维护美容院信息都可以便利化操作，真正缩短信息处理时间，节省人力和信息管理的成本。 关键字：美容院管理系统，SpringBoot框架，MySQL

  • numpy-1.21.1-cp39-cp39-linux_armv7l.whl

    numpy-1.21.1-cp39-cp39-linux_armv7l.whl

  • 基于JavaWeb+springboot的宠物救助及领养平台源码数据库文档.zip

    基于JavaWeb+springboot的宠物救助及领养平台源码数据库文档.zip

  • 基于springboot员工在线餐饮管理系统源码数据库文档.zip

    基于springboot员工在线餐饮管理系统源码数据库文档.zip

Global site tag (gtag.js) - Google Analytics