Web前端之网页导航----豌豆荚

先上张原图

这是我做的

    做后基本一样，只是我没有写右边的文字。

  接下来我就说明下里面我遇到的知识点。

  ①豌豆荚是一个链接，只是用图片代替文字而已，里面重要的一句是text-indent: -9999px;意思是将文字缩进到左边网页外，再用一个logo的class用background替换背景。

  ②小细节border-bottom: 1px solid #DFDFDF;
  box-shadow: 0 0 3px rgba(0,0,0,0.15);这样会使导航灰色背景下面有一条颜色较深的灰线，是不是看上去更质感。

  ③border-radius: 3px 3px 3px 3px;圆角

1. 第一个值是水平半径。
2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
4. 值不允许是负值。 

   ④a {
  display: block;
  float: left;
  font-size: 12px;
  padding: 2px 11px;

}看原网页导航中，人家的链接之间都隔着距离，而且每个还有高度宽度，之前我怎么弄都不不行，后来突然想到里面的“首页”等文字是链接，不是像li那样的块级元素，内联元素怎么可以设置高度宽度呢！所以加上display:block；一切搞定。一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ps内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。等等，什么是IE双倍浮动边界问题，请猛击：http://blog.163.com/stone51571@126/blog/static/47299327200962413435505/



到现在搞不清什么是内联元素的情猛击http://hi.baidu.com/fengchuyang/item/e1350540aa7029ab61d7b9a0

 ⑤应用的右边有一个向下的箭头，看它的css，其中有一个这样的display:inline-block;它的意思就是结合了内联和块级元素的特点，既能使其在一行，又能设置高宽，但是放着的意思我不太懂！还请高人指点，我猜可能是兼容吧！

1. border-top: 4px solid #999;
2. border-left: 4px dashed transparent;
3. border-right: 4px dashed transparent;
4. 看不懂？没关系，这里讲的很详细http://hi.baidu.com/hongfeisong/item/7a3d7cb6bec952971846978c

⑥搜索栏的里面的“搜索应用”字样，当你在里面写字的时候字自动不见了，删除完的时候他又出现了，看下代码就知道了

<input value placeholder="搜索应用">是不是很简单呢！

纠正，此方法在经本人试验后不对，希望高人解释！