先上张原图
这是我做的
做后基本一样,只是我没有写右边的文字。
接下来我就说明下里面我遇到的知识点。
①豌豆荚是一个链接,只是用图片代替文字而已,里面重要的一句是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;
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
到现在搞不清什么是内联元素的情猛击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="搜索应用">是不是很简单呢!
纠正,此方法在经本人试验后不对,希望高人解释!