HTML和CSS總結

時間 2019-12-11

標籤 html css 總結欄目 HTML 简体版

原文原文鏈接

一：針對上節做業：css

1：html

實現：ide

code：佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             border: 0;
 9             border-left: solid red 1px;
10             border-right: solid red 1px;
11             height: 16px;
12             float: left;
13             margin-bottom: 0;
14             width: 40px;
15             text-align: center;
16         }
17         .b{
18             width: 85px;
19             height: 19px;
20             border: solid red 1px;
21         }
22         a{
23             text-align: center;
24             display: inline-block;
25             width: 20px;
26             line-height: 20px;
27             margin: 0;
28             float: left;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="b">
34         <a>+</a>
35         <input class="a" type="text" value="1"/>
36         <a>-</a>
37     </div>
38 </body>
39 </html>

效果：post

須要注意:spa

讓標籤周圍外距爲0：margin:0 auto;插件

讓標籤內的文本水平居中：text-align: center；設計

讓標籤垂直居中：line-height: 20px;調試

在display: inline-block;中默認有3px的邊距。解決方法float。code

2：改造標籤;咱們經過改造標籤的屬性來改造標籤的樣式。

3：<img>標籤默認帶有邊框。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8     <a href="http://www.jd.com">
 9     <img src="15.jpg">
10     </a>
11 </body>
12 </html>

如上代碼在低版本的IE 會出現邊框。須要加入以下樣式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         img{
 8             border: 0;/*須要加入該樣式才能夠*/
 9         }
10     </style>
11 </head>
12 <body>
13     <a href="http://www.jd.com">
14     <img src="15.jpg">
15     </a>
16 </body>
17 </html>

二:html標籤的補充

<img>標籤的補充。

1）當圖片不顯示的時候，每每會出現顯示一些波浪號等其餘的符號。這時候用alt屬性，當圖片不顯示的時候，會顯示alt的內容。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8     <img src="1.jpg" alt="圖片缺失">
 9 </body>
10 </html>

效果：

各個標籤的默認值補充：

1）<input> text類型標籤的默認值:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9        <input type="text" value="1" />
10    </span>
11 </body>
12 </html>

效果：

2）<input> radio類型的默認值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9        男：<input type="radio" name="a" checked="checked" />
10        女：<input type="radio" name="a" />
11    </span>
12 </body>
13 </html>

效果：

3）<input>標籤checkbox類型的默認值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9        basketball：<input type="checkbox" name="fav" checked="checked" />
10        football：<input type="checkbox" name="fav" />
11        swimming：<input type="checkbox" name="fav" checked="checked"/>
12        pingbang：<input type="checkbox" name="fav" />
13    </span>
14 </body>
15 </html>

效果：

4）select標籤的默認值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9     <select>
10         <option >北京</option>
11         <option>大連</option>
12         <option selected="selected">瀋陽</option>
13     </select>
14    </span>
15 </body>
16 </html>

默認狀況顯示的是第一個標籤。

添加默認值。修改顯示。

5）<textarea>默認值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9     <textarea>
10         123
11     </textarea>
12    </span>
13 </body>
14 </html>

效果：

總結：

1：<input>標籤的默認值，經過設置value(text)。或者經過checked=checked(radio checkbox)

2：<select>標籤的默認值，經過selected=selected來設置。

3：<textarea>經過在標籤之間設置值來設置默認值。

三：Css補充：

1：當咱們的需求一個樣式要全局生效而不是被其餘一樣的樣式覆蓋掉，須要使用!important.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             color: red;
 9         }
10         .b{
11             color:black;
12         }
13     </style>
14 </head>
15 <body>
16     <span class="a b">just test</span>
17 </body>
18 </html>

效果：

這種優先級下面的優先級高於上面的優先級。

用!important來增長 class="a"的優先級。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             color: red !important;
 9         }
10         .b{
11             color:black;
12         }
13     </style>
14 </head>
15 <body>
16     <span class="a b">just test</span>
17 </body>
18 </html>

效果：

應用場景：當咱們要求隱藏標籤的時候，使用display:none的時候，咱們但願在使用這個樣式的時候，就是隱藏標籤。而不是被display:block等覆蓋，能夠使用display:none !important;來解決這個問題。

2）屬性選擇器：咱們自定義屬性選擇器，來查找對應的標籤。經過[]形式查找。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a[cc=evil]{
 8             color:firebrick;
 9         }
10     </style>
11 </head>
12 <body>
13     <div class="a" cc="tom">just test</div>
14     <div class="a" cc="evil">just test</div>
15     <div class="a" cc="jack">just test</div>
16     <div class="a" cc="evil">just test</div>
17 </body>
18 </html

效果：

3)在使用width百分比的時候，須要注意一個問題：在定義百分比的時候，須要在外層定義這個標籤的寬度。才能夠使用百分比。

問題：

內容溢出.當窗口變小的時候。

採用外部標籤訂義寬度來解決。

底端出現左右拉取的橫條。

代碼：

1     <div class="a" style="background-color: red ;width: 1200px ">
2         <div class="a" style="width: 20%;background-color: aquamarine"> </div>
3         <div class="v" style="width: 80%;background-color: antiquewhite">dadadadaddadadadad
4         dadadadadadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
5         daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad
6         daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
7     </div>

注意：在使用寬度的百分比的時候須要在外部標籤訂義標籤的長度。

4）對於在滑動網頁的時候，標題欄一直在頭部的網頁實現方法：

利用postion的fixed 以及top:0 left:0 right:0

經過top:0,left:0,right:0來拉取寬度，而不是經過咱們定義寬度。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 <style>
 7     .a{
 8  /*width: 2200px; 注意不須要定義寬度*/
 9         position: fixed;
10         top: 0;
11         margin: 0 auto;
12         left: 0;
13         right: 0;
14         height: 50px;
15         background-color: red;
16         color:black;
17         line-height: 50px;
18         padding-left: 5px;
19     }
20     .c{
21         float: left;
22         height: 3500px;
23         margin-top: 50px;
24         color: black;
25     }
26 
27 </style>
28 </head>
29 <body>
30 <div class="a">
31     標題一 標題二 標題三
32 </div>
33 <div class="c">
34     熱點
35 </div>
36 
37 </body>
38 </html>

5）實現輸入框左邊或者右邊有圖片。以下效果：

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             width: 200px;
 9             position: relative;
10             height: 37px;
11         }
12         .b{
13             width: 150px;
14             /*border: 0;*/
15             height: 35px;
16             line-height: 37px;
17             padding-right: 50px;
18         }
19         .c{
20             position: absolute;
21             right: 0;
22             top:0;
23             height: 37px;
24 
25         }
26     </style>
27 </head>
28 <body>
29     <div class="a">
30         <input class="b" type="text" />
31         <img  class="c" src="2.png">
32     </div>
33 </body>
34 </html>

效果：

實現核心思想：經過postion：relative absolute 實現一個標籤相對另外一個標籤的位置。位置經過 top:0 、left:0、right:0等其中2個屬性肯定位置。正方形或者長方形肯定其中2個邊位置那形狀也肯定了。！！！！

6）對於寫html網頁的時候。建議以下分如下目錄：

 1 目錄介紹
 2 ├── App
 3 │   ├── *.html#存放html文件
 4 │
 5 │
 6 ├── css
 7 │    ├── *.css#存放css文件。
 8 │  
 9 ├── js
10 │  ├── *.js#存放js文件。
11 │ 
12 ├── picture
13 │  ├── #存放圖片。

7)在使用圖標的時候，能夠使用插件。

Font Awesome

下載地址:http://fontawesome.io/

使用方式：解壓到css目錄中。注意css目錄下有2個文件：

其中min文件是壓縮文件，裏面的內容由一行組成。在調試過程當中不建議使用min，以方便查看樣式。在上線的時候使用min。

使用圖標：點擊官網的icons或者訪問：http://fontawesome.io/icons/

查找對應圖標。並點擊。查看樣式css代碼。好比：

點擊查看：

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css"/><?--引用插件css文件-->
 7     <style>
 8         .c{
 9             color: red;/*給引用的樣式添加新的樣式*/
10         }
11     </style>
12 </head>
13 <body>
14      <i class="fa fa-leaf c" aria-hidden="true"></i><!--注意class引用多個樣式-->
15 </body>
16 </html>

效果：

8）對於float實現子標籤飄起來：

之後再使用float的時候，網頁須要有以下部分。好處自動撐起背景色。由於高度的不肯定性。

 1         .clearfix:after{
 2             content: '.';/*.撐起背景色*/
 3             display:block;/*默認是內聯標籤*/
 4             clear: both;/*讓子div float起來*/
 5             visibility: hidden;/*隱藏.*/
 6             height: 0;/*讓原先的.佔有高度變爲0*/
 7 
 8         }
 9     <div class="clearfix">
10         <div class="inner" style="float: left">OK</div>
11         <div class="inner1"style="float: left">good</div>
12     </div>

code:須要注意的是：背景色是在clearfix中定義的。不是在after中定義的。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .clearfix{
 8             background-color: red;
 9         }
10         .clearfix:after{
11             content: '.';/*.撐起背景色*/
12             display:block;/*默認是內聯標籤*/
13             clear: both;/*讓子div float起來*/
14             visibility: hidden;/*隱藏.*/
15             height: 0;/*讓原先的.佔有高度變爲0*/
16 
17         }
18         .inner{
19             float: left;
20 
21         }
22         .inner1{
23             float: left;
24             height: 50px;
25             background-color: #EEEE00;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="clearfix">
31         <div class="inner">OK</div>
32         <div class="inner1">good</div>
33     </div>
34 </body>
35 </html>

效果：

9）尖角的圖標的造成。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .a{
 8             display: inline-block;
 9             border-left: solid red 15px;
10             border-right: solid gold 15px;
11             border-bottom: blue solid 15px;
12             border-top: solid black 15px;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="a"></div>
18 </body>
19 </html>

效果：

若是想取其中的一一個三角，能夠用transparent透明色。來遮蓋其餘三角。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .a{
 8             display: inline-block;
 9             border-left: solid transparent 15px ;
10             border-right: solid transparent 15px;
11             border-bottom: blue transparent 15px;
12             border-top: solid black 15px;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="a"></div>
18 </body>
19 </html>

效果：

10）後臺管理頁面。利用absolute來肯定各個div的位置。

注意：給body標籤添加margin:0 auto保證主體部分沒有邊框！！！！

後臺管理的佈局：

code：利用absolute來固定位置。以及overflow 當內容溢出<div>的範圍的時候，自動給內容建立拉動的動做條。保證菜單不超出範圍。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pd_header{
 8             height: 45px;
 9             background-color: cornflowerblue;
10             line-height: 45px;
11             padding-left: 15px;
12         }
13         body{
14             margin: 0 auto;
15         }
16         .pd_body{
17             width: 200px;
18             background-color: blanchedalmond;
19             position: absolute;
20             top:45px;
21             left: 0;
22             bottom: 0;
23 
24         }
25         .pd_content{
26             position: absolute;
27             top:45px;
28             left:202px;
29             bottom: 0;
30             right:0;
31             background-color: #EEEE00;
32             overflow: scroll;/*注意這個樣式，當內容溢出的時候給內容建立一個拉動的動做條保證菜單不超出*/
33         }
34     </style>
35 </head>
36 <body>
37     <div class="pd_header">標題一</div>
38     <div class="pd_body"></div>
39     <div class="pd_content">
40         dadadadasdad<br/>
41         dadadadasdad<br/>
42     </div>
43 </body>
44 </html>

效果：

11)模擬對話框：

首先看下對話框的結構：

解釋：

1）底層上面有按鈕，當用戶點擊添加按鈕的時候，會彈出對話框。當對話框出現的時候，底層按鈕，用戶不能夠進行點擊。因此須要遮罩層。

2）遮罩層：主要做用是當用戶點擊添加按鈕的時候，用戶的不能夠點擊添加按鈕。

設計思想：當用點擊添加按鈕，按鈕不能夠點擊，對話框彈出。當用戶不點擊按鈕的時候，遮罩層和對話框是被隱藏的（display:none）。並且要保證遮罩層要在對話框下面(z-index)以及遮罩層的透明度（opacity 0是全透明0-1之間）。讓

用戶點擊按鈕，彈出對話框的時候能夠看到添加按鈕。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .fist{
11             height: 2000px;
12         }
13         .second{
14             position: fixed;
15             top:0;
16             left: 0;
17             right: 0;
18             bottom: 0;
19             background-color: black;
20             opacity: 0.4;
21             z-index: 11;
22         }
23         .modle{
24             height: 200px;
25             width: 400px;
26             background-color: #eeeeee;
27             position: fixed;
28             top: 50%;
29             left: 50%;
30             margin-left: -200px;
31             margin-top: -100px;
32             z-index: 12;
33         }
34         .text{
35             height: 200px;
36             width: 400px;
37             padding-right: 0;
38             padding-bottom: 0;
39             opacity:1;
40             color: red;
41 
42         }
43     </style>
44 </head>
45 <body>
46     <div><input type="button" value="提交"/></div>
47     <div class="fist">  </div>
48     <div class="second "></div>
49     <div class="modle ">
50                 <input  class="text" type="text"/>
51     </div>
52     <div class="fist"></div>
53 </body>
54 </html>