CSS
什麼是 CSS?
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式一般存儲在樣式表中
- 把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
- 外部樣式表能夠極大提升工做效率
- 外部樣式表一般存儲在 CSS 文件中
- 多個樣式定義可層疊爲一
三種方式插入CSS樣式：javascript
官方提供方法：css
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
/*External style sheet*/
/*type能夠省略*/
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
/*Internal style sheet*/
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Try it yourself »
/*Inline style*/
CSS選擇器
在標籤上設置style屬性html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--<body>-->
<div style="background-color: #0f98ce;height: 46px">123</div> <!--設置樣式 background-color，設置背景色，height設置高度，樣式間用;號隔開-->
<div>456</div>
<div>789</div>
</body>
</html>
給多個標籤設置屬性java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--<body>-->
<div style="background-color: #0f98ce;height: 46px">123</div> <!--設置樣式-->
<div style="background-color: rebeccapurple;height: 46px">456</div>
<div style="background-color: chartreuse;height: 46px">789</div>
</body>
</html>
咱們能夠看到代碼作了不少複製黏貼的工做，代碼的重用性不高，下面就引入選擇器。chrome
一、id選擇器app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{ /* 生成一個id選擇器*/
background-color: orangered;
height:48px;
}
</style>
</head>
<!--<body>-->
<div id = i1>123</div> <!--經過id選擇器選擇樣式，這裏注意，id不能重複-->
<div style="background-color: rebeccapurple;height: 46px">456</div>
<div style="background-color: chartreuse;height: 46px">789</div>
</body>
</html>
其實這種重用性仍是不高，咱們仍是得對每一個樣式再寫一遍。下面介紹class選擇器框架
二、class選擇器ide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{ /* 生成一個id選擇器*/
background-color: orangered;
height:48px;
}
.c1{ /*生成一個class選擇器，經過.加選擇器名稱生成*/
background-color: orange;
height: 50px;
}
</style>
</head>
<!--<body>-->
<div id = i1>123</div> <!--經過id選擇器選擇樣式，這裏注意，經過id選擇器id不能重複-->
<div class="c1">456</div> <!--經過class選擇器選擇樣式，class能夠共用一套選擇器樣式，使用場景較多-->
<div class="c1">789</div>
</body>
</html>
class選擇器就減小了代碼重用性，實際使用class選擇器也較多字體
三、標籤選擇器優化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{ /*標籤選擇器，全部div標籤都生成此樣式*/
background-color: orange;
height: 50px;
}
</style>
</head>
<!--<body>-->
<div >123</div>
<span >456</span>
<div >789</div>
</body>
</html>
四、層級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{ /*生成一個class選擇器，經過.加選擇器名稱生成*/
background-color: orange;
height: 50px;
}
.c1 div{ /*層級選擇器，用空格隔開，表示全部c1 class選擇器下的div標籤都生成此樣式*/
background-color: black;
height: 50px;
color: white;
}
</style>
</head>
<!--<body>-->
<div class="c1">123</div> <!--經過id選擇器選擇樣式，這裏注意，經過id選擇器id不能重複-->
<span class="c1">456
<div>asdd</div>
</span> <!--經過class選擇器選擇樣式，class能夠共用一套選擇器樣式，使用場景較多-->
<div class="c1">789</div>
</body>
</html>
五、組合選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{ /* 組合選擇器，用逗號隔開，表示id爲i1,i2,i3都用上此樣式*/
background-color: orangered;
height:48px;
}
</style>
</head>
<!--<body>-->
<div id="i1">123</div> <!--經過id選擇器選擇樣式，這裏注意，經過id選擇器id不能重複-->
<span id="i2">456
<div>asdd</div>
</span>
</body>
</html>
六、屬性選擇器
對選擇到的標籤再經過屬性再進行一次篩選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{ /*生成一個class選擇器，經過.加選擇器名稱生成*/
background-color: orange;
height: 50px;
}
input[n = "a1"]{ /*屬性選擇器，先篩選除input屬性，而後再根據屬性進行篩選，能夠是type屬性，n屬性等*/
height: 50px;
width: 100px;
}
.c1[n="a2"]{/*屬性選擇器，能夠搭配class選擇器*/
height: 100px;
width: 100px;
background-color: hotpink;
}
</style>
</head>
<!--<body>-->
<div id="i1">123</div>
<span class="c1" n="a2">456</span>
<div class="c1">789</div>
<input type="text" n="a1">
</body>
</html>
選擇器中引入多個樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: hotpink;
height: 50px;
}
.c1{
background-color: purple;
}
</style>
</head>
<body>
<div class="c1 c2"> <!--同時引入多個樣式，若是有相一樣式，在下面的優先級高-->
aaaaa
</div>
</body>
</html>
如今咱們CSS樣式都寫在HTML文件中，正確的寫在CSS文件中，在HTML文件中引用。
CSS文件commons.css
1 .c1{ 2 background-color: hotpink; 3 height: 50px; 4 } 5 .c1{ 6 background-color: purple; 7 }
HTML文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="commons.css" /><!--引入css樣式--> 7 </head> 8 <body> 9 <div class="c1 c2"> <!--同時引入多個樣式，若是有相一樣式，在下面的優先級高--> 10 aaaaa 11 </div> 12 </body> 13 </html>
CSS style樣式
邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red"> <!--設置邊框，1橡素，實體邊框，紅色-->
aaaaa
<h1></h1>
</div>
</body>
</html>
打開chrome調試能夠看到以下界面
咱們知道border會自動給咱們添加上下左右邊框，能夠指定顯示邊框，如border-left。solid實線邊框也能夠改成虛線邊框（dotted）。
高度、寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="
height:50px; /*設置高度*/
width: 50px; /*設置寬度*/
border:1px solid red;/*設置邊框*/
">
aaaaa
<h1></h1>
</div>
</body>
</html>
設置高度和寬度還能夠用%比的形式，由於高度是無限高的，因此若是對設置高度用百分比的話，要在外面包含一層來定義像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="
height: 30%; /*高度是無限高的，咱們在下拉的時候滾動條會一直往下拉，*/
width: 80%; /*用百分比顯示寬度*/
border:1px solid red;
">
aaaaa
<h1></h1>
</div>
</body>
</html>
關於高度沒法使用百分比，咱們能夠在嵌套一個div用來定義寬度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 1000px;width: 1000px;"> #先在外層定義高度和寬度的像素
<div style="
height: 30%; #此時咱們的%號就依據上面定義的像素百分比來顯示
width: 80%;
border:1px solid red;
">
aaaaa
<h1></h1>
</div>
</div>
</body>
</html>
style中其它經常使用樣式總結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="commons.css" /><!–引入css樣式–>-->
</head>
<body>
<div style="height: 1000px;">
<div style="
height: 40px; /* 設置高度*/
width: 80%; /* 設置寬度*/
border:1px solid red; /*設置邊框，1橡素，實體邊框，紅色*/
text-align:center; /*水平居中，還能夠設置left，right*/
line-height: 40px; /*垂直居中，px設置成height一樣像素*/
color: red; /* 設置字體顏色*/
background-color: purple; /* 設置背景色*/
font-size: 20px; /* 設置字體大小*/
font-weight: 300;/*字體加粗*/
">
aaaaa
<h1></h1>
</div>
</div>
</body>
</html>
CSS之float樣式
先來看一個樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%;background-color: red">123</div>
<div style="width: 80%;background-color: purple">456</div>
</body>
</html>
由於div是塊級標籤，經過chrome調試，咱們能夠看到兩個div標籤各佔一行，若是咱們要使兩個div標籤堆疊起來，那就讓兩個標籤浮動起來，就是接下來要講的float樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%;background-color: red;float: left">123</div> /*float=left表示往左漂，也能夠設置成right往右漂*/
<div style="width: 80%;background-color: purple;float: right">456</div>
</body>
</html>
效果能夠看到兩個div標籤堆疊在一塊兒了
若是width總和超過100%，則會另起一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 20%;background-color: red;float: left">123</div>
<div style="width: 90%;background-color: purple;float: right">456</div>
</body>
</html>
根據此特性，咱們也能夠用這個方法工整的排放圖片等。
float的一些應用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .pg-header{ 8 width: 100%; 9 background-color:#dddddd; 10 height: 38px; 11 line-height: 38px; /*垂直居中*/ 12 } 13 </style> 14 </head> 15 <body style="margin: 0 auto;"> <!--讓兩邊顯示不留空白--> 16 <div class="pg-header"> 17 <div style="float: left;">免費註冊</div> 18 <div style="float: right;">收藏夾</div> 19 </div> 20 <div style="width: 300px;border: 1px solid red"> 21 <div style="height: 30px;width: 90px;border: 1px solid purple;float: left"></div> 22 <div style="height: 30px;width: 90px;border: 1px solid purple;float: left"></div> 23 <div style="height: 30px;width: 90px;border: 1px solid purple;float: left"></div> 24 <div style="height: 30px;width: 90px;border: 1px solid purple;float: left"></div> 25 <div style="height: 30px;width: 90px;border: 1px solid purple;float: left"></div> 26 <div style="height: 30px;width: 90px;border: 1px solid purple;float: left"></div> 27 <div style="clear: both;"></div> <!--這句加上，是爲了顯示外邊框，至關於孩子漂（float）起來了，父親管不住糊了，須要在最後加一句約束下 --> 28 </div> 29 </body> 30 </html>
CSS之display樣式
塊級標籤與行內標籤轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;display: inline" >asd</div> <!--塊級標籤變行內標籤-->
<span style="background-color: purple;display: block" >asd</span><!--行內標籤變塊級標籤-->
</body>
</html>
這裏有個概念要知道，行內標籤沒法設置高度，寬度，padding和margin。下面說下display另一個屬性inline-block，顧名思義，就是即有inline的屬性又有block的屬性，此時若是咱們對span標籤設置inline-block屬性，咱們就能夠對span標籤設置高度和寬度了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;display: inline" >asd</div>
<span style="background-color: purple;width: 40px;height: 30px;display: inline-block" >asd</span> !--行內標籤即有inline屬性又有block屬性-->
</body>
</html>
還有一個display：none屬性，讓標籤消失。這個後面會慢慢講，先知道這個屬性
CSS之padding和margin樣式
padding內邊距，margin外邊距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: 1px solid red;height: 70px">
<div style="background-color: green;height: 50px;padding-top: 20px">123</div>
</div>
<br />
<div style="border: 1px solid red;height: 70px">
<div style="background-color: green;height: 50px;margin-top: 20px">123</div>
</div>
</body>
</html>
經過chrome調試能夠知道，padding內邊距，自身發生變化，隨着像素的增長而增長
margin外邊距，外邊距隨着像素的增長而增長
同理邊距還都有，left、bottom、right屬性.
CSS之position
position之屬性fix固定在頁面某個位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;right: 20px;bottom: 20px"> <!--當position屬性爲fixed，表示固定在界面某個位置，此時無論你放大縮小,都在這個位置，後面能夠跟left、right、top、bottom來固定位置-->
返回頂部
</div>
<div style="height: 5000px;background-color: #dddddd">
</div>
</body>
</html>
此時兩個div實際上是在兩個圖層了，並不在一個圖層上，即咱們正常的兩個div應該是塊級標籤，分段落實現，如今有了position，這兩個div就獨立佔一層了
若是要實現返回頂部的功能，須要用到js的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop()" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;right: 20px;bottom: 20px"> <!--當position屬性爲fixed，表示固定在界面某個位置，此時無論你放大縮小,都在這個位置，後面能夠跟left、right、top、bottom來固定位置-->
返回頂部
</div>
<div style="height: 5000px;background-color: #dddddd">
</div>
<script>
function GoTop() {
document.body.scrollTop = 0;
}
</script>
</body>
</html>
利用fixed把菜單欄固定在首行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 50px;
background: cornflowerblue;
position: fixed;
top: 0;
right: 0;
left: 0;
} /* 若是隻設置position:fixed，沒有設置位置，能夠發現頭部顯示不全*/
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 55px;
}/*當設置了position至關於分層了，此時能夠發現咱們的內容被遮住了，咱們須要使用magin-top使總體界面往下移*/
</style>
</head>
<body>
<div class="pg-header">
頭部
</div>
<div class="pg-body">
內容
</div>
</body>
</html>
position之absolute和relactive
假設如今有這麼一個需求，把小方框分別固定在這個位置
若是使用fixed屬性咱們須要知道具體像素，可是界面多是在不停變化的。咱們只能用相對位置和絕對位置來實現這個功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 500px;height: 100px;border: 1px solid red;margin: auto;position: relative">
<div style="height:40px;width:60px;position: absolute;top: 0;border: 1px solid red;">
</div>
</div>
<div style="width: 500px;height: 100px;border: 1px solid red;margin: auto;position: relative">
<div style="height:40px;width:60px;position: absolute;bottom: 0;right:0;border: 1px solid red;">
</div>
</div>
<div style="width: 500px;height: 100px;border: 1px solid red;margin: auto;position: relative">
<div style="height:40px;width:60px;position: absolute;bottom: 0;left:0;border: 1px solid red;">
</div>
</div>
</body>
</html>
我是這麼理解的，裏面div標籤的絕對位置是相對與外面的標籤的
CSS之用position實現3層界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index:10;height: 400px;width: 400px;background-color: cornflowerblue;position: fixed;">
</div> <!--經過z-index來指定優先級，顯示第三層。用百分比和margin來配合顯示居中，縮小窗口會變形-->
<div style="z-index:9;background-color: black;position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
opacity: 1"><!--指定opacity，來顯示第一層，若是沒指定則默認爲1，徹底覆蓋第一層,指定z-index顯示哪層優先級，數字越高，優先級越高-->
</div>
<div style="height: 5000px;background-color: red"></div><!--第一層-->
</body>
</html>
CSS之ovflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 300px;height: 300px">
<img src="1111.jpg">
</div> <!--當咱們在一個div裏面插入圖片，即便定義了寬度高度，若是圖片比定義的寬和高，同楊會把div撐大 -->
</body>
</html>
ovflow第一種用法，超過定義寬度高度截取。即只截取定義的寬度和高度的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 300px;height: 300px;overflow: hidden">
<img src="1111.jpg">
</div> <!--當咱們在一個div裏面插入圖片，即便定義了寬度高度，若是圖片比定義的寬和高，同楊會把div撐大 -->
</body>
</html>
ovflow第二種用法，超過定義寬度高度，顯示滾動條。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 300px;height: 300px;overflow: auto">
<img src="1111.jpg">
</div> <!--截取 -->
</body>
</html>
CSS之hover
當鼠標移到到標籤下，CSS屬性才生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: #2459a2;
position: fixed;
left:0;
top: 0;
right: 0;
line-height: 48px;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px;
color: white;
}
/*.menu:hover表示，當鼠標移到該標籤上時，如下CSS屬性才生效*/
.pg-header .menu:hover{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="menu">LOGO</a>
<a class="menu">所有</a>
<a class="menu">42區</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class="pg-body">
<div class="w">內容</div>
</div>
</body>
</html>
CSS之background補充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-image: url('1111.jpg');height: 980px;background-repeat: repeat-x">
</div><!--以此種方式插入圖片，若是div定義的大小比圖片大，則圖片會依次堆疊，能夠指定background-repeat是橫着加仍是豎着加-->
</body>
</html>
提取圖片的一部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--background-image插入圖片，需定義高度，否則圖片撐不起來，background-repeat:no-repeat表示圖片不堆疊-->
<div style="background-image: url('social.jpg');
background-repeat:no-repeat;
height: 200px;
width: 200px;
border: 1px solid red;
background-position-x: -275px;
background-position-y: -200px;">
<!-- height和width表示要截取的圖片大小，經過background-position-x和y來找到圖片，至關於把咱們定義的寬度和高度上下左右移到-->
</div>
</body>
</html>
一個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position:relative">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px">
<div style="position: absolute;right: 0;top: 10px;width: 16px;height: 16px;background-color: #2459a2;"></div>
</div>
</body>
</html>
CSS內容補充以後臺管理界面
在網上找個後臺管理界面，大體分爲三個部分，頂部菜單，左側菜單，內部部分
基本框架1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: #2459a2;
position: fixed;
top:0;
left: 0;
right: 0;
}
.pg-content .menu{
position: fixed;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top:48px;
left: 200px;
bottom: 0;
right: 0;
background-color: red;
overflow: auto; /*出現滾輪，當內容超過可顯示的界面，出現滾輪*/
}
</style>
</head>
<body>
<!--頭部-->
<div class = "pg-header"></div>
<!--中間部分-->
<div class = "pg-content">
<!--左側菜單欄-->
<div class = "menu">
aaa
</div>
<!--內容-->
<div class = "content">
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
</div>
</div>
<!--尾部-->
<div class = "pg-footer"></div>
</body>
</html>
基本框架之實現左側及頂部菜單欄不動，內容能夠動，優化版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.pg-header{
height: 48px;
background-color: #399bff;
/*position: fixed;*/
/*top:0;*/
/*left: 0;*/
/*right: 0;*/
}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color: #3d464d;
}
.pg-content .content{
position: absolute;
top:48px;
left: 200px;
bottom: 0;
right: 0;
/*background-color: red;*/
min-width: 980px; /*最小寬度，當小於此寬度，出現滾動條*/
overflow: auto; /*咱們只要註釋掉或則啓用該選項就能實現左側和內容都動，或則左側不動右側動*/
}
</style>
</head>
<body>
<!--頭部-->
<div class = "pg-header"></div>
<!--中間部分-->
<div class = "pg-content">
<!--左側菜單欄-->
<div class = "menu">
aaa
</div>
<!--內容-->
<div class = "content">
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
</div>
</div>
<!--尾部-->
<div class = "pg-footer"></div>
</body>
</html>
實現頭部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #399bff;
line-height: 48px; /*高度居中*/
}
.pg-header .logo{
width: 200px;
background-color: #2459a2;
text-align: center; /*文本居中*/
}
.pg-header .user{
width: 160px;
background-color: #1c9281;
height: 48px;
position: relative
}
.pg-header .user .a img{
width:40px;
height: 40px;
margin-top: 4px; /*設置頭像居中*/
border-radius: 50%; /*頭像變成圓形*/
}
.pg-header .user:hover{
background-color: #1b6d85; /*設置鼠標放上去變顏色*/
}
.pg-header .user .b{
width: 130px;
position: absolute; /*該absolute是相對user的位置*/
top: 48px;
right:40px;
background-color: #dddddd;
z-index: 10; /*與content涉及到分層，設置優先級*/
/*display: none;*/
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color: #3d464d;
}
.pg-content .content{
position: absolute;
top:48px;
left: 200px;
bottom: 0;
right: 0;
/*background-color: red;*/
min-width: 980px; /*最小寬度*/
overflow: auto; /*咱們只要註釋掉或則啓用該選項就能實現左側和內容都動，或則左側不動右側動*/
z-index: 9;
}
</style>
</head>
<body>
<!--頭部-->
<div class = "pg-header">
<div class = "logo left">我的空間</div>
<div class = "user right">
<a class = "a" href="#">
<img src="aaa.jpg">
</a>
<div class="b">
<a>個人資料</a>
<a>註銷</a>
</div>
</div>
</div>
<!--中間部分-->
<div class = "pg-content">
<!--左側菜單欄-->
<div class = "menu">
aaa
</div>
<!--內容-->
<div class = "content">
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
</div>
</div>
<!--尾部-->
<div class = "pg-footer"></div>
</body>
</html>
看一個小實驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item:hover{
background-color: #1b6d85;
}
.item:hover .b{
background-color: red; /*當咱們鼠標移動到item標籤下，就爲b標籤啓用此樣式*/
}
</style>
</head>
<body>
<div class = "item">
<div class = "a">123</div>
<div class = "b">456</div>
</div>
</body>
</html>
對以前代碼作改進，不用js實現菜單下拉
.pg-header .user:hover .b{
display: block; /*當鼠標放到user標籤時，展開選項*/
}
.pg-header .user .b{
width: 130px;
position: absolute; /*該absolute是相對user的位置*/
top: 48px;
right:40px;
background-color: #dddddd;
z-index: 10; /*與content涉及到分層，設置優先級*/
display: none; /*隱藏選項*/
}
#其它都不用變
.pg-header .user:hover .b{
display: block; /*當鼠標放到user標籤時，展開選項*/
}
找圖標樣式
一、圖標下載：https://fontawesome.com/
二、去網站上查找你要的圖標
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="fontawesome-free-5.0.6/on-server/css/fontawesome-all.min.css"> <!-- 引入css樣式-->
<style>
.item:hover{
background-color: #1b6d85;
}
.item:hover .b{
background-color: red; /*當咱們鼠標移動到item標籤下，就爲b標籤啓用此樣式*/
}
</style>
</head>
<body>
<div class = "item">
<div class = "a ">
<i class="fab fa-apple"></i> <!--插入圖標-->
</div>
<div class = "b">456</div>
</div>
</body>
</html>
完整版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="fontawesome-free-5.0.6/on-server/css/fontawesome-all.min.css">
<style>
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #399bff;
line-height: 48px; /*高度居中*/
}
.pg-header .logo{
width: 200px;
background-color: #2459a2;
text-align: center; /*文本居中*/
}
.pg-header .user{
/*width: 160px;*/
/*background-color: #1c9281;*/
height: 48px;
position: relative;
margin-right: 20px;
padding: 0 20px;
}
.pg-header .user .a img{
width:40px;
height: 40px;
margin-top: 4px; /*設置頭像居中*/
border-radius: 50%; /*頭像變成圓形*/
}
.pg-header .user:hover{
background-color: #1b6d85; /*設置鼠標放上去變顏色*/
}
.pg-header .user:hover .b{
display: block; /*當鼠標放到user標籤時，展開選項*/
}
.pg-header .user .b{
width: 130px;
position: absolute; /*該absolute是相對user的位置*/
top: 48px;
right:40px;
background-color: #dddddd;
z-index: 10; /*與content涉及到分層，設置優先級*/
display: none; /*隱藏選項*/
}
.pg-header .user .b a{
display: block;
}
.pg-header .img_fa{
padding: 0 20px;
}
.pg-header .img_fa .msg_num{
display: inline-block; /*變成塊級標籤*/
font-size: 12px; /*字體大小*/
padding: 8px;
background-color: red;
line-height: 1px; /*外層設置了line-height居中，這裏設置爲1px，讓字體上下佔最小寬度，否則會呈開*/
border-radius: 50%;
}
.pg-content .menu{
position: absolute;
top:48px;
left:0;
bottom: 0;
width: 200px;
background-color: #3d464d;
}
.pg-content .content{
position: absolute;
top:48px;
left: 200px;
bottom: 0;
right: 0;
/*background-color: red;*/
min-width: 980px; /*最小寬度*/
overflow: auto; /*咱們只要註釋掉或則啓用該選項就能實現左側和內容都動，或則左側不動右側動*/
z-index: 9;
}
</style>
</head>
<body>
<!--頭部-->
<div class = "pg-header">
<div class = "logo left">
我的空間
</div>
<div class = "user right">
<a class = "a" href="#">
<img src="aaa.jpg">
</a>
<div class="b">
<a>個人資料</a>
<a>註銷</a>
</div>
</div>
<div class="img_fa right">
<i class="far fa-comment"></i>
<span class = "msg_num">3</span>
</div>
<div class = "img_fa right">
<i class="fas fa-bell"></i>
</div>
</div>
<!--中間部分-->
<div class = "pg-content">
<!--左側菜單欄-->
<div class = "menu">
aaa
</div>
<!--內容-->
<div class = "content">
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
<p>asd</p><p>asd</p><p>asd</p><p>asd</p>
</div>
</div>
<!--尾部-->
<div class = "pg-footer"></div>
</body>
</html>
相關文章
- 1. CSS——CSS樣式
- 2. 【CSS】理解CSS
- 3. CSS Tools: Reset CSS
- 4. CSS——CSS基礎
- 5. CSS之CSS hack
- 6. CSS：關於CSS Hack
- 7. CSS animation & CSS animation 101
- 8. CSS+DIV-CSS與Javascript
- 9. css樣式 --- CSS hack
- 10. CSS 框架 Blueprint CSS
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章