<ul><li>Read emails</li><li>Write chapter</li><li>Go shopping</li><li>Cook dinner</li><li>Watch Lost</li>
</ul>
<style type="text/css">
ul {margin: 0;padding: 0;width: 20em;list-style-type: none;        //关闭项目符号
}li {background: url(img/tick.png) no-repeat 0 50%;   //项目符号垂直居中padding-left: 30px;
}
</style>

<ul class="nav"><li class="selected"><a href="home.htm">Home</a></li><li><a href="about.htm">About</a></li><li><a href="services.htm">Our Services</a></li><li><a href="work.htm">Our Work</a></li><li><a href="news.htm">News</a></li><li class="last"><a href="contact.htm">Contact</a></li>
</ul>
<style type="text/css">
ul.nav {margin: 0;     //外边距设置为0padding: 0;    //内边距设置为0width: 8em;   //设置福列表的宽度，代码更容易维护list-style-type: none;     //去掉默认的项目符号background-color: #8BD400;    //设置浅绿色背景border: 1px solid #486B02;     //设置深绿色的边框border-bottom: none;
}ul.nav li {display: inline; /* 在IE6上列表项下添加了额外的空间，所以需要在列表项上设置display为inline*/
}ul.nav a {display: block;        //创建与按钮相似的单击区域color: #2B3F00;    //设置链接文本的颜色text-decoration: none;      //关闭下划线border-top: 1px solid #E4FFD3;  //为创建斜面效果，顶边框设置比背景浅border-bottom: 1px solid #486B02;//为创建斜面效果，顶边框设置比背景深background: url(img/arrow.gif) no-repeat 5% 50%;      //列表项前面的图标，及位置padding: 0.3em 1em;
}ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {color: #E4FFD3;background-color: #6DA203;
}
</style>

<ol class="pagination">//rel属性表示结果集中的前一个和下一个页面，规定当前文档与被链接文档之间的关系<li><a href="search.htm?page=1" rel="prev">Prev</a></li> <li><a href="search.htm?page=1">1</a></li><li class="selected">2</li><li><a href="search.htm?page=3">3</a></li><li><a href="search.htm?page=4">4</a></li><li><a href="search.htm?page=5">5</a></li><li><a href="search.htm?page=3" rel="next">Next</a></li>
</ol>
<style type="text/css">
body {font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;font-size: 1.4em;margin-top: 4em;
}ol.pagination {margin: 0;      //去掉外边距padding: 0;     //去掉内边距list-style-type: none;     //去掉列表样式
}
//让列表水平排列而不是垂直排列，可以将display属性设置为inline，但是对于比较复杂的水平列表样式，如果浮动列表项，然后使用外边距把它们分开，会更灵活。
ol.pagination li {float: left;         //向左浮动margin-right: 0.6em;      //设置右外边距
}ol.pagination a,
ol.pagination li.selected {   //对列表项应用样式display: block;padding: 0.2em 0.5em;border: 1px solid #ccc;     //设置边框text-decoration: none;   //去掉下划线
}ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected {       //当鼠标悬停在链接上时，应用不同样式background-color: blue;  color: white;
}ol.pagination a[rel="prev"],      //对于prev和next链接应用不同的样式
ol.pagination a[rel="next"] {border: none;    //去掉边框
}ol.pagination a[rel="prev"]:before {   //在列表的前面加箭头content: "\00AB";     //“00AB”添加双左箭头padding-right: 0.5em;
}ol.pagination a[rel="next"]:after {       //在列表的后面加箭头content: "\00BB";   “00BB”添加双右箭头padding-left: 0.5em;
}
</style>

<ul class="nav"><li class="first"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">News</a></li><li><a href="#">Products</a></li><li><a href="#">Services</a></li><li><a href="#">Clients</a></li><li><a href="#">Case Studies</a></li>
</ul>
<style type="text/css">
body {font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background-color: #fff;
}ul.nav {margin: 0;padding: 0;overflow: hidden;     //清理li浮动造成的父元素高度为0width: 74em;      //设置整个导航条的宽度background: #FAA819 url(img/mainNavBg.gif) repeat-x;   //以重复的橘红色渐变作为背景list-style: none;text-transform: uppercase;     //让链接全部大写
}ul.nav li {float: left;          //利用浮动让列表垂直显示white-space: nowrap;   //    文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
}ul.nav a {display:block;  //让链接表现的像按钮padding: 0 2.96em;line-height: 2.1em;     //使用行高让链接文本垂直居中background: url(img/divider.gif) repeat-y left top;     //在链接之间创建分隔线，可以通过在列表项或锚上设置水平边框。为简单，在锚链接应用一个背景图像text-decoration: none;   //关闭下划线color: #fff;         //链接颜色设置为白色
}ul.nav a:hover ,
ul.nav a:focus {       //设置翻转状态color: #333;
}ul.nav li:first-child a {     //去掉第一个链接不必要的分割线background: none;
}
</style>

<ul id="mainNav"><li class="first"><a href="#">Home</a></li><li><a href="about.htm">About</a></li><li><a href="news.htm">News</a></li><li><a href="products.htm">Products</a></li><li><a href="services.htm">Services</a></li><li><a href="clients.htm">Clients</a></li><li><a href="casestudies.htm">Case Studies</a></li>
</ul>
<style type="text/css">
body {font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background-color: #fff;
}ul {margin: 0;padding: 0;overflow: hidden;     //清除li浮动width: 72em;list-style: none;text-transform: uppercase;
}ul li {float: left;      //向左浮动，以产生水平效果background: url(img/tab-right.gif) no-repeat top right;      //应用right背景图像，形成标签页的右边缘
}li a {display: block;     //让锚显示为块级元素使得整个区域可单击padding: 0 2em;line-height: 2.5em;     //设置行高控制高度，宽度由内容的宽度控制background: url(img/tab-left.gif) no-repeat top left;  //应用left背景，并向左对齐。   当标签页改变尺寸时，这个图像总是对准左边，盖在大图上面，盖住左边的硬边缘text-decoration: none;color: #fff;float: left;       //确保这种技术在Mac上的IE 5.2中有效
}ul a:hover {    //创建翻转效果color: #333;
}
</style>

<ul class="nav"><li><a href="/home/">Home</a></li><li><a href="/products/">Products</a><ul><li><a href="/products/silverback/">Silverback</a></li><li><a href="/products/fontdeck/">Font Deck</a></li></ul></li><li><a href="/services/">Services</a><ul><li><a href="/services/design/">Design</a></li><li><a href="/services/development/">Development</a></li><li><a href="/services/consultancy/">Consultancy</a>        </li></ul></li><li><a href="/contact/">Contact Us</a></li>
</ul>
<style type="text/css">
body {font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;font-size: 1.4em;margin-top: 4em;
}ul.nav, ul.nav ul {     //给所有的（包括嵌套的）列表设置外边距等等margin: 0;padding: 0;list-style-type: none;float: left;      //清除li的浮动，其中的一个办法是让父元素也浮动border: 1px solid #486B02;background-color: #8BD400;
}ul.nav li {float: left;    //产生水平效果width: 8em;   //设置宽度
}ul.nav li ul {width: 8em;  //与列表的宽度相等position: absolute;     left: -999em;     //将嵌套的ul隐藏在屏幕左边之外margin-left: -1px;
}.nav li:hover ul {      //添加鼠标悬停伪选择器left: auto;       //使得下拉菜单的位置改回正常位置，这样下拉菜单就会重新出现
}
/*把导航链接设置为块级元素，修改列表外观，设置背景颜色和斜面边框*/
ul.nav a {display: block;color: #2B3F00;text-decoration: none;padding: 0.3em 1em;border-right: 1px solid #486B02;border-left: 1px solid #E4FFD3;
}ul.nav li li a {border-top: 1px solid #E4FFD3;border-bottom: 1px solid #486B02;    border-left: 0;border-right: 0;
}ul.nav li:last-child a {border-right: 0;border-bottom: 0;
}ul a:hover,
ul a:focus {color: #E4FFD3;background-color: #6DA203;
}
</style>