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

51顶
1踩

Web前端

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

2009-12-31 14:35 by 副主编 just_cool 评论(18) 有40836人浏览
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...

  • 基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程 .rar

    基于matlab实现的空间调制通信过程，包含信号调制、天线选择等发送过程，以及采用最大似然估计的检测过程。.rar

  • 基于matlab的关于生猪养殖场经营管理的研究.docx

    本文档是课题研究的研究报告内含调研以及源码设计以及结果分析

  • 网络作为特征提取器-python源码.zip

    网络作为特征提取器-python源码.zip

  • JavaScript-javaweb项目

    JavaScript-javaweb项目

  • node-v12.11.0-linux-arm64.tar.xz

    Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

  • 仿Slideby触屏版html5响应式手机wap网站模板下载.zip

    触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板

Global site tag (gtag.js) - Google Analytics