【前端】:CSS_ZenDei技術網路在線

前言: 關於前端的第二篇博客，會寫關於css的，內容比較基礎。寫完這篇博客，會做一個類似美樂樂傢具的界面。good luck to me~ 一、css-引用樣式標簽上設置style屬性：引用樣式的三種方式: 第一種:在<body>直接定義與引用樣式第二種: 在<head>頭部加上下麵代碼(類似 ...

前言: 關於前端的第二篇博客，會寫關於css的，內容比較基礎。寫完這篇博客，會做一個類似美樂樂傢具的界面。good luck to me~

一、css-引用樣式

標簽上設置style屬性：

1 <body>
2     <div style="background-color: #2459a2;height: 48px;">第一層</div>
3     <div style="background-color: #2459a2;height: 48px;">第二層</div>
4     <div style="background-color: #2459a2;height: 48px;">第三層</div>
5 </body>

引用樣式的三種方式:

第一種:在<body>直接定義與引用樣式

1 <div style="color: red;font-size: 18px;">aa</div>

第二種: 在<head>頭部加上下麵代碼(類似全局變數)，然後在<body>引用: <div class="cc">c1</div>。PS:(如果class="cc", 那它就會去全局裡找.cc樣式。)

1     <style>
2         .cc{
3             color: red;
4             font-size: 50px;
5         }
6         .ccc{
7             color: green;
8         }
9     </style>

第三種：將需要引用的樣式存放在其它文件(eg:commons.css文件)中

然後在head頭部導入樣式: <link rel="stylesheet" href="commons.css" />, 再在body調用樣式: <div class="cc">c1</div>

關於優先順序，第一種最高(在body直接定義引用樣式)，推存使用第三種。如果在head頭部定義並且在body引用了兩種樣式，如下:

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .cc{
 6             background-color: blue;
 7         }
 8         .ccc{
 9             background-color: yellow;
10         }
11     </style>
12 </head>
13 <body>
14     <div class="cc ccc">
15         AA
16     </div>
17 </body>

如果樣式不衝突，則樣式cc和ccc都應用，如果樣式有衝突，那是優先應用cc還是ccc樣式？？

當引用了兩種有衝突樣式，兩種樣式都是在head定義的，head頭部中後一種定義的樣式會把前一種覆蓋，故上面代碼引用的是ccc樣式!!就算把第14行改為<div class="ccc cc">，仍是引用ccc樣式。

運行界面:

二、css-選擇器

選擇器(即尋找標簽): class選擇器、標簽選擇器、ID選擇器(這三種是重點，推薦使用class選擇器)

1、class選擇器（推薦）

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6             background-color: #2459a2;
 7             height: 48px;
 8         }
 9     </style>
10 </head>
11 <body>
12      <div class="c1">第一層</div>
13      <div class="c1">第二層</div>
14      <div class="c1">第三層</div>
15 </body>

2、標簽選擇器

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         div{
 6             background-color: #2459a2;
 7             height: 48px;
 8         }
 9     </style>
10 </head>
11 <body>
12      <div >第一層</div>
13      <div >第二層</div>
14      <div >第三層</div>
15 </body>

標簽選擇器，設置div樣式，則body里所有的div標簽內的內容都會應用此內容

3、id選擇器

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         #i1{
 6             background-color: #2459a2;
 7             height: 48px;
 8         }
 9     </style>
10 </head>
11 <body>
12     <div id="i1">第一層</div>
13 </body>

把樣式寫到head裡面，以#開頭命名，調用對應樣式在div里用id屬性指定相應的id名。

4、層級選擇器

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         span div{
 6             background-color: #2459a2;
 7             height: 48px;
 8         }
 9     </style>
10 </head>
11 <body>
12      <div >第一層</div>
13      <span>
14         <div >span里的div</div>
15      </span>
16      <div >第三層</div>
17 </body>

只讓span裡面的div標簽應用樣式，可多層嵌，類似於路徑

5、組合選擇器

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         a,p{
 6             background-color: cadetblue;
 7         }
 8     </style>
 9 </head>
10 <body>
11     <a>A</a>
12     <p>P</p>
13 </body>

表示a標簽或者p標簽可以引用定義的樣式。逗號表示或

運行界面:

6、屬性選擇器

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         input[name="James"]{width: 20px;height: 20px;}
 6     </style>
 7 </head>
 8 <body>
 9     <input type="text" name="James">
10     <input type="text">
11     <input type="password">
12 </body>

三、css-應用樣式

1、border

1 <body>
2     <div style="border: 1px dotted red;">
3         第一層邊框
4     </div>
5 <!--border：邊框寬度  solid：邊框樣式實線（dotted虛線）顏色：red-->
6 </body>

邊框其他樣式

 1 <body>
 2     <div style="height: 48px;
 3     width: 80%;
 4     border: 1px solid brown;
 5     font-size: 16px;
 6     text-align: center;
 7     line-height: 48px;
 8     ">第二層邊框</div>
 9  
10     <!--height: 48px 邊框高度-->
11     <!--width: 80% 寬度頁面的80%-->
12     <!--border: 1px solid brown 邊框寬度、樣式、顏色-->
13     <!--font-size: 16px;  字體大小-->
14     <!--text-align: center; 水平居中-->
15     <!--line-height: 48px; 垂直居中-->
16 </body>

運行界面:

2、float

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

1 <body>
2     <div style="width:500px;">
3         <div style="background-color:red;float:left;width:20%;">123</div>
4         <div style="background-color:green;float:left;width:50%">123</div>
5         <div style="background-color:yellow;float:right;width:20%">123</div>
6     </div>
7 </body>

裡面的div的寬度是以上一層div的寬度的標準的。

運行界面:

如果在父標簽加上background-color:blue;會發現結果與上圖一樣，並沒有顯示出藍色。

可以加上<div　style="clear:both;"></div>

1 <div style="width:500px;background-color:blue;">
2     <div style="background-color:red;float:left;width:20%;">123</div>
3     <div style="background-color:green;float:left;width:50%">123</div>
4     <div style="background-color:yellow;float:right;width:20%">123</div>
5     <div style="clear:both;"></div>
6 </div>

運行界面:

3、display

塊級標簽和行內標簽相互轉換

1 <body>
2     <div style="background-color: red;display: inline">塊級</div>
3     <span style="background-color: #2459a2;display: block">行內</span>
4 </body>

運行界面:

註：display:inline 轉換為行內標簽；display：block轉換為塊級標簽；另還有display：none不顯示

行內標簽：無法設置高度，寬度，padding margin
塊級標簽：可以設置高度，寬度，padding margin

1 <body>
2     <span style="background-color: yellow;display: inline-block;height: 50px;width: 70px">行內</span>
3     <div style="background-color: red;display: inline">塊級</div>
4 </body>

註：display:inline-block 既有inline的屬性（預設自己有多少占多少）又有block的屬性（可以設置高度、寬度、padding、margin）

運行界面:

4、margin,padding

margin 　外邊距 margin-top：上邊距
padding 內邊距

padding:20px 上下左右邊距都是20px
margin:10px 20px 10px 10px 分別指上右下左
padding:10px 20px 指上下與左右)
margin:　　　　　　　　　　同上

1 <div style="height:80px;border:1px solid red;">
2     <div style="height:60px;background-color:blue;margin: 10px;"></div>
3 </div>

運行示意圖:

5、position

fixed固定到瀏覽器界面某個位置

返回頂部按鈕:好多頁面都有返回頂部的按鈕，隨著你頁面的下拉，按鈕永遠在頁面的右下角，下麵就來實現：

1 <body>
2     <div style="width: 50px;height: 50px;background-color: black;color: white;
3     position: fixed;
4     bottom: 20px;
5     right: 20px;
6     ">返回頂部</div>
7     <div style="height: 5000px;background-color: #dddddd";>
8     </div>
9 </body>

View Code

實現動態效果，點擊返回頂部:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body style="margin: auto">
 8     <div onclick="GoTop();"  style="width: 50px;height: 50px;background-color: black;color: white;
 9     position: fixed;
10     bottom: 20px;
11     right: 20px;">
12         返回頂部
13     </div>
14     <div style="height: 5000px;background-color: #dddddd;margin: auto;">
15         ddddddddddddd
16     </div>
17 
18     <script>
19         function GoTop() {
20             document.body.scrollTop=0;
21         }
22     </script>
23 </body>
24 </html>

固定菜單欄：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg-header{
 8             height: 48px;
 9             background-color: darkorange;
10             color: #dddddd;
11             position: fixed;
12             top:0;
13             right: 0;
14             left: 0;
15         }
16         .pg-body{
17             background-color: #dddddd;
18             height: 5000px;
19             margin-top: 50px;
20         }
21     </style>
22 </head>
23 <body style="margin: 0">
24     <div class="pg-header">固定頭部</div>
25     <div class="pg-body">內容</div>
26 </body>
27 </html>

運行界面:

relative+absolute（相對與relative固定路徑）

1 <div style="position:relative;background:green;height:400px;width:500px;">
2     <div style="position:absolute;bottom:30px;right:30px;">123</div>
3 </div>

加了position:relative; 則子標簽的位置是相對父標簽來定位的；如果去掉positon:relative;則子標簽的位置是相對整個界面的定位的；

運行界面:

6、多層模態

用了position樣式實現三層頁面: 當頁面整個浮動在上面的時候，如果想讓頁面整體覆蓋底層頁面，要用到top,right,left,bottom屬性，而非margin-top、margin-left....

opacity:設置透明度（0~1之間）

z-index:設置層級（z-index越大，越放在頂層）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="z-index:10;position: fixed;top: 50%;left: 50%;
 9     margin-left:-250px;margin-top:-250px;background-color: wheat;
10     height: 500px;width: 500px"></div>
11 
12     <div style="z-index:9;position: fixed;background-color: black;
13     top: 0;
14     right: 0;
15     left: 0;
16     bottom: 0;
17     opacity: 0.5"></div>
18 
19     <