列表导航栏实例（02）——精美电子商务网站赏析

出处：http://www.gabbardhatchingeggs.com/

【准备工作】

一、如图示，创建网站框架：

二、reset.css文件参考内容：

/*YUI的CSS Reset
http://baike.baidu.com/view/5186496.htm
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{padding: 0;margin: 0;
}
table
{border-collapse: collapse;border-spacing: 0;
}
fieldset, img
{border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var
{font-weight: normal;font-style: normal;
}
ol, ul
{list-style: none;
}
caption, th
{text-align: left;
}
h1, h2, h3, h4, h5, h6
{font-weight: normal;font-size: 100%;
}
q:before, q:after
{content: '';
}
abbr, acronym
{border: 0;
}

【说明】

此css reset文件来自http://baike.baidu.com/view/5186496.htm，据说是YUI的CSS Reset，版本不详，有知道源文件出处的还望不吝赐教。

这个文件，在此处主要起作用的是{padding: 0; margin: 0;}，相当于取代了常用设置*{padding: 0; margin: 0;}。

三、引用图片

bg-header.jpg

bg-pattern.jpg

nav.png

【操作步骤】

一、效果

二、HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link href="css/reset.css" rel="stylesheet" type="text/css" /><link href="css/layout.css" rel="stylesheet" type="text/css" /><title>无标题页</title>
</head>
<body><div id="header"><ul id="nav"><li><a href="#" id="farm">Our Farm</a></li><li><a href="#" id="blog">The Blog</a></li><li><a href="#" id="shop">Shop</a></li><li><a href="#" id="info">Info & Extras</a></li><li><a href="#" id="contact">Contact Us</a></li></ul></div>
</body>
</html>

【说明】

本实例中，导航栏三个状态是在lay.css文件中的样式中，由背景图片nav.png实现的，列表中的列表项文字并没有显示出来，也许会在不支持样式表的掌上网络设备中显示吧。

三、CSS

/*- LET'S GET STARTED!
----------------------------------------------------------------------*/
body
{background: url(../images/bg-pattern.jpg);font-family: "adobe-garamond-pro-1" , "adobe-garamond-pro-2" , Georgia, "Times New Roman" , Times, serif;color: #6B5F51;font-size: 14px;
}a
{text-decoration: none;
}a:focus
{outline: none;
}/*- HEADER
----------------------------------------------------------------------*/
#header
{background: transparent url(../images/bg-header.jpg) repeat-x center top;overflow: hidden;
}/*- NAV
----------------------------------------------------------------------*/
#nav
{width: 847px;height: 112px;margin: 0 auto;z-index: 9999;position: relative;margin-top: 14px;
}
#nav li
{display: inline;
}
#nav li a
{display: block;position: relative;float: left;height: 112px;background: url(../images/nav.png);text-indent: -9999px;
}
#nav li a#farm
{width: 131px;margin-right: 40px;
}
#nav li a#farm:hover
{background-position: left -112px;
}
#nav li a#farm:active
{background-position: left -224px;
}
#nav li a#blog
{background-position: -171px top;width: 131px;margin-right: 41px;
}
#nav li a#blog:hover
{background-position: -171px -112px;
}
#nav li a#blog:active
{background-position: -171px -224px;
}
#nav li a#shop
{background-position: -344px top;width: 164px;margin-right: 33px;
}
#nav li a#shop:hover
{background-position: -344px -112px;
}
#nav li a#shop:active
{background-position: -344px -224px;
}
#nav li a#info
{background-position: -551px top;width: 131px;margin-right: 41px;
}
#nav li a#info:hover
{background-position: -551px -112px;
}
#nav li a#info:active
{background-position: -551px -224px;
}
#nav li a#contact
{background-position: -723px top;width: 130px;
}
#nav li a#contact:hover
{background-position: -723px -112px;
}
#nav li a#contact:active
{background-position: -723px -224px;
}

【说明】

1、这个样式表的主要技术是设置background-position属性，导航条5个链接3个状态共15个图片都做在了一张高度为3*112=336px的图片nav.png上，通过设置background-position 属性，也就是设置背景图像的起始位置，来截取不同的背景图片的。这些个起始位置是根据大致的计算，经过调整所得。

2、样式a，主要是去除连接文字默认的下划线；

3、样式a:focus，主要是去除点击链接时，由于获得焦点，而在链接图片周围显示的一个虚线方框；

4、a:active的效果，可以在点击链接时，按住鼠标不放，显示出来。

转载于:https://www.cnblogs.com/WestGarden/archive/2012/09/03/3138330.html

列表导航栏实例（02）——精美电子商务网站赏析相关推荐

列表导航栏实例（01）
[步骤1]无样式一.效果二.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...
列表导航栏实例（04）——精美模板赏析
[出处]http://www.instantshift.com/2009/09/29/99-high-quality-free-xhtmlcss-templates/ 一.效果二.HTML < ...
Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
layui导航栏页面滚动固定_网站建设页面导航如何降低用户寻找的时间
做为正确引导客户体验网站的莱单导航栏,从检索视角上而言,也起着关键的功效,莱单导航栏不但联系网站的外界,也联系着网站主页面及其别的网页,是全部网站的"管理中心",因此网站建设中莱单 ...
索引栏_网站导航栏如何设置才能促使网站SEO优化更好？
众所周知,网站导航是一个网站不可或缺的一部分,优质的网站导航栏不仅能够让访客知道自己的所在位置,还能提高访客的浏览效率,更好的提高用户体验,那么导航栏要怎样设置才能更有利于SEO优化呢?下面一起来了解 ...
CSS3：有雪花的导航栏实例
1.CSS3中带有渐变色背景色处理:(根据不同的) 参考链接:http://www.cnblogs.com/luckly-hf/archive/2011/11/14/2248149.html 2.带雪 ...
CSS技能点--垂直导航栏实例
点此查看所有教程.项目.源码导航文章目录 1. 背景 2. 实现过程 2.1 创建ul导航栏 2.2 优化列表样式 2.3 设置导航栏整体风格 2.4 优化超级链接样式 2.5 添加图标 2.6 ...
CSS导航栏实例详解
效果: 代码: <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; mar ...
Python Web前端实战案例——电商网站商品菜单导航栏
jQuery是一个快速.小巧.轻量级的.写的少.做的多.功能丰富的 JavaScript 库,是目前最流行的 JS 框架.利用它可以帮我们快速实现一些炫酷的效果. 目录 1 原理先知 2 思路概要 3 ...

列表导航栏实例（02）——精美电子商务网站赏析

列表导航栏实例（02）——精美电子商务网站赏析相关推荐

最新文章

热门文章