CSS 应用示例

CSS导航栏

导航栏对于网站非常重要，可以让用户很快的找到对应的网站内容。网站上我们常见的当行栏一般有横向导航栏和纵向导航栏。如何用CSS在网站上实现这些导航栏效果呢，下面请看示例：

水平导航栏

CSS垂直导航栏

制作导航栏，通常会使用html中的<ul>标签和<li>标签来实现，例如：

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="/news">News</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="/about">About</a></li>
</ul>

上面的示例给出了导航的基本元素，但是样式看起来并不美观，我们可以通过CSS来设置其样式，让其看起来更好，更美观。

首先，我们去掉项目选向前的默认符号，然后在通过调整其内外边距来实现，例如一下的样式设置：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

样式解释：

• list-style-type: none; – 删除项目符号。导航条不需要列表项标记。
• 设置 margin: 0; 和 padding: 0; 删除浏览器的默认设置。

当然你还可以根据学习的CSS中知识来进一步调整导航的显示效果，例如颜色，鼠标悬停时的字体颜色背景颜色等等。

下拉式导航

下拉式导航也是我们常见的一种导航方式，鼠标悬停在顶级导航栏上，其二级导航会自动显示出来。

我们来看下面的示例：

CSS图片排列

将图片整齐的排列在网页上可以给用户提供更好的使用体验。通过CSS我们可以在网页上设置成图片廊的效果，对于图文展示也是一种不错的体验。

示例

黄色郁金香

红色郁金香

花花草草

花花草草

试一试

CSS聚合图片

对于一些比较小的图片，为了减少页面对服务器的请求，可以通过将一些图片按照一定的顺序防止在一张图片上，然后通过CSS的读取图片不同位置的方式来显示对应大图上的对应的具体小图片。

这种方式也是常常使用的一种图像拼合技术。

示例

使用CSS，我们可以做到只显示需要图像的一部分。
在下例中CSS指定显示 “img_navsprites.gif” 的图像的一部分：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

使用图像创建一个导航列表

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('images/img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('images/img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('images/img_navsprites.gif') -91px 0;}

CSS代码解析：

• #navlist{position:relative;} – 位置设置相对定位，让里面的绝对定位
• #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} – margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
• #navlist li, #navlist a{height:44px;display:block;} – 所有图像的高度是44px

现在开始每个具体部分的定位和样式：

• #home{left:0px;width:46px;} – 定位到最左边的方式，以及图像的宽度是46px
• #home{background:url(img_navsprites.gif) 0 0;} – 定义背景图像和它的位置（左0px，顶部0px）
• #prev{left:63px;width:43px;} – 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
• #prev{background:url(‘img_navsprites.gif’) -47px 0;} – 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
• #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
• #next{background:url(‘img_navsprites.gif’) no-repeat -91px 0;} – 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）

CSS图像悬停效果

现在，我们要向导航列表中添加悬停效果。

可以使用:hover 选择器来应用于导航链接上，实现悬停时加载对应样式的效果。

使用 img_navsprites_hover.gif 包含三幅导航图像和三幅用于悬停效果的图像：

因为这是一幅图像，而不是六个单独的文件，所以当用户将鼠标悬停在图像上时，不会有加载延迟。

我们仅添加三行代码来实现悬停效果：

#home a:hover{background: url('images/img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('images/img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('images/img_navsprites_hover.gif') -91px -45px;}

代码解析：

解析：

• 由于该列表项包含一个链接，我们可以使用：hover伪类
• #home a:hover{background: transparent url(images/img_navsprites_hover.gif) 0 -45px;} – 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px

CSS 网站布局

css如何定义网站布局呢，我们下面就以一个常见的网站布局为例进行讲解，通过该布局学习，你也可以学会自定定义设置自己的网站布局。

网站通常分为页眉、菜单、内容和页脚：

这是一个示例，你也可以根据该示例进行修改。

试一试

页眉

页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：

示例

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

结果：

页眉

导航栏

导航栏包含链接列表，以帮助访问者浏览您的网站：

示例

/* navbar 容器 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar 链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接 - 悬停时改变颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

结果：

• Link
• Link
• Link
• Link

内容

使用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

• 1-列布局（通常用于移动浏览器）
• 2-列布局（通常用于平板电脑和笔记本电脑）
• 3-列布局 （仅用于台式机）

我们将创建 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

示例

/* 创建三个相等的列，它们彼此相邻浮动 */
.column {
  float: left;
  width: 33.33%;
}

/* 在列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

试一试

不相等的栏

主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％：

示例

.column {
  float: left;
}

/* 左和右列 */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* 响应式布局 - 使三列堆叠，而不是并排 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息：

实例

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

结果：

响应式网站布局

通过使用上面的这些 CSS 代码，我们创建了一个自适应的网站布局，会根据屏幕宽度切换两列与全宽列：