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

51顶
1踩

Web前端

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

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

  • 独子棋demo.rar

    独子棋demo.rar

  • 云安全联盟软件定义边界SDP标准规范2.0202239页.pdf

    云安全联盟软件定义边界SDP标准规范2.0202239页.pdf

  • Uniapp开发的微商个人相册多端小程序源码

    Uniapp开发的微商个人相册多端小程序源码。使用 HBuilder X 导入本地项目，修改小程序AppID，以及Uni-app应用标识，调试发布即可。 小程序源码特点： 1、首页进行相册展示，采用分页 2、列表页面以文字形式进行分类，管理员可进行添加，修改和排序 3、每个列表下有多个相册，管理员可进行添加，修改和排序 4、每个相册有多张图片，有小图和大图模式进行切换 5、相册中可以长按图片进行选择删除和设为封面 6、相册可以进行分享 7、我的页面有管理员登录，联系客服等功能

  • 【FPGA硬件设计】基于FPGA的144通道可切换电压源系统设计：硬件架构与上位机软件实现(论文复现或解答，含详细代码及解释）

    内容概要：本文详细介绍了基于FPGA的144输出通道可切换电压源系统的设计与实现，涵盖系统总体架构、FPGA硬件设计、上位机软件设计以及系统集成方案。系统由上位机控制软件（PC端）、FPGA控制核心和高压输出模块（144通道）三部分组成。FPGA硬件设计部分详细描述了Verilog代码实现，包括PWM生成模块、UART通信模块和温度监控模块。硬件设计说明中提及了FPGA选型、PWM生成方式、通信接口、高压输出模块和保护电路的设计要点。上位机软件采用Python编写，实现了设备连接、命令发送、序列控制等功能，并提供了一个图形用户界面（GUI）用于方便的操作和配置。 适合人群：具备一定硬件设计和编程基础的电子工程师、FPGA开发者及科研人员。 使用场景及目标：①适用于需要精确控制多通道电压输出的实验环境或工业应用场景；②帮助用户理解和掌握FPGA在复杂控制系统中的应用，包括PWM控制、UART通信及多通道信号处理；③为研究人员提供一个可扩展的平台，用于测试和验证不同的电压源控制算法和策略。 阅读建议：由于涉及硬件和软件两方面的内容，建议读者先熟悉FPGA基础知识和Verilog语言，同时具备一定的Python编程经验。在阅读过程中，应结合硬件电路图和代码注释，逐步理解系统的各个组成部分及其相互关系。此外，实际动手搭建和调试该系统将有助于加深对整个设计的理解。

  • 上市公司-人工智能-词频总和明细.xlsx

    地级市政府通过制定相关政策来推动数字经济的发展和数字政府的建设。这些政策可能包括鼓励企业数字化转型、促进数字技术创新、加强数字基础设施建设、优化数字政务服务等方面的内容。政策制定的频率和力度，可以在一定程度上反映政府对数字领域的关注度。 在地级市政府数字关注度的背景下，词频分析成为了一种有效的工具，用以衡量政府文件和宣传资料中涉及数字技术和数字化转型相关词汇的频次，进而揭示政府对这一领域的关注程度和重视方向。 数据名称：地级市-政府数字关注度、词频

  • Android平台上基于多尺度多角度模板匹配的图像识别技术及其在不同ARM架构的应用

    内容概要：本文详细探讨了在Android平台上进行图像模板匹配的技术挑战和解决方案，特别是在处理不同尺寸和旋转角度的目标物时的方法。文中介绍了使用OpenCV构建图像金字塔、处理旋转模板以及利用NEON指令集优化性能的具体实现。此外，文章还讨论了在armeabi-v7a和arm64-v8a这两种主要ARM架构下的优化技巧，如内存对齐、SIMD指令优化、RenderScript并行处理等。作者分享了许多实践经验，包括如何避免常见的性能瓶颈和兼容性问题。 适合人群：有一定Android开发经验，尤其是熟悉OpenCV和NDK编程的中级及以上开发者。 使用场景及目标：适用于需要在移动设备上进行高效图像识别的应用开发，如实时视频流中的物体检测、游戏内的道具识别等。目标是提高模板匹配的速度和准确性，同时确保在不同硬件配置下的稳定性和兼容性。 其他说明：文章提供了丰富的代码片段和实际案例，帮助读者更好地理解和应用所介绍的技术。特别强调了在不同ARM架构下的优化策略，为开发者提供了宝贵的参考资料。

Global site tag (gtag.js) - Google Analytics