`
neeleon
  • 浏览: 186006 次
  • 性别: 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允许内容冲出容器。

分享到:
评论

相关推荐

    10几种CSS导航!!!!!

    通过学习和实践这些不同的CSS导航示例,初学者可以掌握导航设计的基本技巧,并逐步提升自己的网页设计能力。"cssmenu"文件名暗示了这个压缩包可能包含了多个不同的CSS导航菜单代码示例,可以下载后直接在项目中应用...

    原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖)

    原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖...

    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声明、元素居中、盒模型处理、链接状态样式顺序等,希望对你有所帮助。

    css9种设计技巧

    本文将详细介绍9种实用的CSS设计技巧,帮助提升网页的视觉效果和用户体验。 1. 取消下划线:在现代网页设计中,为了使链接看起来更简洁,常常会去除文本链接的下划线。这可以通过在CSS中设置`text-decoration`属性...

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

    为了分吧自己的收藏拿出来了!来自印象笔记的资料本!全程干货!前端面试最全的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技巧及常见问题

    在CSS(层叠样式表)的设计和开发过程中,掌握一些常见的技巧和理解常见的问题解决方案是至关重要的。以下是一些关于CSS的重要知识点: 1. **CSS缩写**:使用CSS缩写能够有效地减少代码量,提高页面加载速度。例如...

    CSS禅意花园!附带源代码!

    此外,还将有机会接触到CSS的高级特性,如CSS3的新选择器、渐变、阴影、动画和过渡效果等。 "CSS快速提高"这部分,强调了通过实践来提升CSS技能的重要性。通过分析和修改这些示例代码,我们可以快速掌握CSS的基本...

    10个顶级的CSS3代码生成器.docx

    以下是10个顶级的CSS3代码生成器的详细介绍: 1. **CSS3 Generator**:这是一个综合性的CSS3代码生成器,提供了不同类别如RGBa、transform、flexbox等的代码生成页面。每个生成器都有图标显示浏览器的支持情况,...

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

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

    20个初学者实用的CSS技巧

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

    css技巧.rar

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

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

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

    10 个有用免费 CSS3 强大工具

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

    10个你未必知道的CSS技巧

    【CSS技巧详解】 ...以上10个CSS技巧展示了CSS的灵活性和强大功能,掌握这些技巧可以显著提高CSS的编写效率和代码质量。在实际应用中,应结合具体需求灵活运用,确保在保持代码简洁的同时提供最佳的用户体验。

    分享一款黑色大气HTML5和CSS3模板!

    分享一款黑色大气HTML5和CSS3模板!美工非常不错 刚收集了两套设计非常不错的HTML5和CSS3模板,非常适合广告公司,设计公司,婚纱影楼,图片展示类等。 (模板包括可编辑的图像,PSD文件,HTML,JavaScript和CSS文件...

Global site tag (gtag.js) - Google Analytics