`
neeleon
  • 浏览: 184750 次
  • 性别: 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...

    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的高级特性,如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 设置技巧(单位和值与样式设置技巧)

    【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文件...

    div+css技巧

    ### div+css技巧详解 #### 一、div+css主流开发与前台页面布局设计 div+css是目前网页设计中最常用的布局方式之一,它能够帮助前端开发者构建出响应式、可维护性强且易于修改的网站界面。div作为HTML中的一个容器...

    reset.css 目前最好的css重置版本!

    css重置是很重要的东西. reset.css 目前最好的css重置版本!

    精通CSS css教程

    精通CSS!!!!!!!!!!!!!!!!

    css高级应用与技巧

    css高级应用与技巧css高级应用与技巧css高级应用与技巧

Global site tag (gtag.js) - Google Analytics