CSS 应用示例CSS 应用示例

CSS导航栏

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

水平导航栏

上面的示例给出了导航的基本元素，但是样式看起来并不美观，我们可以通过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;

结果：

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 代码，我们创建了一个自适应的网站布局，会根据屏幕宽度切换两列与全宽列：

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/59552.html

javaphp平板电脑