CSSMM4E 笔记 - 2.09 - 美化网站的导航

链接的样式

下划线

• 完全删除下划线

  a {
    text-decoration: none;
  }

• 鼠标悬停时加下划线

  a {
    text-decoration: none;
    background-color: #F00;
  }
  a:hover {;
    text-decoration: underline;
    background-color: transparent;
  }

• 使用底边(border-bottom)

  a {
    text-decoration: none;
    border-bottom: dashed 2px #9F3;
  }

• 使用背景图片

  a {
    text-decoration: none;
    background: url(images/underline.gif) repeat-x left bottom;
    padding-bottom: 5px;
  }

创建按钮

使用 linear graidient, rounded corners, box/text shadows …
注意 :hover 时的状态.

使用图片

• Don’t forget no-repeat
• Control placement with background-postion
• Padding gives you room
• Use the pesudo-classes

选择加样式的链接

• 理解链接状态
  :linek, :visited, :hover, :active LoVe/HAte
• 目标不同的链接(站内、站外…)
  Usint .class or [href^="http"] or [href*="myweb.com"] …
• 用后代选择器分组链接

  nav a { font-family: Arial, sans-serif; }
  nav a:link { color: #F60; }
  nav a:visited { color: #900; }
  nav a:hover { color: #F33; }
  nav a:active { color: #B2F511; }

构建导航条

使用无序列表

<ul class="nav">
  <li><a href="index.html">Home</li>
  <li><a href="news.html">News</li>
  <li><a href="reviews.html">Reviews</li>
</ul>

• 删除项目符号
• 去掉padding & maring

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

竖排的导航条

1. 将链接 (a) 设置为块元素
2. 固定按钮宽度

   ul.nav a {
     display: block;
     width: 8em;
   }

横排导航条

使用display: inline & display: inline-block

1. 为无序列表创建样式删除padding, margin & bullet

   ul.nav {
     margin-left: 0px;
     padding-left: 0px;
     list-style: none;
     order-bottom: 1px dashed #000;
   }

2. 列表项为行内元素 (inline elements).

   ul.nav li {
     display: inline;
   }

3. 链接为行内快(inline-block)

   ul.nav a {
     display: inline-block;
     border: 1px dashed #000;
     border-bottom: none;
     padding: 5px 15px 5px 15px;
     background-color: #EAEAEA;
     text-decoration: none; 
     color: #333;
   }

使用 float 创建横向导航条

Pop-up Menus:
http://blog.teamtreehouse.com/create-simple-css-dropdown-menu
http://www.red-team-design.com/css3-animated-dropdown-menu
http://purecssmenu.com
https://css-tricks.com/drop-down-menus-with-more-forgiving-mouse-movement-paths

1. 浮动列表项Float the list items
2. 链接为块元素Add display: block; to the links
3. 格式化链接Style the links
4. 设置宽度Add a width
5. 溢出隐藏列表Add overflow: hidden; to the <ul> tag style

.nav {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 3px solid rgb(204, 204, 204);
  overflow: hidden;
}
.nav li {
  float: left;
}
.nav a {
  width: 12em;
  display: block;
  border: 3px solid rgb(204,204,204);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  padding: 10px;
  margin-right: 5px;
  background-color: rgb(95,95,95);
  background-image: -webkit-linear-gradient(rgb(175,175,175),rgb(95,95,95));
  background-image: -moz-linear-gradient(rgb(175,175,175),rgb(95,95,95));
  background-image: -o-linear-gradient(rgb(175,175,175),rgb(95,95,95));
  background-image: linear-gradient(rgb(175,175,175),rgb(95,95,95));
  text-decoration: none;
  color: white;
  text-align: center;
  font-family: Arial, Helvetica, sns-serif;
  font-weight: bold;
}

CSS样式 预下载轮转(Preloading Rollovers[轮转, 翻转])

1. 制作一张含有不同版本按键的图片
2. 计算从整张图片顶部到每张按钮顶部的长度

3. 为正常regular 链接创建样式. 使图片处于背景中得左上角

   a { background: #E7E7E7 url(image/pixy.png) no-repeat left top; }

4. 创建 :hover 样式

   a:hover { background-postion: 0 -39px; }

特殊链接的样式

• 站外链接

  a[href^='http']
  a[href*='://']
  a[href*='://']:not(a[href*='www.mysite.com'])

• 邮件链接

  a[href^='mailto']

• 特定文件类型的链接

  a[href$='.pdf']