我們?cè)? />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > Web前端培訓(xùn) 定位屬性、列表的高級(jí)應(yīng)用及帶有圖片列表的網(wǎng)頁(yè)制作（上）

Web前端培訓(xùn) 定位屬性、列表的高級(jí)應(yīng)用及帶有圖片列表的網(wǎng)頁(yè)制作（上）

時(shí)間：2023-07-06 01:33:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-06 01:33:01 來源：網(wǎng)站運(yùn)營(yíng)

Web前端培訓(xùn) 定位屬性、列表的高級(jí)應(yīng)用及帶有圖片列表的網(wǎng)頁(yè)制作（上）：我們?cè)谇懊鎸W(xué)過文檔流，文檔流分為普通文檔流和抽離文檔流，我們講過浮動(dòng)可以使元素抽離文檔流，那還有什么屬性可以抽離文檔流呢？那就是定位屬性。

我們?cè)谥谱骶W(wǎng)頁(yè)過程中，有時(shí)不需要網(wǎng)頁(yè)的元素像這樣的左右排列，有時(shí)候需要他在任何一個(gè)地方，那用我們學(xué)過的浮動(dòng)屬性和margin屬性可以完成，但是設(shè)置了浮動(dòng)的元素會(huì)影響后面的元素，我們?nèi)绻幌胗绊懭魏蔚脑剡€可以把元素任意排列，該怎么辦呢？我們得再繼續(xù)學(xué)習(xí)一下新的CSS屬性，那就是定位屬性。我們來看一下我們今天的知識(shí)點(diǎn)：

1、 定位屬性

2、 層次屬性

3、 定位屬性的應(yīng)用

4、 元素的表現(xiàn)形式

5、 列表標(biāo)簽的高級(jí)應(yīng)用

6、 帶有圖片列表的網(wǎng)頁(yè)制作

好了，我們先來看一下定位屬性及屬性值及其應(yīng)用。

一、 定位屬性（position）

好了，我們以上的屬性及屬性值一一講解吧!

1. Static(默認(rèn)值)，幾乎不用。

2. Fixed（固定定位）

固定定位是通過"left", "top", "right" 以及 "bottom" 屬性進(jìn)行設(shè)置元素的位置，其后面的值可以是像素也可以是百分比。其位置的改變是相對(duì)瀏覽器進(jìn)行改變位置的，而且設(shè)置了固定定位的元素已經(jīng)脫離了文檔流，自己原來的位置不保留。而且層次要比沒有設(shè)置定位的元素的層次要高一層。我們具體的看一下代碼：

代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

.box{

width:100px;

height:100px;

background:red;

position: fixed;

left:50%;

top:50%;

margin: -50px 0 0 -50px;

}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

顯示效果：

看到的效果是，無論窗口是怎樣改變，具有固定定位的元素永遠(yuǎn)定了中間位置。那固定位置的元素具體應(yīng)用有那里呢，具體看一下實(shí)例：

代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

body{

height: 2000px;

}

.war1{

position: fixed;

left:10px;

top:20px;

}

.war2{

position: fixed;

right:10px;

top:20px;

}

</style>

</head>

<body>

<div class="war1">

<img src="img/war.png" />

</div>

<div class="war2">

<img src="img/war.png" />

</div>

</body>

</html>

顯示效果：

1. 相對(duì)定位(relative)

相對(duì)定位是相對(duì)自己改變位置。也是通過"left", "top", "right" 以及 "bottom" 屬性改變位置，也脫離了文檔流，但是自己原來的位置保留。相對(duì)定位與絕對(duì)定位經(jīng)常一起配合使用。

代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

div{

width: 300px;

height: 100px;

}

.box1{

background: red;

}

.box2{

background: yellow;

position: relative;

left: 100px;

top:150px;

}

.box3{

background: cyan;

}

</style>

</head>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</body>

</html>

顯示效果：

4. 絕對(duì)定位（absolute）

絕定定位的元素也是通過是通過"left", "top", "right" 以及 "bottom" 屬性改變自己的位置，但是他是相對(duì)于相對(duì)于最近的（如果父元素不符合，看看爺爺符合不符合）一個(gè)具有定位屬性的父級(jí)元素偏移。如果都不符合相對(duì)于body進(jìn)行改變位置。 并且具有絕對(duì)定位的元素也是脫離了文檔流，自己原來的位置不保留。

代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

div{

width: 300px;

height: 100px;

}

.box1{

background: red;

}

.box2{

background: yellow;

position: absolute;

left: 100px;

top:150px;

}

.box3{

background: cyan;

}

</style>

</head>

<body>

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</body>

</html>

顯示效果：

以上這種情況是父元素沒有設(shè)置定位，如果父元素設(shè)置了定位（不管是相對(duì)定位還是絕對(duì)定位都可以，具體要看父元素的位置需不需要保留），就會(huì)相對(duì)自己的父元素進(jìn)行定位。

父元素沒有設(shè)置定位的代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

.parent{

width: 600px;

height: 300px;

background: greenyellow;

margin: 0 auto;

}

.parent div{

width: 300px;

height: 100px;

}

.box1{

background: red;

}

.box2{

background: yellow;

position: absolute;

left: 100px;

top:150px;

}

.box3{

background: cyan;

}

</style>

</head>

<body>

<div class="parent">

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</div>

</body>

</html>

顯示效果：

再看父元素加了定位的元素：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

.parent{

width: 600px;

height: 300px;

background: greenyellow;

margin: 0 auto;

position: relative;

}

.parent div{

width: 300px;

height: 100px;

}

.box1{

background: red;

}

.box2{

background: yellow;

position: absolute;

left: 100px;

top:150px;

}

.box3{

background: cyan;

}

</style>

</head>

<body>

<div class="parent">

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</div>

</body>

</html>

顯示效果：

就會(huì)相對(duì)于自己的父進(jìn)行改變位置了！好了，定位屬性我們講完了，整個(gè)頁(yè)面不是所有的標(biāo)簽都用到定位屬性，只是局部地方用到定位屬性。具體的應(yīng)用，等下我們講完層次屬性我們?cè)賮砜淳唧w的案例。我們看到我們剛剛只是設(shè)置一個(gè)元素的定位屬性，如果一個(gè)頁(yè)面中有幾個(gè)元素都有定位屬性，他們就會(huì)存在著層次關(guān)系，看他們的層次是如何顯示的？

代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

.parent{

width: 600px;

height: 300px;

background: greenyellow;

margin: 0 auto;

position: relative;

}

.parent div{

width: 300px;

height: 100px;

}

.box1{

background: red;

position: absolute;

left: 100px;

top:50px;

}

.box2{

background: yellow;

position: absolute;

left: 150px;

top:100px;

}

.box3{

background: cyan;

position: absolute;

left: 200px;

top:150px;

}

</style>

</head>

<body>

<div class="parent">

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</div>

</body>

</html>

顯示效果：

大家看到他們的層次，先出現(xiàn)的標(biāo)簽在最下層顯示，后寫的標(biāo)簽在最上層顯示，我們想改變一下他們的層次關(guān)系應(yīng)該怎么辦呢？我們來看一下層次屬性。

二、 層次屬性（z-index）

我們從新看一下上面的代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>定位屬性-position</title>

<style>

.parent{

width: 600px;

height: 300px;

background: greenyellow;

margin: 0 auto;

position: relative;

}

.parent div{

width: 300px;

height: 100px;

}

.box1{

background: red;

position: absolute;

left: 100px;

top:50px;

z-index: 3;

}

.box2{

background: yellow;

position: absolute;

left: 150px;

top:100px;

z-index: 2;

}

.box3{

background: cyan;

position: absolute;

left: 200px;

top:150px;

z-index: 1;

}

</style>

</head>

<body>

<div class="parent">

<div class="box1">box1</div>

<div class="box2">box2</div>

<div class="box3">box3</div>

</div>

</body>

</html>

顯示效果：

可以通過設(shè)置z-index的值改變?cè)氐膶哟?，值越大越在最上層顯示，值越小越最下層顯示。好了，接下來我們看一下綜合實(shí)例的應(yīng)用

三、 定位屬性的應(yīng)用（仿京東頁(yè)面效果）


代碼：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

.banner{

width: 730px;

height: 454px;

margin: 0 auto;

position: relative;

}

ul{

list-style: none;

position: absolute;

left: 50%;

bottom: 20px;

}

li{

float: left;

width: 20px;

height: 20px;

background: #3e3e3e;

border-radius: 50%;

text-align: center;

line-height: 20px;

font-size: 12px;

color: #fff;

margin-right: 5px;

}

.active{

background: #b61b1f;

}

</style>

</head>

<body>

<div class="banner">

<img src="img/w.jpg" width="730" height="454"/>

<ul>

<li class="active">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

</ul>

</div>

</body>

</html>

顯示效果：


另外在這里說明一下：設(shè)置了定位的元素也會(huì)自動(dòng)轉(zhuǎn)成了塊級(jí)元素，設(shè)置了浮動(dòng)的元素也會(huì)自動(dòng)轉(zhuǎn)成塊元素，我們都知道元素在頁(yè)面中的表現(xiàn)有幾種形式呢，我們?cè)僭敿?xì)了解一下！

四、 元素的表現(xiàn)形式

關(guān)鍵詞：圖片,培訓(xùn),定位,屬性,高級(jí)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉