JY02-HTML/CSS-京東01 定位是很粗暴的頁面佈局方法

1.學習重點

1. 獨立完成開發前的準備工做

　　1.1 配置開發環境 已使用sublime，webstorm，，，vscode，ato，Hbuilder

　　1.2 創建項目文件 項目文件名/ css、js、images、audio、video--文件夾

　　　　　　　　　　　　　　　　index.html、favicon.ico

　　　　　　　　　　css/base.css、index.css

　　1.3樣式初始化（不一樣瀏覽器的中各個標籤的默認樣式可能不一樣，爲了1統同樣式或者方便維護）　

　　1.4分析網站的佈局格式　　　　　　　

2. 掌握css樣式的書寫位置

　　行內式，<div style="color=red;font-size=200px"></div>（錯誤）<div style="color:red;font-size:200px"></div>

　　內嵌式，<style></style>

　　外鏈式，<link rel="stylesheet" href="地址"/>

　　導入式@

3. 製做網站快捷圖標

     　www.bitbug.net

　　<link rel="shortcut icon" type="type/x-icon" href="地址"/>

4. 描述網站版心的概念及意義

　　各種屏幕的分辨率不一樣，致使顯示效果不一樣，設置版心能夠使頁面正中心位置呈現於用戶面前，提升用戶體驗

5. 熟悉頁面的開發流程

　　頁面分析，製做順序：上--下、左--右；

　　火狐瀏覽器的3D視圖及截圖工具；

6. 熟練掌握FW的切圖快捷鍵

　　v 測量線  　　k 切圖　　　  i 取色        　z 局部放大  　　a 選取目標

　　移動　　　　 切片工具 　　滴管工具　　放大鏡工具　　指針工具

7. 掌握font複合屬性

　　font：-weight 　　-style 　　-size/line-height　　 -family

　　　　　100-900　　italic          12px/150%　　　　「microsoft yahei」

　　　　　bold

8. 掌握定位

　　今天大量使用了定位製做網頁, 小圖片的佈置能夠使用浮動替代

　　頁面佈局：通常優先考慮標準流/普通流，其次浮動，最後定位

　　fixed，absolute 脫標-模式轉換-定位相對於瀏覽器

　　設置absolute的元素有父元素設置了非靜態定位，此元素會相對於父元素定位，多個父元素設置了非靜態定位，則相對於最近的父元素

　　relative 不脫標-不轉換-佔據原來的位置，相對於原來的位置定位

　　static標準流

　　註定位的上下只能使用其中一個，左右也是。

9. 掌握權重

　　繼承 < 通配符*< class=僞元素:hover < id <  行內式 < (屬性值+!important);

　　圖爲鼠標放置在div.one上方時的樣式：

　　　　css樣式中：上圖div .one 寫在後面；下圖div:hover 寫在後面

 2.其餘

　　input標籤，value屬性------使用：如button屬性上的字

　　em ins del (i s u基本棄用其效果)-能夠做爲  起頁面裝飾做用的小標籤，在樣式初始化時清除其樣式，佈置浮動、定位時，使用這些元素做爲盒子裝圖片文字等。