溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
上一節學習的內容，有一下幾點，可以注意一下。或者說推薦這么做。
可以給一個標簽設置多個class值，這樣我們可以為每個class應用一種樣式。標簽有多個class的話，就為這個標簽應用了多個樣式。并且之后別的標簽要求重用其中的部分樣式，只需要設置那個class就好了。
要設置多個class的值，只需要用空格隔開每個值即可。下面的例子分別設置了背景色、高度、寬度、外框，然后div的設置了多個class：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
}
.c2{
height: 50px;
}
.c3{
width: 200px;
}
.c4{
border: 3px solid black;
}
</style>
</head>
<body>
<div class="c1 c2 c3 c4"></div>
<div class="c1 c2 c4"></div>
</body>把整個網頁先從上到下分成若干塊，每一塊都按下面的思路。
先寫第一層div，可以設置背景色，如果有需要設置高度（height）和垂直居中（line-height），設了高度就是固定的高度，我們要確保內部的元素不會超出。不設高度，這個div的高度就靠內部的元素撐起來。
不要設置寬度。讓它可以撐滿一整塊。
再寫第二層div，這個設置一個像素的寬度。這樣你整塊的內容都限制在這個區域內。如果頁面寬度太小，頁面下方會出現滾動條，而不會導致這里面的內容會混亂。
第三層開始可以寫你的內容，可以繼續用div也可以用別的標簽，寬度可以使用百分比了。繼續用像素也ok，不過如果第二次的寬度要調整，并且里面寬度用的是百分比的話，貌似就是自動調整好了。如果用了float，最后不要忘記clear。
<body>
<div class="lv1" >
<div class="lv2" >
<div >左邊的內容</div>
<div >中間的內容</div>
<div ></div>
</div>
</div>
</body>在a標簽里的img標簽（圖片），可能在IE上打開的時候，在最外面有一圈藍色的邊框。雖然我在自己的IE11上試了，并沒有，可能舊版本還有這個問題。這個邊框的顏色應該就是超鏈接字體的顏色，我們所要做的就是把img外面這個邊框去掉。做法也很簡單，寫一個img的標簽選擇器，設置border為0就沒有邊框了。我們可以總是在head里加上這么一個標簽選擇器來避免這個問題，而不用擔心對沒有類似問題的客戶端會有什么影響：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
border: 0;
}
</style>
</head>
<body>
<a >
<img src="logo.jpg" />
</a>
</body>上一節的css內容并沒有講完，這節繼續講后續的內容。
position 屬性定義建立元素布局所用的定位機制。
position: fixed; ：固定在窗口的某個位置。結合top、right、botom、left，確定固定的位置。
在頁面右下角放置一個返回頂部的按鈕，用position定位：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.gotop{
width: 45px;
height: 45px;
background-color: black;
color: yellow;
position: fixed;
right: 15px;
bottom: 60px;
}
</style>
</head>
<body>
<div ></div>
<div class="gotop">返回頂部</div>
</body>這里并不能實現返回頂部的效果，我們還需要后面才會學的JavaScript才能實現點擊之后返回頁面頂部。
再來實現一個始終顯示在頁面頂部的菜單：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bar{
height: 48px;
line-height: 48px;
background-color: red;
position: fixed;
top: 0;
left: 0;
right: 0;
}
</style>
</head>
<body >
<div class="bar">菜單</div>
<div class="bar" >菜單2</div>
<div >主要內容</div>
</body>和之前學的float一樣，這里使用position樣式之后，div也不再撐滿一整行了。我們通過設置left和right屬性，讓他往兩邊都撐滿了。下面的菜單2是沒有設置left和right的效果。
另外，因為使用position，會有一個分層的效果。下面的div標簽的內容也是從頁面頂部開始顯示的。為了不讓菜單蓋住主要內容，我們給下面的div設置了外邊距（margin-top）。分開了兩部分的內容。
這個和fixed都是決定定位。所以主要來看看和fixed的差別。把上面的返回頂部的例子里的position屬性修改為absolute，看看效果。乍一看，貌似一樣，但是如果滾動滾輪，就是發現，他會一起移動。也就是absolute絕對定位了之后，就會固定在父級元素之上。
把上面菜單的例子也改成absolute，菜單依然在頁面頂上，但是往下流量頁面 后，菜單就會向上滾出屏幕了。
ablolute單獨的應用場景不多，主要是結合下面要將講的相對定位一起使用。把一個元素絕對定位到另一個相對定位的元素上。
上面測試absolute的時候提到，他是絕對定位到它的父級元素上的。上面的例子中實際是決定定位在了整個頁面上。如果要將它定位在另外一個元素里，簡單的在外層加上一個元素標簽是沒用的。還需要在元素上加上 position: relative; 這個屬性，才會被識別為 absolute 的父級標簽。
<body>
<div >
<div >相對定位</div>
</div>
</body>設置偏移量：這里也有top、right、bottom、left屬性。這里設置的偏移量。如果設置偏移屬性，就是相對于其正常位置所進行的偏移。
用了position屬性之后，通過 margin: 0 auto 無法實現居中了。那么現在居中要怎么做呢。
偏移量的屬性不但可以使用像素（px），也是可以使用百分比的。設置為50%自然就居中了。但是這里定位是元素的起始位置，即左上角而不是中心。所以還得計算元素高度和寬度的一半，用外邊距把元素撐回去：
<body>
<div style="background-color: red;height: 80px;width: 80px;
position: fixed;top: 50%;left: 50%;
margin-top: -40px;margin-left: -40px;">正中間</div>
</body>元素應用了position屬性之后，就會出現分層的情況。position元素會始終位于其他標準元素的上層。如下的例子，無論div的先后順序如何，都是position元素在上層：
<body>
<div ></div>
<div ></div>
</body>如此，我們就把頁面分成了2層。那么有2層，就能有3層甚至多層。
z-index 屬性，設置元素的堆疊順序。僅能在定位元素上奏效（例如 position:absolute;）。數值越大，處于外層，可以是負數。不設置的話應該是0
<body>
<div ></div>
<div ></div>
<div ></div>
</body>例子中，如果不設置z-index，或者值設置的一樣，那么層級的關系就是不確定的。調整標簽的順序，效果會不一樣（后面的標簽會蓋住前面的）。設置了z-index后，我們就能確定定位元素的層級關系。
上面已經學了網頁的層級，下層的頁面會被上層的頁面覆蓋掉。這里我們可以設置標簽的opacity屬性，使得上層頁面不是完全覆蓋下面的內容，而是有一點的透明度。
opacity 屬性，透明度。取值范圍從 0.0 （完全透明）到 1.0（完全不透明）。
<body>
<div >網頁的內容</div>
<div ></div>
</body>我們可以設計一個這樣的頁面。平時顯示正常的內容（這是第一層）。當我們點擊了一個按鈕需要提交數據的時候，這時候需要屏蔽掉用戶對之前的頁面內容的操作。這時候出現一個第二層，半透明的覆蓋層，就如透明度里的例子那樣。然后再在頁面的中間彈出一個表單（第三層），讓用戶提交數據。這三層的代碼大概是這樣的：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.lv1{
background-color: aquamarine;
font-size: 64px;
}
.lv2{
background-color: #dddddd;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: 0.8;
}
.lv3{
height: 50px;
width: 100px;
position: fixed;
top: 30px;
left: 50%;
z-index: 3;
margin-left: -50px;
}
.disappear{
display: none;
}
</style>
</head>
<body>
<div class="lv1">網頁的內容</div>
<div class="lv2 disappear">
<!--覆蓋掉網頁的內容的半透明層-->
</div>
<div class="lv3 disappear">
<form action="https://www.baidu.com/s">
<input type="text" name="wd" title="搜索內容" />
<input type="submit" value="搜索" />
</form>
</div>
</body>直接打開頁面，應該只顯示了第一層的內容，另外兩層暫時設置了 display :none; 隱藏了。這里JS還沒學，網頁的內容里可以加上一個按鈕，觸發一個JS，修改一下.disappear里的display屬性，改成unset（就是沒有設置）。這里我們只能暫時先手動改一下看一下效果了。修改后，第二層和第三層的內容就都顯示出來了。先覆蓋掉頁面的內容，此時用戶無法在選擇第一層的內容了。然后中間是彈出的交互界面，用戶可以輸入內容提交表單，或者是以后會學的其他交互內容。
先來看一下顯示圖片的例子。找一張大一點的圖片，然后放在一個div里。div設置小一點的高度和寬度。效果如下：
<body>
<div >
<img src="1.jpg" />
</div>
<div >看看這個內容在哪里</div>
</body>這里雖然div設置了范圍，但是div中的圖片會按照正常尺寸顯示出來，并沒有受到上一層div標簽尺寸的限制，即溢出了。后面還加了一個div，可以看到是接在前一個div的范圍后顯示的。
要處理這個問題，我們可以為圖片也設置一個尺寸，比如： 。這樣可以顯示出整張完整的圖片，但是會自適應一個尺寸。
這里要講的是通過在div里設置overflow屬性，來處理溢出內容的處理規則（圖片尺寸不變）。overflow: hidden; ：內容會被修剪，并且其余內容是不可見的。overflow: auto; ：如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。overflow: scroll; ：同上，和auto一樣。
這里拿圖片舉例，但是實際應用中，各種可能會有溢出的情況都可以這么處理。一般圖片的處理更多的應該是設置一個img的尺寸，做一下縮放。而在一個有限大小的區域內要顯示很多的文字，更加適合用overflow：
<body>
<div >
這個屬性定義溢出元素內容區的內容會如何處理。
如果值為 scroll 或 auto，則會提供一種滾動機制。
如果值為 hidden，則溢出的部分會被修剪并隱藏。
默認值是 visible。
</div>當鼠標移動到元素上時，才會生效的css屬性。下面是一個菜單的例子，應用了hover實現了當鼠標放上去的時候，指向的那項會改變樣式：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
top: 0;
left: 0;
right: 0;
height: 48px;
line-height: 48px;
background-color: blue;
}
.pg-body{
margin-top: 48px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
color: white;
/*默認行內標簽不能設置高度，*/
/*這里設置了display: inline-block;，*/
/*這樣標簽就能有高度了*/
/*這樣a標簽就撐滿了整個區域。*/
/*這里也沒設置具體的高度，貌似默認就撐滿了。*/
display: inline-block;
padding: 0 10px;
}
.pg-header .menu:hover{
background-color: green;
color: red;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="menu">文件</a>
<a class="menu">編輯</a>
<a class="menu">查看</a>
<a class="menu">收藏</a>
</div>
</div>
<div class="pg-body">
<div class="w">主要的內容</div>
</div>
</body>另外這里a標簽樣式的設置也值得參考。這里設置了 display: inline-block; ，使得a標簽的高度可以撐滿整個div的高度。如果注釋掉display，a標簽的高度就只有文字的那點高度（可以通過鼠標懸停看到效果）。橫向的寬度這里推薦是用內邊距（padding）撐開的。
之前都是用background設置背景色，我們也可以用圖片當背景。代碼如下：
<body>
<div ></div>
</body>這里的效果會重復使用這張圖片平鋪在整個區域中。圖片的比例不變，多出的部分會裁剪掉。
利用平鋪的特性，可以實現漸變色背景的效果。做一個寬1像素，長1000像素的漸變圖片，在這張圖片里搞好漸變，然后作為背景圖片。被平鋪之后，就是一個漸變色背景了。這個方法應該是通用的。
在上面的基礎上，再增加一個background-repeat屬性可以顯示圖片進行平鋪。
<body>
<div ></div>
</body>background-repeat: no-repeat ：不允許平鋪background-repeat: repeat-x ：只能橫向平鋪background-repeat: repeat-y ：只能縱向平鋪
有這么一張圖：
好吧，是很多個小圖標拼成的一張圖，現在要顯示其中的一個圖標。我們可以這么做：
<body>
<div style="background-image: url('2.png');
background-repeat: no-repeat;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>這樣顯示第一個圖標沒問題，如果要顯示下面的圖標，我們需要把圖片往上移，這就用到了background-position屬性，給背景圖做一個定位：
<body>
<div style="background-image: url('2.png');
background-repeat: no-repeat;
background-position: 1px -119px;
border: 1px solid black;
height: 20px;
width: 20px;"></div>
</body>background-position-x 和 background-position-y 是單獨調整x軸和y軸。
上面的background屬性還可以簡寫成這樣：background: url(2.png) 1px -119px no-repeat; ，圖片路徑、縱向位移、橫向位移、是否平鋪。
這樣做的好處是，一次請求就獲得了好幾個圖標，減少了客戶端和服務端的交互次數。如果每一個小圖標都保存一張獨立的圖片，那么每次要獲取到一個新圖標可能還會發起一次請求。所以對于這種小圖標可以拼接在一張圖中使用。
做一個右邊有圖標的input框，類似這樣的：
運用上面講的定位和背景圖片的方法，把圖標定位到方框的右邊。
這里要注意，input的文字的輸入范圍右邊要小于整個邊框的范圍，否則最右邊的內容會被圖標擋住。
<body>
<div >
<input type="text" />
<span style="background: url(2.png) 1px -119px no-repeat;
display: inline-block;
height: 20px;width: 20px;
position: absolute;top: 5px;right: 0;"></span>
</div>
</body>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
