有些经典的CSS技巧，我们还是需要记住的，这样可以节省我们大量的时间，下面零度就为大家推荐几个比较好的CSS技巧：

1、在不同页面上使用同样的导航代码

许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。

首先，在导航代码中使用CSS类：

<ul> 
<li><a href="#" class="home">首页</a></li> 
<li><a href="#" class="about">关于我们</a></li> 
<li><a href="#" class="contact">联系我们</a></li> 
</ul>

然后分别为每一页的Body指定一个id，和上面类同名。如<body id="home">。

然后设计CSS如下：

#home .home, #about .about, #contact .contact 
{ 
commands for highlighted navigation go here 
}

这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

怎么样，是不是很简单呢？

2、Block和inline元素对比

所有的HTML元素都属于block和inline之一。block元素的特点是：
总是在新行上开始；
高度，行高以及顶和底边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是：
和其他元素都在一行上；
高，行高及顶和底边距不可改变；
宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？
让一个inline元素从新行开始；
让块元素和其他元素保持在一行上；
控制inline元素的宽度（对导航条特别有用）；
控制inline元素的高度；
无须设定宽度即可为一个块元素设定与文字同宽的背景色。

你必须要知道的几个CSS技巧的更多相关文章

  1. CSS技巧-rgba函数的妙用

    先简单介绍一下: rgba()函数是平时开发中经常遇到的,这篇文章也做了一个比较详细的解读以及一系列的应用. 对它的工作原理做一番分析:就是具有一定透明度的盒子: 还比较了rgba()函数和不透明度属 ...

  2. 经验分享：多屏复杂动画CSS技巧三则

    当下CSS3应用已经相当广泛,其中重要成员之一就是CSS3动画.并且,随着CSS动画的逐渐深入与普及,更复杂与细腻的动画场景也如雨后春笋般破土而出.例如上个月做的「企业QQ-新年祝福」活动: 感谢sh ...

  3. 多屏复杂动画CSS技巧三则(转载)

    本文转载自: 经验分享:多屏复杂动画CSS技巧三则

  4. 网页设计师必备的10个CSS技巧

    CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情.在CSS的深海世界里有很多有意思的东西,你只需要找到最适合你的就 ...

  5. 应该知道的25个非常有用的CSS技巧

    在我们的前端CSS编码当中,经常要设置特殊的字体效果,边框圆角等等,还要考虑兼 容性的问题, CSS网页布局,说难,其实很简单.说它容易,往往有很多问题困扰着新 手,在中介绍了非常多的技巧,这些小技巧 ...

  6. 20个很有用的CSS技巧

    导语:下面这几个CSS技巧你可能不知道,1.彩色照片变黑白,2.所有元素垂直居中,3.禁用鼠标,4.模糊文字,小编学完能量满满的,觉得对CSS又充满了爱,你也来看看. 1. 黑白图像 这段代码会让你的 ...

  7. 50个CSS技巧

    这里我工作中收集了10个很不错的CSS技巧,你可以用在你的项目上.它可以帮你很好地整理你的元素并让他们看起来蛮酷的.下面开始我们的内容,希望你会喜欢它.下面是我收集的CSS技巧,希望能帮助到你,感觉收 ...

  8. 最全的CSS浏览器兼容问题【CSS技巧 】

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  9. 10个网页设计师必备的CSS技巧（转）

    英文原文:10 Essential CSS Rules for Web Designers CSS是网页设计师的基础,对CSS的了解能使他们能够设计出更加美观别致的网页.使用CSS技巧来巧妙地处理CS ...

  10. 100个实用的CSS技巧，以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

随机推荐

  1. feign client传递对象

    http://bbs.springcloud.cn/d/134-feign-client server端申明 @RestController public class HelloController ...

  2. PostgreSQL Replication之第九章 与pgpool一起工作（5）

    9.5 检查复制 如果所有的节点都处于开机并运行的状态.我们就可以在集群上运行我们的第一个操作了.在我们的例子中,我们将简单地连接到pgpool并创建一个新的数据库.createdb 是一个命令行工具 ...

  3. Vuejs componet

    Vuejs  componet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. Linux下安装使用MySQL

    网上找那些安装教程比较多的版本,版本只要不是太旧就行. 下载mysql 5.6.28 通用版64位二进制版,二进制版相当于windows的安装包,可以直接安装,如果是源码版,还需要编译后再进行安装. ...

  5. HDU-1225 Football Score 模拟问题（水题）

    题目链接:https://cn.vjudge.net/problem/HDU-1225 水题 代码 #include <algorithm> #include <string> ...

  6. [Recompose] Pass a React Prop to a Stream in RxJS

    When you declare your Component and Props in JSX, you can pass those props along to your RxJS stream ...

  7. HDU 5391-Zball in Tina Town(数论)

    题目地址:pid=5391">HDU 5391 题意: Tina Town 是一个善良友好的地方,这里的每个人都互相关心.Tina有一个球,它的名字叫zball. zball非常奇妙, ...

  8. 在iPad iOS8环境下打开相冊或者拍照

    在iPad下打开相冊或者拍照,假设使用 UIImagePickerController 打开相冊或者拍照,那必需要用到 UIPopoverController 去打开. UIPopoverContro ...

  9. BestCoder 1st Anniversary ($) 1002.Hidden String

    Hidden String Accepts: 437 Submissions: 2174 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 26 ...

  10. 彻底解决lazarus安装组件后烦人的编译时单元找不到的问题!

    以安装indy为例 1/下载组件包, http://www.indyproject.org/Sockets/fpc/indy-10.2.0.3.zip 2/爆开放于C:\lazarus\compone ...