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

来源：互联网发布：美国最新战机知乎编辑：程序博客网时间：2024/04/30 11:57

先上张原图

这是我做的

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

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

①豌豆荚是一个链接，只是用图片代替文字而已，里面重要的一句是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;圆角

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

④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;它的意思就是结合了内联和块级元素的特点，既能使其在一行，又能设置高宽，但是放着的意思我不太懂！还请高人指点，我猜可能是兼容吧！

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

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

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

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