Web前端之网页导航----豌豆荚
2012-10-22 22:06
281 查看
先上张原图
这是我做的
做后基本一样，只是我没有写右边的文字。
接下来我就说明下里面我遇到的知识点。
①豌豆荚是一个链接，只是用图片代替文字而已，里面重要的一句是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="搜索应用">是不是很简单呢！
纠正，此方法在经本人试验后不对，希望高人解释！
这是我做的
做后基本一样，只是我没有写右边的文字。
接下来我就说明下里面我遇到的知识点。
①豌豆荚是一个链接，只是用图片代替文字而已，里面重要的一句是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="搜索应用">是不是很简单呢！
纠正，此方法在经本人试验后不对，希望高人解释！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web前端之网页导航----创新工场
- web前端网页特效大全导航列表
- Web前端之网页导航----126邮箱(关于position)
- Web前端之网页导航----搜导航狐邮箱（float）
- Web前端之网页导航----手把手教你做导航（图，代码）
- web前端基础案例-简短代码制作爱奇艺首页导航轮播特效
- [下载]web前端网页设计必备:最新50套免费高质量icon图标集
- web前端的网页优化
- CSS世界：web前端开发，CSS3+HTML5网页制作
- Web前端-JS效果-导航弹框、背景变色、鼠标移动切换等常见的js效果
- Web前端性能优化——网页秒加载
- 【web基础3】让网页处理你的数据怎么样？---前端处理
- Web前端开发：DIV+CSS网页布局总结
- idea web项目与前端网页结合
- Web前端开发实战4：导航菜单(一)
- web前端必学8个网页优化技巧 (爱创课堂出品)
- web的各种前端打印方法之jquery打印插件jqprint实现网页打印
- web前端网页开发一般过程
- [Web前端技术教学][基于Web标准的网页设计与制作]教材的精选100单选试题及答案
- Html+css+div+ul+li制作Web前端导航菜单。