CSS實戰（製作京東簡易首頁）
專案資料夾 （站點）
我們的網頁都應該放到一個資料夾內。 站點-本地站點
規劃好頁面
專案資料夾
1 .首頁 index.html
2 .樣式 css資料夾 css檔案 相同樣式 （全域性樣式 公共樣式） Base.css（基本樣式） global.css (全域性樣式)
3.圖片 images 檔案
4.特效 js資料夾 js 檔案
1.4.2 CSS初始化
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt 引入css
<!-- 引入base.css -->
<link rel="stylesheet" href="css/base.css" />
<!-- 引入index.css -->
<link rel="stylesheet" href="css/index.css" />Favicon 圖示
<link rel="shortcut icon" href="favicon.ico" />
網頁顯示的圖示
CSS 位置分類
行內式 css
<div class="fr" style="color:red;">aa</div>
內嵌式樣式
<style>
.one {
width: 200px;
}
</style>外鏈式
<link rel=”stylesheet” href =”css/base.css” />
Font 字型綜合寫
Font: 字型加粗 字號/行高 字型; 必須有字號和字型。
Font-weight:bold; 700
S del 刪除線
I em 傾斜
U ins 下劃線
字型加粗 font-weight: 700;
讓字型不加粗: font-weight:normal;
字型傾斜: font-style:italic; 不用
字型不傾斜： font-style:normal;
沒有下劃線 沒有刪除線: text-decoration: none;定位： position：static; 靜態定位 約等於標準流
浮動的不浮動: float:none; none left right
定位的不定位: position: static; absolute relative fixed權重–標籤 1 類 10 id 100 行內 1000
網頁穩定：
Width 和height 最穩定
其次padding
最後才考慮margin
浮動(float)
正常流 normal flow
浮動 定位 脫標 out of flow
浮動目的：
可以讓多個塊級元素放到一行上。
Float: left right none;
清除浮動
清除浮動： 根據情況需要來清楚浮動 。
清除浮動的目的： 就是為了解決 父 盒子高度為0 的問題。
清除浮動：
1. 額外標籤法
2. Overflow: hidden 觸發 bfc 模式 就不用清楚浮動
3. 偽元素
.clearfix:after {
content:””;
Visibility:hidden;
Display:block;
Height:0;
Clear:both;
}
.clearfix{
Zoom:1;
}清除浮動： 真正的叫法 閉合浮動
4. 雙偽元素
.clearfix:before,.clearfix:after{
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}滑鼠樣式
Cursor: pointer 滑鼠變成小手
Cursor: default; 小白
Cursor : move; 移動
Cursor : text ; 文字輸入 網頁佈局：
給一個盒子 ： 寬度高度 背景邊框 位置
Border-radius
圓角矩形
border-radius: 7px 7px 7px 0;
border-radius: 左上 右上 右下 左下； 順時針 標籤巢狀
- 塊級元素 — 任何元素可以的。
- 行內元素 – 行內元素 只 巢狀元素
b u span i s - P 不能放 div 。
- a 無所不能 。 a裡面不能放 a input 等
Z-index 層級 div 層
只有 定位的盒子 （除了static） 才有 z-index
如果都是定位 絕對定位 他們預設的z-index 是 0
最後的一個靠上
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* .test {
width: 150px;
height: 300px;
border: 1px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -1px;
}
.test:hover {
border: 1px solid #f40;
position: relative;
} */
.test {
width: 150px;
height: 300px;
border: 1px solid #ccc;
margin-top: 100px;
float: left;
margin-left: -1px;
position: relative;
}
.test:hover {
border: 1px solid #f40;
z-index: 1;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>背景半透明
CSS3
background: rgba(0,0,0,0.5);
Opacity: 0.5; 讓盒子半透明 裡面的內容也半透明