读书笔记--精通CSS高级Web标准解决方案（六）---无序列表样式

这部分讲解在web2.0中用得最多的ul已经li元素的CSS应用技巧。

1、基本列表样式

现在很少人直接用ul的内置样式，所以一般在使用ul的第一步就是去掉默认的ul样式，去左边的图标，去缩进：

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

2、创建基本的导航条

这个没什么好说的，比较简单，就是书上提到的一个小细节，如果把顶边框设置的比背景色浅，而让底边框深一点，就会实现一种斜面的立体效果。

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple List</title>
<style type="text/css">
<!--

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

ul.nav {
  margin: 0;
  padding: 0;
  width: 8em;
  list-style-type: none;
    float: left;
    background-color: #8BD400;
    border: 1px solid #486B02;
    border-bottom: none;
}

ul.nav li {
  display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}

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 .last a {
    border-bottom: 0;
}*/

ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
    color: #E4FFD3;
    background-color: #6DA203;
}


-->
</style>
</head>

<body>

<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>

</body>
</html>

3、在导航条中突出显示当前页面

书中的思路是导航条中每个导航按钮的class在各个页面中保持不变，但导航栏所在的页面是动态变化的，其body的id也是各不相同的，这样根据导航栏的body的id与导航栏按钮的class的匹配来决定导航栏按钮的样式。

#home .nav .home  a,
#about .nav .about a{
    /** 即在home页面的home导航栏按钮突出显示*/
}

4、简单的标签页式导航

标签页式导航的标签页一般是圆角的，所有其实现思路也和前面的圆角框类似，一般一个导航按钮时一个li元素嵌一个a元素，给li和a分别加不同背景图片，并且让右边的a的背景图盖在左边的li的背景图。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simplified Sliding Doors</title>
<style type="text/css">
<!--

/* Basic Styling
------------------------------------*/

body {
  font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  background-color: #fff;
}


/* mainNav
------------------------------------*/

ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 72em;
  list-style: none;
  text-transform: uppercase;
}

ul li {
  float: left;
  background: url(img/tab-right.gif) no-repeat top right;
}


/* Hack to make IE/Mac play nice */
li a {
  padding: 0 2em;
  line-height: 2.5em;
  background: url(img/tab-left.gif) no-repeat top left;
  text-decoration: none;
  color: #fff;
  float: left;
  display: block;

}

ul a:hover {
  color: #333;
}


-->
</style>
</head>

<body>

<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>

</body>
</html>

5、纯CSS下拉菜单

下拉菜单是目前用的最多的页面元素之一了，采用纯CSS也可以实现下拉菜单。其实现思路也是不复杂的：

两层ul，外层ul作为整个菜单，里层的ul放在li里面，作为下拉菜单

外层的ul以及其子元素进行浮动，已到达横向排列的效果

通过绝对定位将所有的下拉菜单移到屏幕外边

设置鼠标正在其上面的li的后代ul的不再偏移，从而显示下拉菜单（一般很难想到这种选择器）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Nav</title>
<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;
    border: 1px solid #486B02;
    background-color: #8BD400;
}

ul.nav li {
    float: left;
    width: 8em;
}

ul.nav li ul {
    position: absolute;
    width: 8em;
    left: -999em;
    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>
</head>

<body>

<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>

</body>
</html>

6、CSS图像映射

这部分内容不多描述，其实就是先定义一个ul及一系列的li，然后通过绝对定位，定位每个li的位置，从中我们可以知道，相同的html元素ul以及li，经过不同的CSS处理，可以以差异很大很大的形式展现在前台页面上，这也是CSS的魅力所在。

总结：

在这一节里面，发现很多之前感觉比较复杂的页面形式，都可以用很简单的方式给实现，个人觉得这就比爱因斯坦的质能公式一样，复杂的表象背后，往往都有一个简单的解。

posted @ 2013-05-03 23:27 ll2012 阅读(285) 评论(0) 收藏举报

刷新页面返回顶部

ll2012

读书笔记--精通CSS高级Web标准解决方案（六）---无序列表样式

公告