CSS学习之CSS网页制作的10个技巧

2016-02-19 23:39 9 1 收藏

今天图老师小编要向大家分享个CSS学习之CSS网页制作的10个技巧教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

1.marquee 滚动样式是IE独有的,FF不支持

2.css中的filter效果是IE的私有属性,同样所有的非IE浏览器都不认识的.

3.text-transform:capitalize 强制第一个字母大写;

  text-transform:lowercase 强制所有字母小写

  text-transform:uppercase 强制所有字母大写

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

4.按钮陷下去的效果

  a:hover { position:relative; top:1px; left:1px}

5.禁止内容换行与强制内容换行

  在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  禁止换行:white-space:nowrap

  强制换行:word-wrap: break-word; word-break: normal;

6.css在容器内的定位 #navigation { position:absolute; left:30px; top:5px}

7 文字环绕图片效果,只要在img标签上加上float:left.

  img { float:left}

8 当写了一个空div时,这个div在IE是有默认高度的,FF下没有。要取消默认高度,可以定义:

  div { witdh:100%; background:#ccc; ling-height:0}

9.区别relative和absolute

  Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

  Relative,CSS中的写法是:position:relative;  他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

10.区别display和visibility

display:none和visibility:hidden都可以隐藏一个元素

但visibility:hidden则相当把元素从页面中去除,其占用位置也将被删除。

而display:none只是隐藏了元素的内容,但其使用的位置空间仍然被保留。

来源:http://www.tulaoshi.com/n/20160219/1630318.html

延伸阅读
标签: Web开发
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化? CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。 Specifi...
标签: Web开发
本篇总结了一些css常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西。 一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位,比...
标签: Web开发
用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的! 一、IE边框若显若无,须注意,定是高度设置已忘记; 二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中; 三、三像素文本慢移不必慌,高度设置帮你忙; 四、兼容各个浏览须注意,默认设置行高可能是杀手; 五、独立...
标签: Web开发
你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,、...
标签: Web开发
如果你是一个CSS的初学者,那么这个教程资源汇总的文章,你有必要收藏起来。 想做网页,但面对复杂的 CSS 怕力不从心?不用担心,你所需要的仅仅是一些耐心,一些练习和一点点时间。不要拘泥于过分复杂的教程,从这 20个循序渐进的教程 开始吧。 开始之前 开始之前,再问自己一下为什么要学习CSS,它可以应用到网页设计的那些方面?下面...

经验教程

81

收藏

36
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部