标签：font 浮动 bad graph 灰色 不同的 复杂 bdc 处理
首先我们来看一下现在所做到的效果以及我们的理想效果。
我们发现标签栏的左上角的部分，我们已经完成了。 在标题栏这一层，还有右上角的部分需要我们完成。其实完成这部分就很容易了，我们来到sublime中实现以下。
其实右上角的内容是可以被点击的，所以我们使用超链接标签，也就是a标签，但是a标签是需要配合其他属性使用的。否则的话并不会有什么效果。那我们现在先写上（就像上图左边红框我写的那样），写完之后，我们发现在上图的右边就多出来我们写的内容了。但是这个效果跟我们理想效果还差很多，这个不急，我们慢慢来处理。
我们现在来分析一下跟理想效果的差距。
首先是位置，我们理想效果的位置是靠右侧的，你能想到怎么办？
其次是文字颜色，理想效果的文字颜色是偏浅灰色，这个肯定不难。
那我们就实际用代码实现一下。
要想让文字靠右，就使用我们上节课所学的浮动float:right;，文字颜色就使用color:井999999就达到效果了，我们发现上图的右侧致蓝鸥人已经很接近我们想要的效果了。
那么还差愿景、邮件联系，我想大家应该能知道怎么做了。其实很简单的一个方法就是将致蓝鸥人的样式拷贝一份，给愿景以及邮件联系就好了，因为他们的样式是如出一辙，没有什么不同的地方。
但是我们说我们不要拷贝，我们来分析一下为什么不要拷贝。
我们所写的网页代码其实也算是一种程序设计，在程序设计里有一个大家广泛所接受的一个理念，叫做Don‘t repeat yourself, 就是不要重复自己，简称DRY，是三个单词的首字母。
如果我们把刚刚的样式拷贝两份给另外两个标签其实就是在重复自己。大家可能会想，重复自己或者说拷贝有什么坏处吗？也就是几秒钟的事，没什么大不了的。我们现在来说说重复代码的危害。
重复代码的原因，就是很多地方都是类似的设计思路。我们希望他们本来就是一样的，比如说我们整个网站的按钮都是一个样式，这样的话就会比较统一，方便用户理解。
假如写的是重复的代码，然后有一天需要统一修改按钮的样式，将按钮颜色从黄色按钮改成红色按钮。如果都得改，要是一两处也就算了，要是上千处怎么办，是不是就傻了，而且还容易遗漏。所以我们说不要重复。我们在来看看DRY的好处。
DRY的好处在于把代码抽离出来，抽离出来之后，如果需要修改，那么我就改一个地方，其他就都好使了，更便于我们的维护。
我们说DRY这么好，该如何实施呢? 如何把重复的代码抽离出来，我们通过例子来展示。
我们就拿我们遇到的问题来举例， 刚刚我们在sublime中已经为致蓝鸥人添加了样式，那么最笨的方法其实就是给这三个a标签都添加相同的样式。 比如：
上图其实就是每个a标签都有相同的样式，我们说重复不好。我们需要抽离代码。那么怎么抽离呢？
首先不管三七二十一，我们先把重复的部分拿出来，不仅拿出来而且还把缩写的样式套在一起，我们说他是一套样式， 然后在给他起个名字叫nav。 那这个时候其实就不重复了，没有写三遍，只有一套。
a标签就说我需要nav这个样式，另外两个a标签也说需要nav这个样式。
这样的话三个a标签就跟nav 产生了关联，产生了关联之后，就达到我们期望的要求了，既不重复，同时三个标签页能用同样的样式，这也是两全其美的方法。
那么现在我们说说怎么实施这个方法。
具体的实施方案就分为两步： 第一步就是写一套公用的样式， 第二步表示引用这个公用样式。那我们先说第一个。
我们要想写一套公用的样式，首先要给他开辟一块区域，因为我们需要将代码抽离出来，写在哪里呢？
我们要写在head标签里，此时的head标签里已经有了一个meta标签，那我们就在meta标签的下面写。
我们首先写一对style标签，style就是我们的样式，这样就算是有了地方干事了。
但是这个时候，事还没完，我们有地方写样式了，就得往里面填东西了。
我们在style的首标签中要加一个属性，属性名是type（类型），属性值是“text/css”。text就是文本文字的意思，代表我们里面写的内容都是文本型。那么css是什么呢？
css其实就是Cascading Style Sheet的一个缩写，Cascading是层叠的意思，我们在这里先不解释，为了避免大家造成理解上的障碍，style sheet表示的是一个样式表单，里面有很多很多的样式。
接下来才是我们的重头戏。
我们先把首标签和尾标签中间空出来一块区域，中间就要写一些内容了，那写什么呢？
是这样的一个格式，首先要有一个点"."，这个"."很重要，然后写这套样式的名字，这个名字大家可以随便起，但是有一点需要注意的是，第一个字符不能是数字， 后边跟两个大括号，在两个大括号里写我们需要的样式就好了 。 也就是我们上面图片的样式。 我们在通过一个例子给大家展示一下。
在style的首尾标签之间写.nav然后大括号，中间写color:#999999。 这里其实就是写了文字颜色的一个样式。 我们可以按照这个格式写，如果内容不是很复杂我们也可以这么写。
内容较少，看起来也不麻烦，我们就写在一行，看起来就比较简洁了。
在这里我们有一个关键词class, class是什么意思呢？
class在当前的语境下就是类的意思，就是一套公用样式的意思。这个东西怎么写呢？怎么把它写到我们的标签元素上去呢？
我们还是要先解释class, class其实是一种属性，既然是一种属性，所以我们就应该知道该怎么写了。就是属性名称=“属性值”。我们以a标签举例：
a标签中写class="nav"，这样我们就引入了我们所定义的样式。但是这里需要注意的是，此时的nav并没有点。也就是说，在设置样式的时候是需要点“.”的，但是引用的时候就不需要了。
以上就是我们今天所学习的内容，我们来总结一下今天所学习的内容。
我们这节的主要目标就是将致蓝鸥人、愿景、邮件联系添加上来，但当我们使用a标签把内容添加上来之后，我们发现样式不对。所以我们需要给这三个标签添加样式，在添加样式的时候，我们说一点非常重要的理念，那就是DRY，不要重复自己。
至于该如何不要重复自己，我们分为两步，第一步是开辟一个空间来写一套公用的样式。第二步就是引用这套公用的样式。
标签：font 浮动 bad graph 灰色 不同的 复杂 bdc 处理
原文地址：http://www.cnblogs.com/hemiah/p/7371486.html
