SlideShare una empresa de Scribd logo
1 de 15
页面背景 & 头部
回顾页面基本布局 header container footer left right
代码写法 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
基本的 html 层级 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
基本 CSS 选择器   http://www.ruanyifeng.com/blog/2009/03/css_selectors.html ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],空格表示后代元素选择器,属性匹配于所有 #nav 后面的 li 标签。 逗号表示多元素选择器,属性匹配于 #nav li 和 a 标签。 类选择器可以这么写,权重增加。 a 标签的伪类,包括: hover, link, visited, active 。 其他标签也能用伪类,不过 ie6 不支持。
背景图片 ,[object Object],[object Object],[object Object],[object Object]
repeat repeat-x repeat-y repeat
纯色 + 渐变的背景 上面部分用 repeat 下面部分用 background-color Background:#FFF url(../images/gradient.gif) top left repeat-x;
这样如何实现?
更复杂的背景 分解为两部分。页面大背景和头部背景。 注意多个背景之间的匹配(精确到像素)。 页面大背景是渐变 头部背景直接用图片
背景图片匹配
头部 LOGO 导航 实用工具 头部的常见布局。还有很多变形,不过万变不离其宗。
最佳实践 ,[object Object],[object Object]
例子 LOGO 电话 语言 导航 搜索
Have a try

Más contenido relacionado

Similar a 页面背景&头部

Similar a 页面背景&头部 (20)

Div+css布局
Div+css布局Div+css布局
Div+css布局
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)
 
Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTML
 
CSS 菜鳥救星
CSS 菜鳥救星CSS 菜鳥救星
CSS 菜鳥救星
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Css
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
 
十步学会用Css+Div建站
十步学会用Css+Div建站十步学会用Css+Div建站
十步学会用Css+Div建站
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Html&css基础
Html&css基础Html&css基础
Html&css基础
 
CSS 培训
CSS 培训CSS 培训
CSS 培训
 
HTML5 介绍
HTML5 介绍HTML5 介绍
HTML5 介绍
 
网页制作基础
网页制作基础网页制作基础
网页制作基础
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 
揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍揭秘Html5和Css3 ---- 鲁超伍
揭秘Html5和Css3 ---- 鲁超伍
 
Html5css3 go.yeefe.com
Html5css3 go.yeefe.comHtml5css3 go.yeefe.com
Html5css3 go.yeefe.com
 
CSS Cascade [译]
CSS Cascade [译]CSS Cascade [译]
CSS Cascade [译]
 
网页制作基础
网页制作基础网页制作基础
网页制作基础
 

Último

1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
PUAXINYEEMoe
 
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
michaelell902
 
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
PUAXINYEEMoe
 

Último (9)

啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
啟思中國語文 - 中二 單元一 - 孟嘗君列傳 - 記敍的方法和人稱1.pptx
 
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
1.1.3急救你必须懂四年级设计与工艺练习活页练习单元一四年级设计与工艺急救你必须懂
 
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
1.🎉“黑客”如何修改成绩?🤔🎉 在这个信息爆炸的时代,我们经常会看到各种作弊手段。但是你知道吗?有一种作弊方式可能比你想象中更巧妙:它就是——黑客![单...
 
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
法国蒙彼利埃国家高等建筑学院毕业证制作/德语歌德B1证书/加拿大新斯科舍省农业学院文凭加急制作一个
 
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
10.2.1 马来西亚各州名称的由来六年级历史单元练习马来西亚各州名称的由来练习
 
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdftaibif_資料標準概念介紹_20240509_20240509_20340509.pdf
taibif_資料標準概念介紹_20240509_20240509_20340509.pdf
 
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade SixMath Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
Math Chapter3-教學PPT第03單元形體關係、體積與表面積Grade Six
 
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdftaibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
taibif_開放資料流程-清理資料01-通則_20240509_20240509.pdf
 
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
1.🎉成绩单,你的成绩! 💡🔥每个人都有自己的成绩单,它记录着我们努力的成果。但有时候,看着这些数字,却发现它们好像在嘲笑我?别担心,让我来告诉你们怎么改...
 

页面背景&头部