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

51顶
1踩

Web前端

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

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

  • C++ 实现新年倒计时与烟花显示效果的图形界面程序

    内容概要：该文档介绍了一个用C++编写的控制台应用程序，主要功能是在新年来临之际展示倒计时、播放音符以及渲染烟花效果，最终以艺术字体显示新年祝福语。具体实现了粒子系统来模拟烟花绽放，并定义了不同形状（如“2025”）由小点组成的图像，再逐帧更新显示，营造烟火燃放的视觉冲击力。此外还有通过 Beep 函数发出不同频率的声音以配合倒计时刻度，同时加入了输入姓名和许愿的功能增加互动感。 适用人群：熟悉C/C++语言基础的学生群体及开发者。 使用场景及目标：适用于希望通过生动有趣的小项目加深对控制台操作的理解的学习者；也可以作为一个简单有趣的案例用于节日庆祝活动中。 其他说明：由于使用了许多特定于 Windows 平台的API函数，比如 Beep(), SetConsoleTextAttribute() 和 GetStdHandle(), 本程序仅能在 Windows 上运行良好。并且涉及到了较多关于粒子系统和声音处理的知识点，在教学过程中可以借此讲解一些图形渲染的基本原理和音频处理方法。

  • 儿歌、手指谣、律动.docx

    儿歌、手指谣、律动.docx

  • 基于Msp430设计的环境监测系统（完整系统源码等资料）实物仿真.zip

    【文章链接：https://blog.csdn.net/2403_86849624/article/details/145739426?spm=1001.2014.3001.5502】基于 MSP430 微控制器的环境监测系统的设计与实现。该系统集成了温湿度、光照度、烟雾浓度以及 PM2.5 浓度等多参数的监测功能，具备数据显示、阈值设置和报警等功能。通过硬件电路与软件程序的协同工作，系统能够实时、准确地获取环境信息，并为用户提供直观的数据展示和有效的预警。文中深入探讨了系统的硬件选型、电路设计、软件编程思路及关键代码实现，经实际测试验证，该系统运行稳定、性能可靠，在环境监测领域具有一定的应用价值。关键词：MSP430；环境监测；传感器；数据处理 随着工业化进程的加速和人们生活水平的提高，环境质量对人类健康和社会发展的影响愈发显著。准确、实时地监测环境参数，对于预防环境污染、保障人体健康以及推动可持续发展至关重要。

  • 基于COMSOL仿真的电磁超声压电接收技术在铝板裂纹检测中的应用研究,COMSOL模拟：电磁超声压电接收技术在铝板裂纹检测中的应用,comsol电磁超声压电接收EMAT 在1mm厚铝板中激励250kH

    基于COMSOL仿真的电磁超声压电接收技术在铝板裂纹检测中的应用研究,COMSOL模拟：电磁超声压电接收技术在铝板裂纹检测中的应用,comsol电磁超声压电接收EMAT 在1mm厚铝板中激励250kHz的电磁超声在200mm位置处设置一个深0.8mm的裂纹缺陷，左端面设为低反射边界。 在85mm位置处放置一个压电片接收信号，信号如图3所示，三个波分别为始波，裂纹反射波(S0模态)和右端面回波(S0）。 ,comsol;电磁超声;压电接收;EMAT;裂纹缺陷;信号接收;波;始波;S0模态;右端面回波,电磁超声检测技术：裂纹缺陷定位与信号分析

  • MATLAB环境中基于PSO算法的机器人路径规划系统：可视化界面下的障碍物自定义与终点规划,MATLAB实现PSO算法的机器人路径规划系统：支持自定义障碍物、起点终点的可视化界面操作,基于MATLAB

    MATLAB环境中基于PSO算法的机器人路径规划系统：可视化界面下的障碍物自定义与终点规划,MATLAB实现PSO算法的机器人路径规划系统：支持自定义障碍物、起点终点的可视化界面操作,基于MATLAB的粒子群优化（PSO）算法的机器人路径规划，可视化界面，可自定义障碍物，起点和终点。 ,MATLAB; 粒子群优化（PSO）算法; 机器人路径规划; 可视化界面; 自定义障碍物; 起点和终点,MATLAB PSO算法机器人路径规划与可视化界面

  • 五电平无刷直流电机BLDC矢量控制仿真模型研究：转速稳定、多电平可调参数的Matlab Simulink模型应用,五电平无刷直流电机BLDC矢量控制仿真模型研究：转速稳定、多电平可调参数的Matlab

    五电平无刷直流电机BLDC矢量控制仿真模型研究：转速稳定、多电平可调参数的Matlab Simulink模型应用,五电平无刷直流电机BLDC矢量控制仿真模型研究：转速稳定、多电平可调参数的Matlab Simulink模型应用分析,五电平无刷直流电机BLDC矢量控制仿真模型，给定转速1000r min，运行良好； 三电平，两电平均可做，可调参数； matlab simulink模型 ,五电平BLDC矢量控制; 仿真模型; 1000r_min; 三电平控制; 可调参数; Matlab_Simulink模型。,五电平BLDC矢量控制仿真模型：三电平可调参数，1000r/min良好运行，Matlab Simulink实现

Global site tag (gtag.js) - Google Analytics