`
neeleon
  • 浏览: 181622 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

推荐3个所谓的“顶级”CSS技巧!

    博客分类:
  • CSS
阅读更多

一、在一行内声明CSS

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
  h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 
  h2 { 
  font-size:18px; 
  border:1px solid blue; 
  color:#000; 
  background-color:#FFF; 
  } 


  第二种看起来的确格式化,但是不会在阅读上有任何帮助。写在一行内可以让你更快的找到需要的部分。
  以前我也是写成类似第二种方式,但是逐渐发现就像文章说的一样,没多大用。一行看起来又爽快又省地方还能让文件更小。

二、分块书写代码

  这样书写代码可以让CSS更页面化,在出现问题时候可以最短时间内找到问题所在。就像下面这样:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
  #content {float:left;} 
  #content p { … } 
  #sidebar {float:left;} 
  #sidebar p { … } 
  #footer {clear:both;} 
  #sidebar p { … } 


三、浏览器兼容问题

  只支持最新的浏览器。也就是说要放弃IE5和IE5.5。这样一来就能省下很多时间。对于IE6来说不用使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。
  我注意了一下网易新版主页的CSS,其中竟然一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。
  包含浮动元素所有在容器内的内容都应该被设计为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。
  理解Overflow如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。

分享到:
评论

相关推荐

    邮件css web css 手机css!

    邮件css web css 手机css!邮件css web css 手机css!邮件css web css 手机css!

    25个高级CSS技巧教程

    在深入探讨这25个高级CSS技巧之前,我们先来理解一下CSS本身及其在现代网页设计中的重要性。CSS,即层叠样式表(Cascading Style Sheets),是一种用来描述HTML或XML文档如何呈现的样式语言。随着互联网的发展,CSS...

    css排版技巧 实用

    ### CSS排版技巧详解 #### 一、引言 随着网页设计标准的不断提升与浏览器兼容性的改善,越来越多的网站设计者开始放弃传统的表格布局方法,转而采用更加灵活且易于维护的CSS(层叠样式表)进行网页排版。本文将...

    css常见考题 !!css常见考题 css常见考题

    ### CSS常见考题知识点解析 #### 一、DOCTYPE与CSS兼容性问题 ...以上内容涵盖了CSS面试中常见的几个考点,包括但不限于DOCTYPE声明、元素居中、盒模型处理、链接状态样式顺序等,希望对你有所帮助。

    css3学习资料!!自己私藏面试整理

    为了分吧自己的收藏拿出来了!来自印象笔记的资料本!全程干货!前端面试最全的CSS分类!看一下 终身受益!还有其他资源!

    css实用的技巧 css css

    9. **CSS3的新特性介绍**:可能涵盖了CSS3的新功能,如阴影、渐变、过渡、动画、多列布局、伪元素和伪类、选择器增强等。 10. **CSS产生的特殊效果**:这部分可能涉及利用CSS实现的各种视觉效果,如旋转、倾斜、...

    CSS hack技巧大全

    5. \0后缀:`\0`在IE8及更高版本、Safari 3.1+、Chrome 1+中识别,针对CSS3的兼容。 6. @media screen and (-webkit-min-device-pixel-ratio:0):这是一个WebKit专有的媒体查询,适用于Safari和Chrome。 7. `x:-moz-...

    20个非常实用的CSS技巧

    上述技巧不仅涵盖了基础的样式应用,还包括了对现代CSS技术的运用,如flexbox布局和CSS3的过滤器(filter)。这些技巧通常用于改善网站的设计感和用户体验,增强页面的可维护性,同时减少代码冗余。在实际开发中,...

    css课件+CSS2中文手册+CSS 速成手册+css技巧

    本压缩包包含了关于CSS的丰富学习资源,包括“CSS2中文手册”、“CSS 速成手册”、“css技巧”和“css课件”。 首先,我们来看“CSS2中文手册”。这是一份详细阐述CSS2规范的文档,CSS2是CSS的第二个主要版本,发布...

    上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合

    7. **过渡与动画**:CSS3引入了过渡(Transition)和动画(Animation),它们让元素在状态改变时产生平滑效果,增强了用户体验。 8. **伪类和伪元素**:伪类如`:hover`、`:active`、`:focus`等,用于添加动态效果;...

    css-protips, 帮助你掌握CSS技巧的技巧集合.zip

    css-protips, 帮助你掌握CSS技巧的技巧集合 CSS Protips 帮助你掌握CSS技巧的技巧集合。对于其他优秀列表,请查看 @sindresorhus curated curated列表awesome列表。 table-内容Protips支持插件翻译工具

    CSS设计彻底研究详细介绍了css 设计技巧 (ppt)

    第3章深入讲解了CSS的核心机制——盒子模型,这是理解布局的关键。第4章和第5章分别讨论了浮动和定位,这两点是布局中的难点和重点,以及文字和图像的排版技巧。 第6章至第9章涉及链接和导航的设置,以及不同类型的...

    20个初学者实用的CSS技巧

    标题中的“20个初学者实用的CSS技巧”是指针对CSS初学者的一系列技术要点,旨在帮助他们快速掌握CSS的基本应用。这些技巧涵盖了从解决浏览器兼容性问题到优化代码效率,以及实现各种视觉效果的各个方面。 描述中...

    CSS使用技巧的word文档

    本文档提供了几个实用的CSS使用技巧,帮助开发者更高效地控制页面样式。 1. 文字水平居中:通过设置`text-align`属性为`center`,可以实现一段文字在容器内的水平居中对齐。 ```css text-align: center; ``` 2. ...

    css技巧描述文档

    css技巧描述文档

    css技巧.rar

    而《A5下载- 更全的站长资源平台.url》则是一个链接,可能指向一个网站,该网站提供了更多的网页制作资源,包括其他CSS教程、模板、工具等,对于进一步学习和寻找灵感非常有用。 通过深入学习和实践这些CSS技巧,你...

    CSS-技巧记录CSS-技巧记录

    在CSS(层叠样式表)领域,掌握一系列实用技巧能够帮助开发者更高效地设计和维护网页样式。以下是一些关键的CSS技巧,这些技巧在实际工作中非常常见且实用。 1. **选择器优化**:使用类选择器(.class)和ID选择器 ...

    CSS 设置技巧(单位和值与样式设置技巧)

    【CSS 设置技巧(单位和值与样式设置技巧)】 在CSS中,设置合适的单位和值是创建美观且响应式布局的关键。以下将详细介绍颜色值、长度单位以及样式设置技巧。 一、颜色值 1. 英文命令颜色:最基础的颜色设置方式,...

    20 个 CSS 高级技巧汇总(推荐)

    CSS3引入了许多新的选择器和属性,比如`::before`和`::after`伪元素、`box-sizing`属性、以及各种过渡和动画效果。掌握了这些技巧,开发者可以更灵活地控制页面元素的表现,实现更加丰富的视觉效果,同时也能提升...

    10 个有用免费 CSS3 强大工具

    在现代网页设计中,CSS3(层叠样式表第三版)已经成为了不可或缺的一部分,它带来了丰富的样式、动画和布局功能,极大地提升了用户体验。本篇文章将详细介绍10个免费且强大的CSS3工具,这些工具能够帮助开发者更高效...

Global site tag (gtag.js) - Google Analytics