碼上快樂

相關內容    簡體    繁體

06-前端核心技術-CSS布局屬性

本文轉載自   查看原文   2021-11-20 15:49   186    前端課件

第06章-前端核心技術-CSS布局屬性

學習目標

  1. 了解定位的概念

  2. 掌握如何實現元素的任意布局 重點 難點

  3. 掌握實際開發特效的實現 難點

  4. 掌握CSS復雜選擇器的使用 重點
  5. 掌握CSS屬性選擇器的使用方法
  6. 掌握CSS特效制作的方法 重點 難點

CSS Float(浮動)

Float（浮動），只能使元素向左或向右移動，其周圍的元素的內容會被浮動的元素的內容擠到周圍。

Float（浮動），往往是用於圖像，但它在布局時一樣非常有用。

屬性 描述
float 使元素浮動到左邊或者右邊（left、right）
  • 浮動元素只能左右移動而不能上下移動。
  • 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
  • 浮動元素之后的元素將圍繞它。
  • 浮動元素之前的元素將不會受到影響。
  • 浮動元素的空間將不存在，所以這個元素后邊的元素會占據浮動元素原本的空間，導致浮動元素覆蓋后面的元素，后面的元素需要使用clear屬性清除浮動的覆蓋。

案例01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> img{ float: right; } </style>
	</head>
	<body>
		<img src="image/avatar.jpg"/>
		覺得很卡機的話那的艱苦撒旦的艱苦撒謊空間大倒薩立刻就發生范德薩浪費
		瘋狂的思路發生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發公
		瘋狂的思路發生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發公
		瘋狂的思路發生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發公
		瘋狂的思路發生分類考試的價格快速拉高餓死了咖啡連鎖店過的思路開發公
	</body>
</html>

效果展示

image-20210926091630485

圖片浮動到最右邊，將正常排版的文字擠到旁邊，並不會覆蓋住文字。

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> ul{ list-style-type: none; } li{ float: left; padding: 20px; background-color: #DC143C; color: white; } h4{ background-color: blueviolet; color: white; } </style>
	</head>
	<body>
		<ul>
			<li>家具</li>
			<li>服飾</li>
			<li>汽車</li>
			<li>裝飾</li>
			<li>鞋包</li>
			<li>兒童</li>
		</ul>
		<h4>內容</h4>
	</body>
</html>

效果展示

image-20210902162005001

清除浮動

清除浮動的屬性一般用於浮動元素后面的元素，用戶清除上面浮動元素對其產生的影響

屬性 描述
clear 清除上面浮動元素的影響（left、right、both）

案例03

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> ul{ list-style-type: none; } li{ float: left; padding: 20px; background-color: #DC143C; color: white; } h4{ background-color: blueviolet; color: white; clear: both;/*清除上面浮動元素的影響，並從新的行開始*/ } </style>
	</head>
	<body>
		<ul>
			<li>家具</li>
			<li>服飾</li>
			<li>汽車</li>
			<li>裝飾</li>
			<li>鞋包</li>
			<li>兒童</li>
		</ul>
		<h4>內容</h4>
	</body>
</html>

效果展示

image-20210902165842139

總結

  1. 浮動的特征：
  2. 把任何元素看成：元素 = 空間 + 內容
  3. 浮動的元素只能浮動到左邊 或者 右邊，不能居中
  4. 浮動后的元素的空間不存在，但內容還存在
  5. 浮動元素的內容會和下面的元素顯示在同一行
  6. 浮動元素的內容會把下面的元素的的內容擠壓到旁邊

  7. 清除浮動

  8. 想讓浮動的元素獨占一行，不影響后面的元素排版，需要給后面的第一個元素加clear:bath清除浮動
  9. 當一個元素的所有子元素都浮動后，子元素的空間都不存在了，這個元素的高度會變為0px，導致這個元素的背景等看不到，需要給這個元素加overflow:hidden;或者display:inline-block;。

CSS position (定位)

position 屬性指定了元素的定位類型。

屬性 描述
Static 靜態定位，默認值，就是沒有定位。
Relative 相對定位，相對當前元素位置
Fixed 固定定位，在頁面上固定的位置出現
Absolute 絕對定位，相對於上級已經定位的元素的位置

static 靜態定位（默認）

HTML元素的默認值，即沒有定位，元素出現在正常的流中。

靜態定位的元素不會受到 top, bottom, left, right影響。

fixed 固定定位

元素的位置相對於瀏覽器窗口是固定位置。

即使窗口是滾動的它也不會移動。

案例04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> body{ height: 2000px; margin: 0; } ul{ list-style-type: none; margin: 0; padding: 0; text-align: center; background-color: #DC143C; width: 100%; position: fixed; top: 0; padding: 4px 0; } li{ display: inline-block; padding: 15px 5%; background-color: rgba(0,0,255,0.5); color: white; font-weight: bold; border-radius: 6px; } li:hover{ background-color: rgba(0,255,0,0.5); cursor: pointer; } h4{ text-align: center; } .bottom{ position: fixed; background-color: #DC143C; width: 100%; bottom: 0; line-height: 50px; text-align: center; } </style>
	</head>
	<body>
		<ul>
			<li>首頁</li>
			<li>動態</li>
			<li>新聞</li>
			<li>聯系</li>
		</ul>
		<div class="bottom">
			底部
		</div>
	</body>
</html>

效果展示

image-20210902170923536

relative 相對定位

相對定位元素的定位是相對其正常位置。

相對定位元素經常被用來作為絕對定位元素的容器塊。

可以移動的相對定位元素的內容和相互重疊的元素，它原本所占的空間不會改變。

absolute 絕對定位

絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對於<html>

absolute 定位使元素的位置與文檔流無關，因此不占據空間。

absolute 定位的元素和其他元素重疊。

案例05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="2.css"/>
	</head>
	<body>
		<h2>商品分類</h2>
		<ul>
			<li>女裝/內衣
				<div class="right">
					<div class="l">
						<div class="item">
							<div class="ll">
								當季流行>
							</div>
							<div class="lr">
								春季新品商場同款氣質連衣裙衛衣時髦外套毛針織衫休閑褲牛仔褲毛呢大衣無痕文胸運動文胸潮流家居服百搭船襪
							</div>
						</div>
					</div>
					<div class="r">
						<img src="../day17/image/1-3.jpg"/>
					</div>
				</div>

		<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>男裝/運動戶外<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210926091700880

重疊的元素

元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）

一個元素可以有正數或負數的堆疊順序

案例06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> .img1{ position: absolute; width: 200px; left: 50px; top: 120px; z-index: 2; } .img2{ position: absolute; width: 200px; z-index: -1; } </style>
	</head>
	<body>
		<img src="image/avatar.jpg" class="img1"/>
		<img src="image/meinv.jpg" class="img2"/>
	</body>
</html>

效果展示

image-20210926091720223

CSS復雜選擇器

子元素（后代）選取器

后代選取器匹配元素所有的內部元素，無論嵌套多少層都可以被選擇。符號“空格”

案例07

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代選取器</title>
		<style type="text/css"> #content .child{ color: red; } </style>
	</head>
	<body>
		<div id="content">
			<div class="child">
				第一層前套的子元素1
				<div class="child">
					第二層前套的子元素1
				</div>
			</div>
			<div class="child">
				第一層前套的子元素2
				<div class="child">
					第二層前套的子元素2
				</div>
			</div>
		</div>
	</body>
</html>

效果展示

image-20210902171823782

直接子元素選擇器

與后代選擇器相比，直接子元素選擇器（Child selectors）只能選擇作為某元素直接子元素，嵌套的不能被選中。

直接子元素使用“>”符號來表示

案例08

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>直接子元素選擇器</title>
		<style type="text/css"> #content > .child2-1{ color: red; } </style>
	</head>
	<body>
		<div id="content">
			<div class="child1-1">
				第一層前套的子元素1
				<div class="child2-1">
					第二層前套的子元素1
				</div>
			</div>
			<div class="child1-1">
				第一層前套的子元素2
				<div class="child2-1">
					第二層前套的子元素2
				</div>
			</div>
		</div>
	</body>
</html>

效果展示

image-20210902172120638

相鄰兄弟選擇器

相鄰兄弟選擇器（Adjacent sibling selector）可選擇后面緊接在一個元素后的元素，且二者有相同父元素。只能選擇一個。

相鄰兄弟選擇器使用“+”符號來表示

案例09

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>相鄰兄弟選擇器</title>
		<style type="text/css"> p + .child1-1{ color: red; } </style>
	</head>
	<body>
		<div id="content">
			<p>段落</p>
			<div class="child1-1">第一層前套的子元素1</div>
			<div class="child1-1">第一層前套的子元素2</div>
		</div>
	</body>
</html>

效果展示

image-20210902172307756

后續兄弟選擇器

后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。

后續兄弟選擇器使用“~”符號來表示

案例10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后續兄弟選擇器</title>
		<style type="text/css"> p ~ .child1-1{ color: red; } </style>
	</head>
	<body>
		<div id="content">
			<p>段落</p>
			<div class="child1-1">第一層前套的子元素1</div>
			<div class="child1-1">第一層前套的子元素2</div>
		</div>
	</body>
</html>

效果展示

image-20210902172307756

偽類(元素)選擇器

選擇器 示例 示例說明
:checked input:checked 選擇所有選中的表單元素（單選和復選）
:disabled input:disabled 選擇所有禁用的表單元素
:enabled input:enabled 選擇所有啟用的表單元素
:not(selector) :not(p) 選擇所有p以外的元素
:in-range input:in-range 選擇元素值在指定（數字輸入框）min和max范圍內的值
:out-of-range input:out-of-range 選擇元素值在指定（數字輸入框）min和max范圍外的值
:invalid input:invalid 選擇所有無效的元素
:valid input:valid 選擇所有有效值的屬性
:first-letter p:first-letter 選擇每個<p> 元素的第一個字母
:first-line p:first-line 選擇每個<p> 元素的第一行
:last-child p:last-child 選擇所有p元素的最后一個元素
:last-of-type p:last-of-type 選擇每個p元素是其母元素的最后一個p元素
:first-of-type p:first-of-type 選擇每個父元素是p元素的第一個p子元素
:first-child p:first-child 選擇器匹配屬於任意元素的第一個子元素的 <p>元素
:nth-child(n) p:nth-child(2) 選擇所有p元素的第二個子元素
:nth-last-child(n) p:nth-last-child(2) 選擇所有p元素倒數的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2) 選擇所有p元素倒數的第二個為p的子元素
:nth-of-type(n) p:nth-of-type(2) 選擇所有p元素第二個為p的子元素
:only-of-type p:only-of-type 選擇p元素在父元素中只有一個類型為p的元素
:only-child p:only-child 選擇p元素在父元素中只有一個p的元素
:empty p:empty 選擇所有沒有子元素（任何內容）的p元素
:optional input:optional 選擇沒有“required”的元素屬性
:required input:required 選擇有“required”屬性指定的元素屬性
:read-only input:read-only 選擇只讀屬性的元素屬性
:read-write input:read-write 選擇沒有只讀屬性的元素屬性
:root root 選擇文檔的根元素
:target #news:target 選擇當前活動#news元素(點擊URL包含錨的名字)
:link a:link 選擇所有未訪問鏈接
:visited a:visited 選擇所有訪問過的鏈接
:active a:active 選擇正在活動鏈接
:hover a:hover 把鼠標放在鏈接上的狀態
:focus input:focus 選擇元素輸入后具有焦點
:before p:before 在每個<p>元素之前插入內容
:after p:after 在每個<p>元素之后插入內容

案例11：自定義單選框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
	</head>
	<body>
		<!-- 自定義單選框 -->
		<div class="radio">
			<input type="radio" name="a"/>
			<div class="checked"></div>
		</div>
		<div class="radio">
			<input type="radio" name="a"/>
			<div class="checked"></div>
		</div>
	</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.radio{ width: 50px; height: 50px; background-color: rgba(0,0,0,0.1); position: relative; display: inline-block; border-radius: 100px; box-shadow: 0 0 2px 1px rgba(255,0,0,0.5); }

.radio input[type=radio]{
 width: 100%;
 height: 100%;
 margin: 0;
 opacity: 0;
 position: absolute;
 left: 0;
 top: 0;
 }
 .radio .checked{
 position: relative;
 }
 .radio .checked::before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-right: 20px solid green;
 border-top: 20px solid transparent;
 right: 25px;
 top: 5px;
 display: none;
 }
 .radio .checked::after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 border-left: 20px solid blue;
 border-bottom: 20px solid transparent;
 left: 25px;
 top: 25px;
 display: none;
 }


.radio input[type=radio]:checked+.checked::before{
 display: block;
 }


.radio input[type=radio]:checked+.checked::after{
 display: block;
 }

效果展示

image-20210908154537826

案例12：提示框文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #content{ position: relative; width: 200px; } .cart{ display: none; position: absolute; top: 0; left: 0; margin-top: -35px; padding: 5px 10px; height: 20px; background-color: black; border-radius: 5px; color: white; } .cart:after{ content: ""; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; position: absolute; bottom: -10px; left: 50%; margin-left: -5px; } #content:hover .cart{ display: inline-block; } </style>
	</head>
	<body>
		<br /><br /><br /><br />
		<div id="content">
			請把鼠標移上來
			<div class="cart">
				提示文字
			</div>
		</div>

<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210902173044012

案例13：自定義列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
	</head>
	<body>
		<ul>
			<li tip="提示1">自定義列表</li>
			<li tip="提示2">自定義列表</li>
			<li tip="提示3">自定義列表</li>
			<li tip="提示4">自定義列表</li>
		</ul>
		<ul>
			<li tip="提示1">自定義列表</li>
			<li tip="提示2">自定義列表</li>
			<li tip="提示3">自定義列表</li>
			<li tip="提示4">自定義列表</li>
		</ul>
	</body>
</html>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
ul{ margin: 0; padding: 0; list-style: none; display: inline-block; /* 設置每個UL重新計數，默認起始值=0 */ counter-reset: a 0; }

ul li{
 position: relative;
 padding-left: 20px;
 /* 設置每個li自增 1 ，默認自增值=1 */
 counter-increment: a 1;
 }


/* 自定義列表前面的圖案 /
 ul li:before{
 / 引用 li 中定義的自增變量 a 的值 */
 content: counter(a);
 width: 0;
 height: 0;
 position: absolute;
 border-left: 8px solid black;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent;
 left: 0;
 top: 4px;
 line-height: 0px;
 }


/* 自定義列表后面的鼠標懸停提示文字 /
 ul li:after{
 / 引用 html標記上的 tip 屬性值 */
 content: attr(tip);
 position: absolute;
 color: white;
 background-color: black;
 padding: 4px 8px;
 border-radius: 4px;
 font-size: 12px;
 display: none;
 }


ul li:hover:after{
 display: block;
 left: 110%;
 white-space: nowrap;
 top: 0px;
 }

效果展示

image-20210908154850309

屬性選擇器

選擇器 描述
[attribute] 用於選取帶有指定屬性的元素。
[attribute=value] 用於選取帶有指定屬性和值的元素。
[attribute~=value] 用於選取屬性值中包含指定詞匯的元素。
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，只能選擇前綴，必須加：“-”。
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
[attribute*=value] 匹配屬性值中包含指定值的每個元素。

實例14：輸入元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代選取器</title>
		<style type="text/css"> form{ border-radius: 5px; display: inline-block; padding: 5px; border: 1px solid rgba(0,0,0,0.3); box-shadow: 1px 3px 1px rgba(0,0,0,0.4), -1px 4px 1px rgba(0,0,0,0.3), 2px 5px 3px rgba(0,0,0,0.2), -2px 6px 3px rgba(0,0,0,0.1); } input { height: 30px; margin: 0; padding: 0px 10px; border: 1px solid rgba(0,0,0,0.4); border-radius: 5px; font-size: 18px; color: #DC143C; } input[type=button]{ } input:focus{ border: 1px solid rgba(255,0,0,1); outline: 0; } input:active{ border: 1px solid rgba(0,0,255,1); outline: 0; } </style>
	</head>
	<body>
		<form>
			<input type="text" placeholder="請輸入用戶名" />
			<input type="password" placeholder="請輸入密碼" />
			<input type="button" value="登陸" />
		</form>
	</body>
</html>

效果展示

image-20210902173247813

作業

實現如下八卦圖

image-20210902175200782

實現如下效果

image-20210926091759744

實現如下效果

image-20210926091829818

實現如下效果

image-20210926091850647

實現如下效果

image-20210902175504268

實現如下效果

image-20210902175522303

實現如下效果

image-20210926092025559

實現如下效果

image-20210926092140925

實現如下效果

image-20210902175610164

實現如下效果

image-20210902175653752

實現如下效果

image-20210902175635703

    </article>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 04-前端核心技術-CSS基礎屬性 05-前端核心技術-CSS排版屬性 07-前端核心技術-CSS動畫特效 06.SpringBoot核心技術 《CSS核心技術詳解》 CSS Flex布局屬性整理 【Web前端HTML5&CSS3】06-盒模型 Web前端三大核心技術之HTML 11-前端核心技術-JavaScript RelativeLayout相對布局屬性
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM