JD . 簡單的網站構成、引入圖標、去除 圖片間距／加粗／傾斜／下劃線／藍色外邊框 禁止文本拖拽、文字居中、作logo、模擬鼠標 、不使用hover外部css樣式實現hover鼠標懸停改變樣式

模擬京東案例準備：

截圖（效果圖PSD文件）

搭建項目環境     (結構樣式行爲分離)  

HTML 核心文件     index.html     

CSS       控制樣式     

base.css(基礎樣式)       global.css(全局樣式)  

Image      放圖片的文件夾   

JS     音頻視頻.....

站點

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

 

引入圖標

下載

        京東： "http://www.jd.com/favicon.ico" 　　www.jd.com/favicon.ico           能下載京東圖標

        全部：網站名（帶www.）/favicon.ico    下載全部網站的圖標

引入圖標

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

可製做ico的網站：bitbug.net      

  <link rel="shortcut icon" href=" /favicon.ico" />  "shortcut🉑️不加

 

 

小知識

font :  加粗  字號/行高  格式；    行高若是不寫，默認爲0；

 

u   ins     下劃線

i   em      傾斜

s   del      刪除線

 

vertical-align:midden;      去掉圖片默認間距

font-weight:  normal;         加粗變正常

font-style:  normal;           傾斜變正常

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

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

resize:  none;               禁止文本框拖拽

行高能夠繼承

文字居中： 

　　text-align：center；　　//不能精準定位

　　padding-left ／ padding-right：   🉑️自適應大小

　　定位和margin；

　　margin能夠設置負值   padding不行  。且均可以使用百分比。

行內元素只能設置左右margin，轉換成塊元素才能夠設置上下margin；

子盒子不能根據static定位，只能根據absolute／relative。fixed定位

駝峯命名：除第一個單詞外，其餘的單詞首字母大寫

 

先寫普通標籤-->特別的標籤  -->詳細的寫

css下面的代碼樣式會覆蓋上面的，優先級爲後來者具上 （左右，左優先 ，上下，上優先）

選擇器儘可能不要超過3個， 多了容易形成重疊困難 

command+shift+c 檢查所選元素    mac是command+option+i   進入開發者模式

 

盒子的穩定性：

　　只給寬高的盒子（高度剩餘法）

　　只給padding的盒子 （padding裏面不能有內容，寬度不肯定的時候使用，可填充背景顏色）

　　給margin的盒子 （容易出現塌陷，不能繼承背景色）

bd+ ；border ：1px solid #000；

　　

作logo

　　要加文字

　　文字移除：text-indent：-9999px；    首行縮進

　　　　　　   加連接（a標籤） 給a連接七位數的em/八位數的px 會出現bug，連接點不到

　　　　　      logo圖屁啊作a標籤背景

 

 

模擬鼠標

 cursor：pointer; 鼠標變小手

 cursor：move ；鼠標變成死角箭頭

 cursor：text ； 鼠標變成工形插入條光標

 cursir：default ； 鼠標變成小白 

 

CSS鼠標樣式語法以下：

任意標籤中插入 style="cursor:*"  
例子：<span style="cursor:*">文本或其它頁面元素</span>  <a href="#" style="cursor:*">文本或其它頁面元素</a>  注意把 * 換成以下15個效果的一種：

下面是對這15種效果的解釋。移動鼠標到解釋上面，便可看到鼠標起了什麼變化～

hand是手型    
例子：鼠標手型效果   <a href="#"  " style="cursor:hand">CSS鼠標手型效果</a>

pointer也是手型，這裏推薦使用這種，由於這能夠在多種瀏覽器下使用。 
例子：<a href="#" " style="cursor:pointer">CSS鼠標手型效果</a>

crosshair是十字型 
例子： <a href="#" style="cursor:crosshair">CSS鼠標十字型 效果</a>

help是問號
例子：   <a href="#" " style="cursor:help">CSS鼠標問號效果</a>

hand是手型 
pointer也是手型，這裏推薦使用這種，由於這能夠在多種瀏覽器下使用。 
crosshair是十字型 
text是移動到文本上的那種效果 
wait是等待的那種效果 
default是默認效果 
help是問號 
e-resize是向右的箭頭 
ne-resize是向右上的箭頭 
n-resize是向上的箭頭 
nw-resize是向左上的箭頭 
w-resize是向左的箭頭 
sw-resize是左下的箭頭 
s-resize是向下的箭頭

 

不使用hover外部CSS樣式實現hover鼠標懸停改變樣式

http://www.divcss5.com/jiqiao/j698.shtml