京東案例

1.1?截圖 ?（要一個效果圖）

?

1.2?搭建項目環境 ????(結構樣式行為分離)

一、HTML?核心文件 ????index.html

二、CSS ??????控制樣式 ????

a）base.css(基礎樣式) ??????b）global.css(全局樣式)

三、Image ?????放圖片的文件夾

四、JS ????音頻視頻.....

1.3?站點

站點 == 項目 == 項目文件夾 == （根目錄）

?

1.4?引入圖標

一、下載

????????京東：www.jd.com/favicon.ico???????????能下載京東圖標

????????所有：網站名（帶www.）/favicon.ico ???下載所有網站的圖標

二、引入

<link rel="shortcut icon" href="favicon.ico"/>

網站名：bitbug.net ?????

??<link rel="shortcut icon" href="?/favicon.ico" />?????綠色部分刪掉

1.5?小知識

font : ?加粗 ?字號/行高??格式； ???行高如果不寫，默認為0；

?

u ??ins ????下劃線

i ??em ?????傾斜

s ??del ?????刪除線

?

font-weight: ?normal; ????????加粗變正常

font-style: ?normal; ??????????傾斜變正常

text-decoration: none; ????????下劃線刪除線變正常

outline-style: none; ??????????去除藍色外邊框

resize: ?none; ??????????????禁止文本框拖拽

1.6?京東結構布局

?

?

1.7?權限問題

?

1.8?盒子穩定性

一、只給寬高的盒子（寬/高度剩余法）

二、給padding的盒子

三、給margin的盒子

1.9?量取盒子高度

?

1.10?模擬鼠標

cursor: pointer; ??????????鼠標變成小手

cursor: move; ???????????鼠標變成四角箭頭

cursor: text; ????????????鼠標變成工形插入條光標

cursor: default; ??????????鼠標變成小白

1.11?文字居中問題

1.text-align: center;

2.padding-left/padding-right;

3.定位、margin.......

?

總結

以上是生活随笔為你收集整理的前端京东案例总体思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。