HTML+CSS
目錄javascript
前端知識點
網頁最主要由3部分組成：結構、表現和行爲。網頁如今的標準時W3C，目前的模式是HTML、CSS和Javascript。css
三部分都是作什麼的
1.HTML是什麼？html
HTML，超文本標記語言，簡單來講，網頁就是用HTML語言製做的。HTML是一種描述性語言，是一門很是簡單的語言。
2.CSS前端
CSS，全稱「層疊樣式表」。
3.JavaScriptjava
JavaScript是一種腳本語言。
4.這三者到底是幹什麼的？python
HTML定義網頁的結構 CSS定義網頁的表現 Javascript定義頁面的行爲
HTML
HTML簡介
HTML，全稱「超文本標記語言」，它是一種用於建立網頁的標記語言。標記語言是一種將文本以及文本相關的信息結合起來，展示出關於文檔結構和數據處理的計算機文字編碼。文本相關的信息與文本結合在一塊兒，可是使用markup標記。web
舉一個通俗的例子，就是一段文本，不但有該文本真正須要傳遞給讀者的信息，更有描述該段文本中各部分文字的狀況的信息，以下：編程
<問題>
<問題標題>我是否是最帥的？
<問題描述>這只是我本身說的
<回答>
<回答者>二狗子
<回答者簡介>我就是二狗子
<回答內容>你說什麼就是什麼啦!
<回答>
<回答者>阿拉斯加
<回答者簡介>我是阿拉斯加，我最愛斯家
<回答內容>最帥的確定是我阿拉斯加了
這個是咱們本身定義好的標記語言，這段標記語言中，包括了文檔自己的信息，也包括了文檔的結構和各部分的做用。可是HTML是世界通用的，用於描述一個網頁的信息和標記語言，咱們使用的瀏覽器具備將HTML文檔渲染並展現給用戶的功能。將上面那段標記語言翻譯成HTML，大概就是這樣：瀏覽器
<header>
<h1>我是否是最帥的？</h1>
<p>這只是我本身說的</p>
</header>
<div>
<div>
二狗子<span>,我就是二狗子</span>
</div>
<p>你說什麼就是什麼啦!</a></p>
<div>
阿拉斯加<span>,我是阿拉斯加，我最愛斯家</span>
</div>
<p>最帥的確定是我阿拉斯加了</a></p>
</div>
咱們寫好的HTML文件最終都會運行在瀏覽器上，由瀏覽器解析。安全
HTML標籤介紹
什麼是標籤呢？
1.在HTML中規定標籤使用英文的尖括號`<` 和 `>`包起來，例如：`<html>`,`<p>`等等 2.HTML中的標籤對一般是成對出現的，分爲開始標籤和結束標籤，結束標籤比開始標籤多了一個`/`，例如：`<p>`表示標籤的開始，能夠在裏面寫內容，而`</p>`則表明着標籤的結尾 3.標籤之間是能夠嵌套的，例如：div標籤裏嵌套p標籤<div><p></p></div> 4.HTML標籤是不區分大小寫的，好比`<h1>`和`<H1>`是不同的，可是建議都用小寫
HTML文檔結構
一個HTML文件是有本身固定的結構的
<!DOCTYPE HTML>
<html>
<header></header>
<body></body>
</html>
讓咱們來解釋下上面的代碼：
首先，<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標籤以前，代表該文檔是HTML5文檔。
<html>和</html>稱爲根標籤，全部的網頁標籤都在<html></html>中<head>和</head>標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部標籤有：<title>,<script>,<style>,<link>和<meta>等標籤- 在
<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>,<p>,<a>,<img>等網頁內容標籤，在<body>標籤中的內容最終會在瀏覽器中顯示出來
HTML註釋
不管是什麼編程語言，都要養成良好的註釋習慣，HTML中註釋的格式
<！--這是是註釋的內容--> # ctrl + /
而且咱們習慣了用註釋的標籤去包裹HTML代碼，如
<！--xx部分的開始-->
這裏存放xxx部分的代碼
<！--xx部分的結束-->
HTML註釋的注意事項：
1. HTML註釋不支持嵌套 2.HTML註釋不能卸載HTML標籤中
head標籤相關的內容
咱們首先來介紹一下head標籤的主要內容和做用，文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、編碼方式以及URL等信息，這些信息大部分是用於提供索引、辨認和其餘方面的應用等。如下的標籤是用在head標籤中：
<head lang='en'>
<title>標題信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
title標籤
title標籤：在<title>和</title>標籤之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標籤頁的標題欄中。能夠把它堪稱是一個網頁的標題。主要是用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。
接下來咱們就作一個小練習，來看看什麼是title標籤：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>泰然城</title>
</head>
<body>
</body>
</html>
將上面的文件保存，而後用瀏覽器打開，就能看到下面的內容
因爲是pycharm編寫的，因此圖標天然就是pycharm了
meta標籤
元素可提供有關頁面的原信息，針對搜索引擎和更新頻率的描述和關鍵字。
標籤位於文檔的頭部，不包含任何內容。
提供的信息用戶是不可見的。
meta標籤的兩個屬性：http-equiv,name
http-equiv屬性
它的做用是向瀏覽器傳達一些有用的信息，幫助瀏覽器正確的顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值：
<!--重定向 2 秒後跳轉到對應的網址，注意分號--> <meta http-equiv='refersh' content='2;URL=http://www/baidu.com'> <!--指定文檔的內容類型僞html，編碼類型爲utf-8--> <meta http-equiv='Content-Type' content='text/html;charset='utf-8' /> <!--告訴IE瀏覽器以最高級別模式渲染當前網頁--> <meta http-equiv='x-ua-compatible' content='IE=edge'>
name屬性
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字之間能夠有多個，須要用,;隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的：
<meta name='keywords' content='meta總結,html meta,meta屬性,meta跳轉'> <meta name='description' content='泰然城'>
其餘標籤
<!--標題--> <title>泰然城</title> <!--網站的圖標，就好比剛剛咱們說pycharm的圖標，也是能夠更換的--> <link rel='icon' herf=fav.ico> <!--定義內部樣式表--> <style></style> <!--引入外部樣式表--> <link rel='stylesheet' href='index.css'> <!--定義javascript代碼或引入javascript文件--> <script src='myscript.js'></script>
body標籤
想要在網頁上展現出來的內容必定要放在body標籤中。讓咱們來舉例看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body標籤</title>
</head>
<body>
<h1>海燕</h1>
<p>在蒼茫的大海上，</p>
<p>狂風捲集着烏雲。</p>
<p>在烏雲和大海之間，</p>
<p>海燕像黑色的閃電，</p>
<p>在高傲地飛翔。</p>
</body>
</html>
打開瀏覽器查看效果：
經常使用標籤一
h1-h6
h1-h6標籤可定義標題。h1定義最大的標題。h6定義最小的標題。
h1-h6的默認樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>h1-h6的默認樣式</title>
</head>
<body>
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
</body>
</html>
打開瀏覽器查看一下效果：
段落標籤P
定義段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p標籤</title>
</head>
<body>
<p>小泰良品 珍珠白系列化妝刷套裝8支裝 </p>
<p>化妝刷套裝8支裝，內含粉底刷/高光刷/眼影刷/散粉刷/腮紅刷/眉粉刷/脣刷/睫毛卷</p>
<p>參考價 ¥ 129.00</p>
</body>
</html>
打開瀏覽器查看效果
若是此時咱們但願在這段文字中特別強調某幾個字，這個時候就須要用到<em>或<strong>標籤，讓咱們來看看
<p>小泰良品 <strong>珍珠白系列化妝刷套裝</strong>8支裝 </p> <p>化妝刷套裝8支裝，內含粉底刷/高光刷/眼影刷/散粉刷/腮紅刷/眉粉刷/脣刷/睫毛卷</p> <p>參考價 ¥ 129.00</p>
打開瀏覽器查看效果
是否是特別的有意思呢？還有不少文本樣式標籤呢
1.<b></b>：加粗 2.<i></i>：斜體 3.<u></u>：下劃線 4.<sup></sup>：上標 5.<sub></sub>：下表 6.<em>：表示強調，會用斜體表示 7.<strong>：表示更強烈的強調，會用粗體來表示
瀏覽器展現特色：
1.跟普通文本同樣， 但咱們能夠經過css來設置當前段落的樣式
2.塊級元素，獨佔一行
超連接標籤a
超級連接<a>表明一個連接點。它的做用是把當前位置的文本或圖片連接到其餘的界面、文本或圖像，要說的很少直接寫吧：
<!--在不少時候咱們都是經過點擊一個東西跳轉到另外一個界面中，如今你就能夠作到了-->
<!--
在這段代碼中，其中href表明即將跳轉的地址
target:_blank：在新的網站在打開連接地址
_self：在當前網站打開連接地址
title：表明鼠標懸停時顯示的標題
-->
<body>
<a href="http://www.baidu.com" target="_blank" title="這是百度首頁">點擊跳轉到百度</a>
</body>
<!--利用a標籤下載東西--> <a href="./file.zip">下載文件</a>
<!--利用a標籤打開郵箱--> <a href="xiaoyafei@aliyun.com"></a>
<!--咱們常常能夠看到跳轉到頂部的字樣，如今你也能夠了--> <a href='#'>跳轉頂部</a>
<!--返回某個ID，意思就是一個網頁太多內容，能夠經過點擊一個連接標籤，返回到連接的身上去，這個演示的效果不太明顯--> <p style="height: 2000px;" id="s1">這裏是段落</p> <a href="#s1">跳轉到ID</a>
<!--
javascript:alert(點擊了a標籤)表示在觸發<a>默認動做時，執行一段javascript代碼
javascript:;表示什麼都不執行
-->
列表標籤 ul ol
網站頁面上展現一些列表相關的內容，好比說物品列表、人名列表均可以使用標籤來展現。一般後面和<li>標籤一塊兒用，每條li表示列表的內容
<ul>：無序列表
<ol>：有序列表
<ul>
<li>姓名</li>
<li>年齡</li>
<li>職業</li>
<li>出生年月</li>
</ul>
<ol>
<li>姓名</li>
<li>年齡</li>
<li>職業</li>
<li>出生年月</li>
</ol>
打開瀏覽器，查看效果
ol標籤的屬性
type：列表標識的類型
- 1：數字
- a：小寫字母
- A：大寫字母
- i：小寫羅馬字符
- I：大寫羅馬字符
ul標籤的屬性
type:列表表示的類型
- disc：實心圓
- circle：空心圓
- square：實心矩形
- none：不顯示標識
隨便舉個例子來看一下
<ul type="none">
<li>姓名</li>
<li>年齡</li>
<li>職業</li>
<li>出生年月</li>
</ul>
打開瀏覽器查看一下
盒子標籤div
<div>能夠定義文檔的分區，<div>標籤能夠把文檔分割成獨立的、不一樣的部分，讓咱們看一下淘寶商城首頁，我劃分一下大體就明白了
全部被我用方框框起來的都是一個比較大的div，那麼如今你就能明白 div標籤爲何能把文檔分割開來了吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div標籤</title>
</head>
<body>
<div id="warp">
<div class="para">
<p style="height: 1000px" id="p1">小泰良品</p>
</div>
<div class="anchor">
我是普通的文本
<h1>
<a href="http://www.baidu.com" target="_blank" title="點擊跳轉">跳轉到百度</a>
<a href="xiaoyafei@aliyun.com">聯繫咱們</a>
<a href="#">跳轉到頂部</a>
<a href="#p1">跳轉到小泰良品</a>
</h1>
</div>
<div class="list">
<ul type="circle" >
<li>個人帳戶</li>
<li>個人訂單</li>
<li>個人優惠券</li>
<li>退出</li>
</ul>
<ol type="a" >
<li>個人帳戶</li>
<li>個人訂單</li>
<li>個人優惠券</li>
<li>退出</li>
</ol>
</div>
</div>
</body>
</html>
上面的代碼能夠看作成下面的層次結構
<div id='warp'>
<div class='para'></div>
<div class='anchor'></div>
<div class='list'></div>
</div?
咱們將文檔放在一個父級的div中，它裏面包含三塊div區域，瀏覽器查看效果，你會發現每個小塊區域都是獨佔一行的，因此div是塊級元素，另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你能夠把它當作給這個區域起的名字，id是惟一的，一個頁面中不能有相同的id，class能夠設置一樣的屬性值，而且能夠設置多個
圖片標籤img
一個網頁中除了有文字，還會有圖片，咱們使用<img>標籤在網頁中插入圖片
語法：<img src='圖片地址' alt='圖片加載不出來時顯示的內容' title='提示信息'
注意：
- src設置的圖片的地址能夠是本地的也能夠是網絡上的
- 圖片的格式能夠是png、jpg、gif
- alt屬性的值會在加載圖片失敗時顯示在網頁上
- 還能夠爲圖片設置寬度和高度，不設置的話就是默認寬度和高度
- 與行內元素在一行內顯示
- 能夠設置寬度和高度
- span標籤能夠單獨摘出某個內容，結合CSS設置相應的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img標籤</title>
</head>
<body>
<div>
<span>與行內元素展現的標籤</span>
<span>與行內元素展現的標籤</span>
<img src="" alt="小泰良品" style="height: 80px;width: 120px;">
<img src="" alt="優駟卡" style="height: 80px;width: 120px;">
</div>
</body>
</html>
打開瀏覽器查看一下效果，這裏就是沒有這張圖片
其餘標籤
換行標籤br
<br>標籤用來將內容換行，其在HTML網頁上的效果至關於咱們平時使用word編輯文檔時回車同樣
分割線hr
<hr>標籤用來在HTML頁面中建立水平分割線，一般用來分割內容
特殊符號
瀏覽器在顯示的時候會把多個空格或者換行移除掉，只顯示一個換行或空格，若是想用到多個空格的話，咱們須要使用特殊符號
經常使用的特殊字符
| 內容 | 代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版權 | © |
| 註冊 | ® |
經常使用標籤二
表格標籤table
如圖，有一個表格，咱們要用table標籤來實現
表格由<table>標籤來定義。每一個表格都有不少行不少列，每一個表格均有若干行用<tr>標籤訂義，每行被分割的單元格用<td>標籤表示（每一個單元格的數據）,數據單元格能夠包含文本、圖片、列表等等
那麼，如今就讓咱們寫一下這個課程表吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>課程表</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
打開瀏覽器查看一下效果
接下來還有一個表格
那麼這個表格該如何實現呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>課程表</title>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</thead>
<tr>
<td rowspan="3">上午</td>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
<td>化學</td>
<td>英語</td>
<td>生物</td>
</tr>
<tfoot>
<td colspan="6">三年二班課程表</td>
</tfoot>
</table>
</body>
</html>
實驗效果爲：
表單標籤form
表單是一個包含表單元素的區域
表單元素是容許用戶在表單中輸入內容，好比：文本域、輸入框、單選框
表單的做用
表單用於顯示、手機信息，並將信息提交給服務器
1.語法：
<form>容許出現表單控件</from>
2.屬性：
3.表單控件分類：
讓咱們本身寫例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表單</title>
</head>
<body>
<div>
<form action="http://www/baidu.com" method="get">
<p>
<label for="user">用戶名：</label>
<input type="text" name="username" id="user">
</p>
<p>
<label for="pwd">密碼：</label>
<input type="password" name="password" id="pwd">
</p>
<p>
<input type="submit" name="btn" value="提交">
<input type="reset" name="btn2" value="重寫">
</p>
</form>
</div>
</body>
</html>
要講一下get和POST請求：get請求是默認值，是一種明文提交的方式，所提交的數據能夠顯示在地址上，安全性比較低，而POST請求是一種隱式請求，它所提交的內容，不會顯示在地址欄上
GET請求圖：
讓咱們換一下POST請求，這樣就沒有了：
表單控件練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單控件</title>
</head>
<body>
<!--讓用戶輸入用戶名，密碼，選中所在的城市，以及用戶愛好，輸入想說的話-->
<div class="form">
<form action="http://www.baidu.com">
<p>
<label for="username">用戶名：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="pwd">密碼：</label>
<input type="password" name="password" id="pwd">
</p>
<p>
性別：
<input type="radio" name="sex" value="男" checked="">男
<input type="radio" name="sex" value="女">女
</p>
<p>
<label for="happy">用戶愛好：</label>
<input type="checkbox" name="checkfav" value="吃">吃
<input type="checkbox" name="checkfav" value="玩">玩
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="樂">樂
</p>
<p>
<label for="">自我介紹：</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label for="">來自：</label>
<select name="sel" id="">
<option value="深圳" >深圳</option>
<option value="北京" selected>北京</option>
<option value="上海" >上海</option>
<option value="廣州" >廣州</option>
</select>
</p>
<p>
<input type="submit" name="btn" value="提交">
<input type="reset" name="btn1" value="重寫">
</p>
</form>
</div>
</body>
</html>
那麼 寫完了以後，瀏覽器顯示是這樣的：
雖然很low，可是滿滿的成就感！
HTML標籤屬性
HTML標籤能夠設置屬性，屬性通常以鍵值對的方式寫在開始標籤中
<div id='i1'>這是一個div標籤</div> <p class='p1 p2 p3'>這是一個段落標籤</p> <a href='http://www.baidu.com'>這是一個連接</a> <input type='button' onclick='addclick()'></input>
爲何可以設置屬性呢？
其實，最終咱們這些標籤都會通過CSS去梅花，經過javascript來操做，那麼這些標籤就能夠堪稱是一個對象，那麼對象就有本身的方法和屬性。按照上面的input標籤，type就是它的屬性，onclick就是它的方法
關於標籤屬性的注意事項：
1. HTML標籤除一些特定屬性外能夠設置本身的屬性，一個標籤能夠設置多個屬性，可是要用空格分隔開，多個屬性不區分前後順序 2. 屬性值要用引號包裹起來，一般使用雙引號 3. 屬性和屬性值不區分大小寫，可是推薦小寫
HTML標籤分類
在以前咱們也學過了不少的標籤，可是你知道嗎?HTML標籤能夠分爲三種不一樣的類型：塊狀元素，行內元素，行內塊狀元素
經常使用的塊狀元素：
div p h1 h6 ol ul table form li
經常使用的行內元素：
a span br hr i em strong label
經常使用的行內塊狀元素：
img input
塊級元素特色：display:block;
- 每一個塊級元素都重新的一行開始，並且後面跟着的元素也另起一行
- 元素的告訴、寬度、行高以及頂和底邊距均可設置
- 元素寬度在不設置的狀況下，是它自己父容器的100%，除非設定一個寬度
啥也不說了，讓咱們來實驗說明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊級元素</title>
</head>
<body>
<div>
<p>這是第一個段落</p><p>只是第二個段落</p><a href="http://www.baidu.com">點擊跳轉到百度</a>
<p style="height: 50px">這就是第三個段落了</p>
<p>
<a href="http://jd.com">京東商城</a>
<span>111111111111</span>
<strong>北京真大啊</strong>
</p>
</div>
</body>
</html>
打開瀏覽器查看效果h
行內元素特色：display:inline;
- 和其餘元素都在一行上
- 元素的高度、寬度及頂部和底部邊距不可設置
- 元素的高度就是它包含的文字或圖片的寬度，不可改變
實踐是檢驗真理的惟一標準：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內元素</title>
</head>
<body>
<div>
<a href="http://www.baidu.com" style="height: 100px">跳轉到百度</a>
<span>這裏...還有那裏...</span>
<strong>啊啊啊，我很開心啊</strong>
</div>
</body>
</html>
打開瀏覽器查看效果
行內塊狀元素特色：display:block-inline;
- 和其餘元素都在一行
- 元素的高度、寬度、行高以及頂部和底部邊距均可以設置
少說廢話多寫實驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內塊狀元素</title>
</head>
<body>
<div>
<from>
<label for="user">用戶名：</label>
<input type="text" name="username" id="user" style='background-color: gold;width: 400px;'>
</from>
</div>
</body>
</html>
打開瀏覽器查看效果：
和行內元素在同一行，同時修改了輸入框的寬度
標籤嵌套規則
塊內元素內可嵌套行內元素或者某些塊級元素，可是行內元素卻不能包含塊級元素，行內元素只能包含其餘的行內元素
塊級元素不能放p標籤裏面
CSS
爲何須要CSS?
一個字醜！
CSS的出現解決了下面兩個問題:
- 將HTML頁面的內容與樣式分離
- 提升web開發的工做效率
什麼是CSS
CSS是指層疊樣式表，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中。也就是說把HTML元素的樣式都贊成收集起來寫在一個地方或一個CSS文件中
所謂的層疊，你能夠理解成堆盤子，最下面的碟子什麼顏色你不知道，可是你確定知道最後一個碟子的顏色，那麼對於CSS來講，就至關於，我是上面的碟子，下面一樣還有個人碟子，等我把上面的碟子拿走你就知道下面的碟子是什麼樣子了。
CSS的優點
- 內容與表現分開了
- 網頁的表現贊成，容易修改
- 豐富的樣式使頁面佈局更加靈活
- 減小網頁的代碼量，增長網頁瀏覽器的速度，節省貸款
- 運用獨立頁面的CSS，有利於網頁被搜索引擎搜錄
CSS基礎語法
CSS語法能夠分爲兩部分:
1.選擇器
2.聲明
聲明是由屬性和值組成的，多個聲明之間用分號，例如：
選擇器{
聲明1；
聲明2；
聲明3；
}
<!--更換成實際的代碼-->
h1{
font-size:20px;
color:green;
}
CSS的三種導入方式
- 內聯樣式
- 行內樣式
- 外部樣式
其中外部樣式還分爲 連接式 與 導入式
<link rel="stylesheet" href="" type="text/css">
<!--其中：
href裏的東西成爲文本路徑
stylesheet表明使用外部樣式表
type表明文件類型，可寫可不寫
-->
內部樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的3種導入方式</title>
<style type="text/css">
h1{
color: red;
}
</style>
</head>
<body>
<div>
<h1>這是個人段落</h1>
</div>
</body>
</html>
行內樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的3種導入方式</title>
</head>
<body>
<div>
<h1 style="color: green;">這是個人段落</h1>
</div>
</body>
</html>
連接式
<!--首先須要在當前目錄下建立 01 index.css文件，須要使用link標籤
在01 index.css中寫的樣式表將會被連接進來，對於h1一樣會有效果
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的3種導入方式</title>
<link rel="stylesheet" href="./01%20index.css">
</head>
<body>
<div>
<h1>這是個人段落</h1>
</div>
</body>
</html>
導入式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的3種導入方式</title>
<style type="text/css">
@import url('01 index.css');
</style>
</head>
<body>
<div>
<h1>這是個人段落</h1>
</div>
</body>
</html>
使用連接式與導入式的區別：
1.link標籤屬於XHTML，而@import式屬性css2.1 2.使用link連接的css文件先加載到網頁當中，再進行便宜顯示 3.使用@import 導入的css文件，客戶端先顯示HTML結構，再把CSS文件加載到網頁當中 4.@import是屬於css2.1特有的，對於不兼容的瀏覽器來講是無效的
基本選擇器
基本選擇器包括：
- 標籤選擇器
- 類選擇器
- ID選擇器
- 通用顯示器
標籤選擇器
顧名思義，標籤選擇器就是根據標籤來選中，例如div標籤、p標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標籤選擇器</title>
<style type="text/css">
p{
font-family: 微軟雅黑;
color: green;
}
</style>
</head>
<body>
<div>
<p>這是一個段落</p>
<p>這個真的不是段落</p>
</div>
</body>
</html>
打開瀏覽器查看效果
那麼標籤選擇器的特色是：
- 標籤選擇器能夠選中全部的標籤元素
- 無論標籤藏的有多深，都可以所中的，都能選中全部的而不是某一個，因此說標籤選擇器選中是共性，而不是特有的屬性
缺點：
- 優勢就是缺點，想對個別的標籤進行定製的時候，就不能如願以償
ID選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID選擇器</title>
<style type="text/css">
#myDiv{
background-color: #666666;
}
#myP{
font-family: 微軟雅黑;
font-size: 35px;
color: red;
}
#myH{
color: green;
}
</style>
</head>
<body>
<div id="myDiv">
<p id="myP">我是一個段落</p>
<h1 id="myH">我是H1標籤</h1>
</div>
</body>
</html>
打開瀏覽器查看效果
ID選擇器，就是根據ID去更改屬性，而ID是整個頁面中惟一的，因此能夠定製化樣式
特色：
- 同一個頁面中ID不能重複,由於這是規則
- 若是不給父級元素設置高度，子元素就會將父元素撐開
- 任何的標籤均可以設置ID，可是ID的命名須要規範
類選擇器
python中定義類是用class，那麼類選擇器選中的就是這個class的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style type="text/css">
.p1{
font-family: 微軟雅黑;
font-size: 20px;
}
.p2{
color: red;
font-family: 宋體;
}
.s1{
font-size: 30px;
font-family: 黑體;
}
</style>
</head>
<body>
<div>
<p class="p1">我是第1個段落</p>
<p class="p2">我是第2個段落</p>
</div>
<div>
<strong class="s1">小泰良品</strong>
</div>
</body>
</html>
打開瀏覽器查看效果
類選擇器的特色：
- 類是能夠重複使用的
- 同一個標籤中能夠攜帶多個類，用空格隔開
類的使用徹底能夠決定一個工程師CSS的水平，不信你看看這道題，給你10秒鐘思考一下怎麼寫？
因爲上面剛剛講了類選擇器，可能你們就會一個類一個類的去寫，可是個人方法是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類的小練習</title>
<style type="text/css">
.gr{
color: green;
}
.big{
font-size: 30px;
}
.un{
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<p class="gr big">段落1</p>
<p class="gr un">段落2</p>
<p class="big un">段落1</p>
</div>
</body>
</html>
打開瀏覽器查看效果
這樣，會不會節省了代碼量了
通用選擇器
所謂的通用選擇器，其實就是通配符，用*去選擇全部的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用選擇器</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<div>
<p>
這是第一個段落
</p>
<p>
這是第二個段落
</p>
</div>
</body>
</html>
打開瀏覽器查看效果
通用選擇器用的不多，由於它的自己性能不好
高級選擇器
所謂的高級選擇器，分爲五大類
- 並集選擇器(組合選擇器)：多個選擇器經過逗號鏈接而成，同時聲明多個風格相一樣式
- 交集選擇器：由兩個選擇器鏈接構成，選中兩者範圍的交集，兩個選擇器之間不能由空格，第一個選擇器必須是標籤選擇器，第二個必須是類選擇器或者ID選擇器
- 後代選擇器：兒子、孫子；外層的選擇器寫在前面，內層的選擇器寫在後面，之間用空格分割，標籤嵌套時，內層的標籤成爲外層標籤的後代
- 子元素選擇器：兒子，女兒，經過>連接在一塊兒
後代選擇器
由於HTML元素能夠嵌套，因此咱們能夠從某個元素的後代查找特定元素，並設置樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
div p,ol{ # 也能夠用類選擇器，也能夠div div ol{}
color: red;
}
</style>
</head>
<body>
<div>
<p>我是一個段落</p>
<div>
<ol>
<li>個人電腦</li>
<li>網絡</li>
<li>回收站</li>
</ol>
</div>
</div>
</body>
</html>
打開瀏覽器查看效果
後代選擇器就能夠理解成個人兒子、孫子、孫女這樣的，在代碼上體現就是在div的後代中找p，ul標籤，設置字體的顏色，究竟是怎麼選的，是由瀏覽器去決定的
子元素選擇器
在xxx元素的直接下代找到xxx元素，而且設定屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素選擇器</title>
<style type="text/css">
div>p{
color: red;
}
div>ul{
color: green;
}
</style>
</head>
<body>
<div>
<p>我是一個元素</p>
<div>
<ul>
<li>個人電腦</li>
</ul>
</div>
</div>
</body>
</html>
每個div均可以想當成一個父級，而後去子類找到p或者ul標籤，而後進行修改屬性
效果
交集選擇器
選中兩個標籤的交集的部分進行屬性的修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集選擇器</title>
<style type="text/css">
h3{
width: 300px;
}
.active{
color: red;
}
h3.active{
background-color: #44ff9e;
}
</style>
</head>
<body>
<div>
<p>
<h3 class="active">我是H3標題</h3>
</p>
</div>
</body>
</html>
圖解：
並集選擇器
同時聲明多個風格相一樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>並集選擇器</title>
<style type="text/css">
a,h4{
font-size: 30px;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<a href="#">點我</a>
<p>
<h4>我是H4標題</h4>
</p>
<h4>我是第二個H4標題</h4>
<p>
<a href="#">百度</a>
</p>
</div>
</body>
</html>
效果圖
屬性選擇器
根據帶有制定屬性的元素，或選中帶有指定屬性和值的元素，屬性選擇器一般用在表單中比較頻繁，下面來舉例演示一下
<div>
<form action="">
<label for="user">用戶名：</label>
<input type="text" name="username" id="user">
<label for="pwd">密碼：</label>
<input type="password" name="password" id="pwd">
<label for="vip1">vip1</label>
<label for="vip2">vip2</label>
<label for="user1">user1</label>
<label for="user2">user2</label>
</form>
</div>
上面的代碼就是一個表單，由於屬性選擇器涉及較多，分開來說
<!--根據屬性查找-->
label[for]{
color: red;
}
效果圖(發現全部帶有for屬性的都修改了顏色)
<!--根據屬性和值查找-->
label[for=pwd]{
color: red;
}
效果圖（發現只有for屬性爲pwd的修改了顏色）
<!--以xxx開頭-->
label[for^=user]{
color: yellow;
}
效果圖（發現全部以user開頭的都變成了黃色）
<!--以xxx結尾-->
label[for$='2']{
color: yellow;
}
效果圖（for元素的值以2結尾的）
僞類選擇器
僞類選擇器大多數使用在連接標籤身上的
<div class="box">
<ul>
<li class="item1">
<a href="#">張三</a>
</li>
<li class="item2">
<a href="#">李四</a>
</li>
<li class="item3">
<a href="#">王二</a>
</li>
<li class="item4">
<a href="#">麻子</a>
</li>
</ul>
</div>
1.沒有訪問過的超連接樣式
.box ul .item1 a:link{
color: red;
}
效果圖，沒有被訪問過就變成了紅色
2.被訪問過的超連接樣式
.box ul .item2 a:visited{
color: yellow;
}
效果圖，被訪問過就編程了黃色
3.瀏覽器懸停時的超連接樣式
.box ul .item3 a:hover{
color: red;
}
效果圖：鼠標懸停時 字體變成紅色
4.鼠標按住時的超連接樣式
.box ul .item4 a:active{
color: green;
}
效果圖：按住鼠標 字體變成綠色
5.input輸入框獲取焦點時樣式
<li class="item5">
<form action="">
<input type="text">
</form>
</li>
.box ul .item5 input:focus{
outline: none;
background-color: gold;
}
效果圖：當鼠標點擊時，輸入框變顏色
盒模型介紹
HTML文檔中的每一個元素都被描繪成矩形盒子，這些矩形盒子經過一個模型來描述其佔用的空間，這個模型稱爲盒子模型。盒子模型經過四個邊界來描述：
- margin:外邊距
- border：邊框
- padding:填充
- content:內容
接下來讓咱們簡單的查看一個盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默認樣式*/
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
padding: 30px;
border: 3px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div>
這是content
</div>
</body>
</html>
刷新瀏覽器查看一下效果：
認識padding
所謂的padding，就是內邊距，指的是content到border的距離，並且padding的區域是有背景顏色的，而且顏色和content區域的顏色同樣，也就是說：background-color能夠填充全部的border之內的區域。
舉個例子說明一個大家就看懂了:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默認樣式*/
*{
padding: 0;
margin: 0;
}
div{
<!--設置寬度、高度、背景顏色、填充以及邊框-->
width: 500px;
height: 500px;
background-color: red;
padding: 30px;
border: 3px solid green;
}
</style>
</head>
<body>
<div>
這是content
</div>
</body>
</html>
從這張圖咱們能夠看出來這棕色部分就是padding填充，background-color能夠填充全部的border之內的區域，可是不會包含border
清除標籤默認的padding和margin
是什麼意思呢？讓咱們看一個小例子就明白了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 50px;
background-color: red;
padding: 10px;
border: 3px solid green;
margin: 1px;
}
</style>
</head>
<body>
<div>
這是content
</div>
</body>
</html>
那在瀏覽器中那個查看是如何的呢？
棕色區域爲padding填充，咱們給了10個像素，可是margin外邊距，咱們就給了一個像素，那麼你有沒有發現 margin的1px和padding的10px都是差很少的呢？
因此，咱們通常在作網站的時候，須要清除默認的padding 和 margin，怎麼作呢？上面已經說道了
/*清除默認樣式*/
*{
padding: 0;
margin: 0;
}
咱們如今把這句話加上去，而後看看如何？
是否是此時1px和10px的差距就出來了，並且也是貼着瀏覽器的邊去渲染的。
padding有四個方向，因此咱們能夠分別來描述這四個方向的padding，有兩種方法：
- 寫小屬性
- 寫綜合屬性 用空格隔開
寫小屬性
/*小屬性的寫法*/ padding-top: 20px; padding-bottom: 10px; padding-left: 30px; padding-right: 40px;
這樣，就單獨對每一個方向設置了屬性：
寫綜合屬性
<!--其中包括 寫4個值 寫3個值 寫2個值 寫1個值--> /*寫綜合屬性*/ /*若是寫四個值 則是分別對 上-右-下-左 四個方向分別設置*/ /*padding: 20px 30px 40px 50px;*/ /*若是寫三個值 則分別是對 上 -左右 - 下 分別設置*/ /*padding: 20px 50px 15px;*/ /*若是寫兩個值 則分別是對 上下- 左右分別設置*/ padding: 20px 50px; /*若是寫一個值 則分別是全部方向都設置*/
認識border
border:邊框，同時邊框有3個要素：粗細，線型，顏色
border的寫法一樣有兩種，一種是按照三要素去寫，一種是按照方向去寫
按照三要素寫
/* * width:設置邊框的粗細 * style：設置線型 有solid dotted double dashed * color:顏色 */ border-width: 4px; border-style: dotted; border-color: red;
按照方向去分
/*按照方向去分*/
border-top-width: 3px;
border-top-style: solid;
border-top-color: red;
border-bottom-width: 4px;
border-bottom-style: dotted;
border-bottom-color: green;
border-left-width: 5px;
border-left-style: double;
border-left-color: yellow;
border-right-width: 6px;
border-right-style: dashed;
border-right-color: purple;
若是想要讓左邊的border屬性消失，那麼須要：
border-left:none;
那麼想讓所有的border屬性都消失，就須要使用：
border:none;
認識mrgin
首先要明確一點的是：margin所表示的是距離，而不是寬度。
margin也能夠經過方向的形式來寫屬性，和padding同樣，我就不重複了
標準文檔流
說到標準文檔流，就須要講到咱們的web和ps，咱們在設計原型圖的時候，基本上用到了PS，那麼對於PS來講，咱們的設計師想在哪添加東西 就能夠在哪添加東西，可是對於咱們Web界面來講，能作到想在哪加就能夠在哪加嗎？固然是不可能的， 咱們的web網頁製做是一個流的概念，你能夠當作成流水，也就是自上而下製做的，而設計軟件的，想怎麼畫就怎麼畫。
標準文檔流的微觀現象
在標準文檔流下，有如下微觀現象：
- 空白摺疊現象
- 高矮不齊，底邊對齊
- 自動換行
空白摺疊現象
所謂的空白摺疊現象，就是無論你在網頁中有多少的空格或者空行，都只當作一個
<p>文本 文本 </p>
咱們兩個文本間有不少空格，可是在網頁中只會顯示一個：
因此，咱們想顯示多個空格的話，就須要添加多個
高矮不齊，底邊對齊
在一行中，無論你的文字、圖片有多大，那麼底邊始終都是對齊的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div>
<p>文本文本文本文本文本文本文本文本<span>姚明</span>文本文本文本文本</p>
</div>
</body>
</html>
底邊始終都是對齊的
自動換行
所謂的自動換行，意思就是當你一行東西不夠時，就給你自動換入下一行，也就是換到第二行去
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
span{
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div>
<p>
文本文本文本文本文本文本文本文本
<span>姚明</span>文本文本文本文本
<img src="../day30 前端/1.png" alt="" />
<img src="../day30 前端/1.png" alt="" />
<img src="../day30 前端/1.png" alt="" />
<img src="../day30 前端/1.png" alt="" />
</p>
</div>
</body>
</html>
當一行內容已經不夠顯示，那麼會自動到下一行中
行內元素與塊級元素的轉換
行內元素和塊級元素詳看HTML中標籤嵌套規則
塊級元素div是能夠設置寬度和高度的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 100px;
height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1">
內容
</div>
</body>
</html>
若是想修改爲行內元素，應該怎麼作？看代碼結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
display: inline;
width: 100px;
height: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box1">
內容
</div>
<span>張三</span>
<span>李四</span>
</body>
</html>
那麼此時這個div就變成了這個樣子
div標籤和span都在一行中顯示了
那麼咱們一樣也可讓行內元素轉換成爲塊元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
display: inline;
width: 100px;
height: 30px;
border: 1px solid red;
}
span{
width: 50px;
height: 30px;
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
內容
</div>
<span>張三</span>
<span>李四</span>
</body>
</html>
效果圖以下：
附加的兩個屬性：
若是咱們想給這個屬性隱藏了，那麼咱們可使用
visibility: hidden; # 可是這樣的話雖然會隱藏了，可是還會佔據當前的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
display: inline;
width: 100px;
height: 30px;
border: 1px solid red;
}
.span1{
width: 50px;
height: 30px;
display: block;
background-color: yellow;
visibility: hidden;
}
</style>
</head>
<body>
<div class="box1">
內容
</div>
<span class="span1">張三</span>
<span class="span2">李四</span>
</body>
</html>
中間的span1雖然被隱藏了，可是仍是會佔據這個位置，因此咱們可使用
display: none; # 隱藏，不會佔據位置
李四是由於沒有給這個修改爲塊級元素形成的同行
佈局屬性_浮動
浮動是CSS佈局裏使用最多的一個屬性，它所能形成的效果就是：兩個元素並排了，而且可以設置寬度和高度，首先來看一下小米商城：
紅色的是div盒子，那麼黃色的是子盒子，那有的盒子在左邊有的在右邊，那麼就是浮動作到的。
設置方法：float:left;(向左浮動)
那麼咱們在玩好浮動以前，咱們須要知道浮動的四個特性：
- 浮動的元素脫標
- 浮動的元素相互貼靠
- 浮動的元素有"字圍效果"
- 浮動的元素緊湊
浮動的元素脫標
所謂的脫標，就是脫離標準流，那麼此時這個元素就不會web界面中佔據位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.box3{
width: 700px;
height: 350px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">
小紅
</div>
<div class="box2">
小綠
</div>
<div class="box3">
</div>
</body>
</html>
此時咱們並無對box3設置浮動，你看下結果是什麼樣子？
意思就是小紅和效率已經脫離了標準文檔流，不受web網頁的限制，那麼小黃就會把它本身當作成第一個元素去向body元素身邊靠。
其次，脫標的元素都是能夠設置寬度和高度的，看一看span
浮動的元素相互貼靠
所謂相互貼靠，咱們能夠假設body界面寬度有1200px，此時三個div都設置了左浮動，寬度分別爲:200px 400px 400px，那麼恰好，這三個盒子會恰好的靠在一塊兒
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.box3{
float: left;
width: 700px;
height: 350px;
background-color: yellow;
}
span{
float: left;
width: 50px;
height: 30px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
小紅
</div>
<div class="box2">
小綠
</div>
<div class="box3">
</div>
<span>111</span>
<span>222</span>
</body>
</html>
可是當body的寬度不夠這三個div的寬度的時候，那麼小黃就會靠向小紅
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.box3{
float: left;
width: 1400px;
height: 350px;
background-color: yellow;
}
span{
float: left;
width: 50px;
height: 30px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
小紅
</div>
<div class="box2">
小綠
</div>
<div class="box3">
</div>
<span>111</span>
<span>222</span>
</body>
</html>
若是小紅的寬度都不足以支持小黃的寬度的時候，那麼此時小黃就會往body靠
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 500px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
.box3{
float: left;
width: 1700px;
height: 350px;
background-color: yellow;
}
span{
float: left;
width: 50px;
height: 30px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box1">
小紅
</div>
<div class="box2">
小綠
</div>
<div class="box3">
</div>
<span>111</span>
<span>222</span>
</body>
</html>
這就是浮動的元素相互貼靠
浮動的元素有字圍效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
img{
float: left;
}
</style>
</head>
<body>
<div>
<img src="../day30 前端/1.png" />
<p>
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管,安全
</p>
</div>
</body>
</html>
浮動的元素緊湊
緊湊的意思就是說若是一個浮動的元素，沒有設置width，那麼就會自動收縮成這個元素的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
background-color: red;
float: left;
}
</style>
</head>
<body>
<div>
泰然金融
</div>
</body>
</html>
使用浮動帶來的問題
讓咱們看一下案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 1000px;
}
.box1{
float: left;
width: 200px;
height: 200px;
background-color: red;
}
.box2{
float: left;
width: 300px;
height: 300px;
background-color: green;
}
.box3{
float: left;
width: 400px;
height: 400px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
效果圖以下：
父元素不設置高度，子元素設置浮動以後，不會撐開父元素的高度,那麼此時父盒子沒有高度了。若是在次父盒子下面還有一個標準流的盒子，那麼就會影響頁面的佈局。
因此咱們爲了解決這種浮動帶來的問題，咱們須要清除浮動。清除浮動的方法：
- 給父元素添加高度
- clean both
- 僞元素清除法
- overflow方法
給父元素添加高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div ul li{
float: left;
background-color: red;
width: 100px;
height: 40px;
}
.box{
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>運維部</li>
<li>技術中心</li>
<li>人事行政部</li>
<li>數據中心</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
打開瀏覽器，效果圖爲
此時父盒子的高度爲0，因此形成了塌陷效果，那麼解決的辦法就是：
div{
width: 400px;
height: 40px;
}
那麼仍是有問題的，由於 當有一天要調整這個高度的時候，全部的東西都要改變，因此這個不常常用。
clean both
除了給父盒子添加高度以外，還可使用clear:both，固然這個是在我上學的時候用的最多的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
}
ul{
list-style: none;
}
div ul li{
float: left;
background-color: red;
width: 100px;
height: 40px;
}
.box{
width: 300px;
height: 100px;
background-color: green;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>運維部</li>
<li>技術中心</li>
<li>人事行政部</li>
<li>數據中心</li>
<div class="clear">
</div>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
也就是在一行的結尾，添加一個盒子，用這個盒子來清除浮動，不影響下面的佈局
僞元素清除法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
}
ul{
list-style: none;
}
div ul li{
float: left;
background-color: red;
width: 100px;
height: 40px;
}
.box{
width: 300px;
height: 100px;
background-color: green;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>運維部</li>
<li>技術中心</li>
<li>人事行政部</li>
<li>數據中心</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
在這個div上添加一個類，而後對這個類選擇器作修飾，這種作法在不少時候都是經常使用的
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
overflow方法
overflow也就是將超出部分隱藏掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
}
ul{
list-style: none;
height: 40px;
overflow: hidden;
}
div ul li{
float: left;
background-color: red;
width: 100px;
height: 40px;
}
.box{
width: 300px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div>
<ul>
<li>運維部</li>
<li>技術中心</li>
<li>人事行政部</li>
<li>數據中心</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
overflow屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>over</title>
<style type="text/css">
body{
overflow: auto;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<!--
overflow: visible; 默認的
overflow: hidden; 內容修建
overflow: scroll; 能出現滾動條
overfloe: auto; 能出現滾動條
overflow: inherit; 繼承父級overflow的屬性
-->
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>
</body>
</html>
margin
margin垂直方向塌陷
當兩個兄弟盒子設置了垂直方向上的margin，那麼就會以較大的爲準，這種現象叫作塌陷。浮動的盒子不受影響。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 40px;
background-color: red;
margin-bottom: 20px;
}
.box2{
width: 200px;
height: 40px;
background-color: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
畫箭頭的這段距離就是50px，這就是塌陷效果。
margin水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 780px;
height: 40px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="">
</div>
</body>
</html>
效果圖爲：
所謂的auto，就是自動，意思就是當咱們設置margin-left:auto;時，那麼就是告訴這個盒子，要盡最大的可能往右邊靠，反之 margin-right:auto;就是儘量的往左邊靠；當咱們這兩個屬性一塊兒設置的時候，就是既要往左邊靠，還要往右邊靠，那麼就是進可能的中間，就變成了margin:0 auto;
總結：
- 只有標準流的盒子才能使用margin:0 auto;這個屬性，並且必需要設置width，要有明確的width
- 當一個盒子浮動了或者相對/絕對定位了的話，那麼margin:0 auto;就不起做用了
- margin:0 auto;是居中盒子而不是居中文本，居中文本須要使用text-align: center;
善於使用父類的padding
咱們想實現這個效果
而後咱們開始寫CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
height: 400px;
background-color: red;
}
.xiongda{
width: 100px;
height: 100px;
background-color: green;
margin-left: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="xiongda">
</div>
</div>
</body>
</html>
而後查看效果圖的時候發現：
這個箭頭表示的距離就是30px，what，發生什麼問題了？由於父盒子是沒有border的，那麼當子盒子使用margin-top的時候，看上去做用在父盒子身上，實際上子盒子踹的是標準流，也就是將這一行踹上去了（踢了牆一腳，牆不動我動），因此咱們須要在父盒子添加一個border
border: 1px solid red;
那麼如今，margin踹的就是父盒子了，獲得了咱們想要的東西。那麼既然這樣的話，爲何還要說善於使用父類的padding呢？其實給父類添加border屬性是一種方法，第二種就是用padding，怎麼作的看看代碼
.father{
width: 380px;
height: 370px;
background-color: red;
padding-top: 30px;
padding-left: 20px;
}
是否是就忽然高大上起來！
文字屬性和字體屬性
字體屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
height: 150px;
border: 1px solid red;
/*設置字體的大小*/
font-size: 20px;
/*設置字體的顏色*/
/*color: red; */
/*設置字體 Arial 這個是備選字體 都沒有就是宋體*/
font-family: "Microsoft YaHei UI","宋體","Arial",sans-serif;
/*居中顯示*/
/*text-align: center;*/
text-indent: 2em;
/*模仿a標籤 cursor: pointer;表示放到這上面去變成小手*/
color: blue;
cursor: pointer;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="">
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管。
</div>
</body>
</html>
文本屬性
單行文本垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 50px;
border: 1px solid red;
line-height: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<div>
內容
</div>
</body>
</html>
讓單行文本垂直居中，那麼就須要設置line-height的高度和div盒子的高度相同，這樣就可讓當行文本垂直居中了
多行文本垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
height: 160px;
border: 1px solid red;
padding-top: 40px;
line-height: 30px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
泰然金融-泰和網(www.trc.com) - 行業領先的網絡借貸信息中介機構,爲理財用戶提供便捷、安全、透明、高效、低門檻的互聯網金融綜合服務,由銀行提供資金存管。
</div>
</body>
</html>
這樣的效果就是
超連接美化導航案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
margin: 100px auto 0;
background-color: purple;
overflow: hidden;
border-radius: 5px;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
text-align: center;
line-height: 40px;
}
.nav ul li a{
text-decoration: none;
color: white;
font-size: 20px;
width: 160px;
height: 40px;
display: block;
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首頁</a></li>
<li><a href="">去出借</a></li>
<li><a href="">新手必讀</a></li>
<li><a href="">信息披露</a></li>
<li><a href="">小泰社區</a></li>
<li><a href="">會員中心</a></li>
</ul>
</div>
</body>
</html>
那麼效果圖是這樣的
背景圖片
定位
相對定位
相對定位的三大特性：
- 不脫標
- 形影分離
- 老家留坑
不脫標
不脫標，意思就是不脫離標準流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
這個是咱們已經作好的模板，先看一下長什麼樣子？
當咱們在.box類選擇器上給它相對定位position: relative;的屬性，是沒有任何變化的，定位通常是和top left 等結合使用的
.box2{
background-color: green;
position: relative;
top: 20px;
left: 30px;
}
如今再看一下第二個div跑到哪裏去了
第二個div移動位置了，也就是top/left起了做用。
講講形影分離和老家留坑，意思就是當這個元素被設置了相對定位以後，原來這個元素的位置繼續保留當作是移動後的這個元素的影子，因此形影分離，老家留坑。
可是咱們卻不多會用到相對定位，相對定位就是相對於以前的位置去移動的，那麼真的就沒好處了嗎？確定是有的，下
面是相對定位的好處：
- 微調元素
- 作絕對定位的參考
微調元素
看這麼一個案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.inp{
font-size: 40px;
}
.btn{
position: relative;
top: 0;
left: 0;
}
</style>
</head>
<input type="username" value="" class="inp" />
<input type="button" name="" class="btn" value="點我" />
</html>
文檔流的標準是高矮不齊，底邊對齊，那麼咱們看一看這個效果
因此咱們須要藉助調試工具去調試,那麼這樣的話就完成了微調元素了。
相關文章
- 1. htmlCss----Day3
- 2. htmlCss----html
- 3. htmlCss----Day11
- 4. htmlCss-----Day4
- 5. htmlCSS面試題
- 6. htmlCSS-----Day14（css定位）
- 7. htmlCss----Day13（css框模式）
- 8. HTMLCSS學習之CSS基礎
- 9. [HeadFrist-HTMLCSS學習筆記]第7、八章
- 10. HTMLCSS畫三角形的三種寫法
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
