`
liuguofeng
  • 浏览: 450473 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

最常用和实用的CSS技巧

    博客分类：
  • css
 
阅读更多

下面是CSS最常用和实用的技巧。 


1.重置浏览器的字体大小 
重置浏览器的默认值 ，然后重设浏览器的字体大小你可以使用雅虎的用户界面重置的CSS方案 ，如果你不想下载9MB的文件，代码如下： 

Java代码 
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,  
  2. blockquote,th,td {margin:0; padding:0; }  
  3. table { border-collapse:collapse; border-spacing:0; }  
  4. fieldset,img { border:0; }  
  5. address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }  
  6. ol,ul { list-style:none; }  
  7. caption,th { text-align:left; }  
  8. h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }  
  9. q:before,q:after { content:”; }  
  10. abbr,acronym { border:0; }  


其次，我们重设浏览器字体的大小为10像素，使用如下： 

Java代码 
  1. html {font-size: 62.5%;}  


这个大小基本合适，然后您可以根据自己的需要调整大小，如 标题1为120像素: 

Java代码 
  1. h1 {font-size: 2em;}  



2.设置水平居中 
大多数的网站目前都是固定宽度的。CSS代码如下： 

Java代码 
  1. div#container {margin: 0 auto;}  



3.控制位置：绝对位置，相对位置 
假如有两个div 

Java代码 
  1. <div id='parent'>  
  2. <div id='son'></div>  
  3. </div>  


div有left和top属性,是用来定位的. 
如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置.. 
如果内层的div(id为son的那个)position属性为relative,那它的left和top值就是相对于外层的div的左上角的距离. 


4.将重要元素放置在屏幕中央 
如果你希望将您想要的东西放在最中央，可以使用以下CSS： 

Java代码 
  1. div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}  
  2. div.popup { margin-top: -200px; margin-left: -250px;}  


您必须明确的指定宽度和高度，再把top和left属性设为他们的一半，这样就可以是这个部分回到屏幕的中心。 


5.可以重复利用的规则 

Java代码 
  1. .left {float: left;}  
  2. .right {float: right;}  
  3. img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}  
  4. img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}  


设置自己的CSS样式表，就可以在您需要的时候直接的添加标记即可。 
 


6. 解决IE6 的浮动元素的双倍边距问题 
对一个div设置了float:left 和 margin-left:100px 那么在IE6中，这个bug就会出现。您只需要多设置一个display即可，代码如下： 

Java代码 
  1. div {float:left;margin:40px;display:inline;}  




7.简单的导航菜单 
在您的设计中预设一个导航栏是非常有益的。可以让别人对你网页的主要内容有一个大致的了解。第一次来的XHTML： 

Java代码 
  1. <div id=”navbar”>  
  2. <ul>  
  3. <li><a href=”http://www.peakflowdesign.com”>Peakflow Design</a></li>  
  4. <li><a href=”http://www.google.com”">Google</a></li>  
  5. <li><a href=”http://zenhabits.net/”>Zen Habits</a></li>  
  6. </ul>  
  7. </div>  


CSS代码： 

Java代码 
  1. #navbar ul li {display:inline;margin:0 10px 0 0;}  
  2. #navbar ul li a {color: #333;display:block;float:left;padding:5px;}  
  3. #navbar ul li a:hover {background:#eee;color:black;}  


  
8.不使用table的form表单 
正如我们现在进行网站设计的table-free，把重点是放在使用DIVs上。不再对表的列和域进行约束，所以我们需要一些好用的CSS，在JeddHowden.com 发现 

Java代码 
  1. XHTML:  
  2. <form action=”form.php” method=”post”>  
  3. <fieldset>  
  4. <legend>Personal Information</legend>  
  5. <div>  
  6. <label for=”first_name”>First Name:</label>  
  7. <input type=”text” name=”first_name” id=”first_name” size=”10″ value=”" />  
  8. </div>  
  9. <div>  
  10. <label for=”last_name”>Last Name:</label>  
  11. <input type=”text” name=”last_name” id=”last_name” size=”10″ value=”" />  
  12. </div>  
  13. <div>  
  14. <label for=”postal”>Zip/Postal Code:</label>  
  15. <input type=”text” name=”postal” id=”postal” size=”10″ value=”" />  
  16. </div>  
  17. </fieldset>  
  18. </form>  



Java代码 
  1. CSS:  
  2. form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}  
  3. form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}  



9.让footer总是停留在页面的底部 
在网页的底部总是保留着公司的版本信息，如何是这部分信息来实现呢？这是一个很古老的技术，这都要归功于The Man in Blue 。 

Java代码 
  1. XHTML：  
  2. <body>  
  3. <div id=”nonFooter”>  
  4. <div id=”content”> *Place all page content here* </div>  
  5. </div>  
  6. <div id=”footer”> *Place anything you want in your footer here*  
  7. </div>  
  8. </body>  

 

Java代码 
  1. CSS:  
  2. html, body { height: 100%; }  
  3. #nonFooter { position: relative; min-height: 100%; }  
  4. * html #nonFooter { height: 100%; }  
  5. #content { padding-bottom: 9em; }  
  6. #footer { position: relative; margin-top: -7.5em; }  


10.在同一元素上使用多种类 
随着有用的功能越来越多的，大多数的人都忽略了内部CSS的选择。一个元素可以套用很多的类，例如： 

Java代码 
  1. .red {color: red;}  
  2. .bold {font-weight: strong;}  


我们可以运用它： 

Java代码 
  1. <p class=”red bold”>This text will be red yet also bold!</p>  


希望这些能对您有所帮助！ 

分享到：
| 负边距(negative margin)的相关问题整理
评论
发表评论

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

相关推荐

    css最常用和实用的技巧.docx

    【CSS最常用和实用的技巧】 1. **重置浏览器默认样式** 为了消除不同浏览器之间的默认样式差异，通常会使用CSS重置或者normalize.css。例如，上述代码中的雅虎用户界面重置方案，清除了大部分元素的边距、填充、...

    css实用的技巧 css css

    1. **CSS经典技巧20条总结**：这个文档可能包含了20个经过实战检验的CSS技巧，包括选择器的高效使用、浮动和定位的解决策略、动画和过渡的应用等。 2. **CSS实用教程**：可能涵盖了基础到进阶的CSS知识，如盒模型...

    CSS的常用技巧

    通过掌握这些CSS的常用技巧，你将能够更高效地编写出优雅、易于维护的CSS代码，提升网页设计的质量和用户体验。持续学习和实践是成为CSS大师的关键，不断探索新的技术和最佳实践，才能在网页设计领域保持领先。

    html和css 常用

    在实际开发中，还需要了解各种工具和技巧，如Photoshop切图技巧、CSS预处理器的使用、浏览器兼容性处理、性能优化等。这些知识点为前端开发者提供了强大的工具箱，帮助他们构建出美观、高效、易维护的网页。

    css 常用公共样式 样式总结（持续更新）

    本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先，让我们来谈谈`flex布局`。Flex布局，全称为 ...

    CSS常用优化技巧

    ### CSS常用优化技巧详解 #### 一、使用CSS缩写 使用CSS缩写不仅可以帮助减少CSS文件的大小，还能让代码更容易阅读。虽然具体的CSS缩写规则不在本文详细阐述范围内，但简要介绍一些常见的CSS缩写方法是有益的。 1...

    CSS的常用技巧放送

    以下是一些关键的CSS技巧： 1. **使用CSS缩写**：通过使用缩写，如`margin: 0 auto;`代替`margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;`，可以减少代码量，提高文件加载速度，并使...

    CSS兼容常用技巧

    本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧，供大家参考。　CSS兼容常用技巧

    常用的css模板css

    本资源包"常用的css模板css"提供了多种CSS模板和布局，方便开发者快速构建网页结构。 1. **CSS模板**：CSS模板是预设的样式代码集合，通常包含一套完整的颜色方案、字体样式、布局结构等。这些模板可以快速应用到...

    CSS全攻略与CSS实用常用参考源码特效实例

    本资料包“CSS全攻略与CSS实用常用参考源码特效实例”是为帮助开发者深入理解和掌握CSS而精心编排的资源集合，旨在提供全面的指导和丰富的实践案例。 首先，我们来看看“CSS全攻略”部分。这部分内容通常会涵盖以下...

    CSS常用的十几个技巧

    以下是一些常用的CSS开发技巧，对于初学者和经验丰富的开发者来说都十分实用。 1. **使用css缩写**： 缩写CSS属性可以减少代码量并提高可读性。例如，`margin`、`padding`、`font`等都可以缩写，如`margin: 0 auto...

    25个高级CSS技巧教程

    在深入探讨这25个高级CSS...通过学习和掌握这些高级CSS技巧，你可以大大提升网页设计的视觉效果和用户体验，使你的作品在众多网页中脱颖而出。无论是初学者还是有经验的开发者，都能从中找到灵感和提升自我技能的机会。

    400个超实用的CSS代码段

    【标题】"400个超实用的CSS代码段"是一个集合了大量实用CSS技巧和样例的资源，旨在帮助开发者提升网页设计和布局的能力。CSS（层叠样式表）是网页设计的核心技术之一，用于定义HTML或XML（包括如SVG、MathML等各种...

    超实用css代码集合

    "超实用css代码集合"是针对初学者和开发者的一个资源包，它包含了大量常用且实用的CSS代码片段，帮助你快速实现各种页面样式效果。下面，我们将深入探讨这些CSS知识点。 首先，基础选择器是CSS的核心，包括类选择器...

    CSS3常用方法

    ### CSS3常用方法详解 #### 一、选择器与路径优化 - **Class选择器**：在多数情况下，推荐使用`class`选择器而非`id`选择器，以提高代码的复用性。同时，避免选择器路径过长，通常不超过3个层次，这样可以减少选择...

    Html+Css技巧

    这份“Html+Css技巧”的压缩包资料显然包含了丰富的学习材料，帮助我们掌握这两种语言的高级技巧，提升网页设计的效率和效果。下面，我们将深入探讨这些知识点。 首先，HTML是网页的基础，用于定义网页内容的结构。...

Magicbox
Global site tag (gtag.js) - Google Analytics