分类目录归档：CSS

css学习笔记 9:简单的标签式导航条

发表于 由
回复

先看看最终效果：

这种带圆角框的标签式导航条的作法是：用一个右对齐的大图像和一个左对齐侧边图像，侧边图像盖在大图像左边，这样就实现了两个顶角是圆角创建标签页效果，并且，宽度可随着文字多少而展开。
和前面的水平导航条一样，先写出列表的HTML结构：

继续阅读 →

css学习笔记 8:水平导航条

发表于 由
回复

有了前面做垂直导航条的经历，水平垂直导航条也就更容易了。还是一步步来……
先写出HTML结构:

【0】最前面设置全局字体

body {
  font-family: "Myriad Pro", Frutiger, "Lucida Grande",
"Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 1em;
}/*------*/

继续阅读 →

css学习笔记 6:垂直导航条

发表于 由
回复

先写出HTML结构:

【1】去掉去掉列表前面的符号并且将空白和填充设置为0 …

ul{
  /*因IE和Opera使用左空白控制列表缩进,而Firefox使用左填充,
所以先将margin和padding设置为0*/
  margin:0;
  padding:0;
  list-style-type:none;
}

【2】将链接按钮化，所以需要将锚的display属性设置为block，并指定按钮的宽及高 继续阅读 →

css学习笔记 5:简单的纯CSS提示框

发表于 由
回复

先写出HTML结构:




Andy Budd(This website rocks)
is a web developer based in Brighton England.

上面的代码中，将锚设置类名为tooltip，是为了区别其它不需要提示框的锚。接着，需要将该锚的position属性设置为relative，这样才可验对span的内容进行绝对定位。同时不希望提示在最初时就显示出来，所以将它的display属性设置为none，经过这些分析，CSS可以这样写，并不难:) 继续阅读 →

css学习笔记 4:突出显示不同类型的链接

发表于 由
回复

突出显示外部链接

为了方便用户,可以在外部链接看起来不一样,如在外部链接旁边加一个小图标。使用[att^=val]属性选择器来实现这个效果：

a[href^="http:"]{background:url(images/outerLink.jpg)
 no-repeat right top;
padding-right:9px;margin-right:3px;}

如此一来，会突出显示所有以”http:”开头的外部链接，对于自己站点的链接不需要突出显示，所示还要删除外部链接图标。 继续阅读 →

css学习笔记 2:可视化格式模型

发表于 由
回复

框模型

框模型是CSS的基石之一，它指元素如何显示以及如何相互交互。页面上是每个元素被看做一个矩形框，这个框由元素的内容、填充（padding）、边框(border)和空白边(margin)组成。下面左图为正确的框模型，右图为的是IE专有的模型框。

IE的这种非标准模型框将padding纳入width计算，会造成一些问题。使用中，尽量回避它。 继续阅读 →