页面背景&头部

1,767 views
1,665 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,767
On SlideShare
0
From Embeds
0
Number of Embeds
314
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

页面背景&头部

  1. 1. 页面背景 & 头部
  2. 2. 回顾页面基本布局 header container footer left right
  3. 3. 代码写法 <ul><li><div class=“header”> </div> </li></ul><ul><li><div id=“nav”> </div> </li></ul><ul><li>.header { 类选择器 </li></ul><ul><li>} </li></ul><ul><li>#nav { id 选择器 </li></ul><ul><li>} </li></ul>
  4. 4. 基本的 html 层级 <ul><li><div> </li></ul><ul><ul><li><ul id=“nav”> </li></ul></ul><ul><ul><li><li> </li></ul></ul><ul><ul><li><a class=“nav-link”> </li></ul></ul><ul><ul><li>… </li></ul></ul><ul><ul><li></a> </li></ul></ul><ul><ul><li></li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul><ul><ul><li></div> </li></ul></ul>
  5. 5. 基本 CSS 选择器 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html <ul><li>#nav li { </li></ul><ul><li>} </li></ul><ul><li>#nav li, a { </li></ul><ul><li>} </li></ul><ul><li>a.nav-link { </li></ul><ul><li>} </li></ul><ul><li>a:hover { </li></ul><ul><li>} </li></ul>空格表示后代元素选择器,属性匹配于所有 #nav 后面的 li 标签。 逗号表示多元素选择器,属性匹配于 #nav li 和 a 标签。 类选择器可以这么写,权重增加。 a 标签的伪类,包括: hover, link, visited, active 。 其他标签也能用伪类,不过 ie6 不支持。
  6. 6. 背景图片 <ul><li>背景图片的实现方式: </li></ul><ul><li>1. 一张大图。 </li></ul><ul><li>2. 若干张小图拼凑。 </li></ul><ul><li>3.repeat 。包括 repeat-x , repeat-y 和 repeat 。 </li></ul>
  7. 7. repeat repeat-x repeat-y repeat
  8. 8. 纯色 + 渐变的背景 上面部分用 repeat 下面部分用 background-color Background:#FFF url(../images/gradient.gif) top left repeat-x;
  9. 9. 这样如何实现?
  10. 10. 更复杂的背景 分解为两部分。页面大背景和头部背景。 注意多个背景之间的匹配(精确到像素)。 页面大背景是渐变 头部背景直接用图片
  11. 11. 背景图片匹配
  12. 12. 头部 LOGO 导航 实用工具 头部的常见布局。还有很多变形,不过万变不离其宗。
  13. 13. 最佳实践 <ul><li>LOGO 用 position:absolute 。 </li></ul><ul><li>实用工具用 float:right ; </li></ul>
  14. 14. 例子 LOGO 电话 语言 导航 搜索
  15. 15. Have a try

×