【前端】第五模塊：WEB開發基礎 第1章·HTML&CSS基礎
- 01-前端介紹
- 02-HTML介紹
- 03-HTML文檔結構
- 04-head標籤相關內容
- 05-經常使用標籤一之h1~h6，p，a
- 06-經常使用標籤一之ul、ol、div、img、span
- 07-經常使用標籤二-table標籤
- 08-經常使用標籤二之form標籤
- 09-經常使用標籤二之表單控件
- 10-經常使用標籤分類和嵌套規則
- 11-css的介紹和感知
- 12-css的三種引入方式
- 13-標籤選擇器
- 14-id選擇器
- 15-類選擇器
- 16-如何正確的使用類選擇器及總結
- 17-高級選擇器
- 18-屬性選擇器
- 19-僞類選擇器（a標籤的愛恨原則）
- 20-僞類選擇器（nth-child的用法）
- 21-僞元素選擇器
- 22-css的繼承性
- 23-css的層疊性
- 24-css權重比較
- 25-層疊性權重相同處理和繼承的權重爲0
- 26-！important屬性介紹
- 27-盒模型介紹
- 28-盒模型五個屬性介紹
- 29-盒模型的計算
- 30-認識padding
- 31-清除某些標籤默認的padding
- 32-認識border
- 33-使用border製做三角形
- 34-簡單認識一下margin
- 35-標準文檔流的介紹
- 36-標準文檔流下的微觀現象
- 37-行內元素和塊級元素轉換
- 38-佈局屬性-浮動介紹
- 39-浮動元素脫標
- 40-浮動元素互相貼靠
- 41-浮動元素字圍效果
- 42-浮動元素緊湊效果
- 43-小米商城結構佈局介紹
- 44-小米商城頂部欄
- 45-小米商城導航欄
- 46-小米商城內容列表
- 47-小米商城選購區域
- 48-使用浮動帶來的問題
- 49-清除浮動1：給父盒子設置高度
- 50-清除浮動2=clear：both
- 51-清除浮動3-僞元素清除法（經常使用）
- 52-清除浮動4-overflow「hidden（經常使用）
- 53-margin垂直方向塌陷問題
- 54-margin：0 auto水平居中盒子
- 55-善於使用父親的padding，而不是margin
- 56-文本屬性和字體屬性
- 57-單行文本垂直居中
- 58-多行文本垂直居中
- 59-font-family介紹
- 60-超連接美化導航案例
- 61-顏色的使用
- 62-background-img的使用
- 63-background-repeat的使用
- 64-background-position的使用
- 65-css精靈圖的介紹和使用
- 66-background-position方向的使用
- 67-background-attach的使用
- 68-相對定位的介紹、特性
- 69-相對定位的用途
- 70-絕對定位的介紹、屬性
- 71-絕對定位參考點
- 72-絕對定位以父輩元素做參考點
- 73-父絕子絕、父相子絕、父固子絕
- 74-絕對定位的盒子無視父輩的padding
- 75-絕對定位盒子居中
- 76-固定定位案例_返回頂部
- 77-固定定位案例_固定導航欄
- 78-固定定位案例_固定導航欄
- 79-z-index的四大特性
- 80-z-index的從父現象
- 81-z-index的用途
01-前端介紹
一、Web1.0時代的‘網頁製做’之靜態頁面；
網頁製做是web1.0時代的產物，那個時候的網頁主要是靜態網頁，所謂的靜態網頁就是沒有與用戶進行交互而僅僅供讀者瀏覽的網頁，咱們當時稱爲「牛皮癬」網頁。例如一篇QQ日誌、一篇博文等展現性文章。javascript
二、Web1.0時代網頁三劍客；
Dreamweaver+Fireworks+Flash（Web1.0時代的產物）;
三、Web2.0時代的前端開發（而不是稱之爲網頁製做）；
「前端開發」是從「網頁製做」演變而來的。css
在web 2.0時代，網頁有靜態網頁和動態網頁。所謂動態網頁，就是用戶不只僅能夠瀏覽網頁，還能夠與服務器進行交互。好比登陸www.jd.com 進行購物用戶的註冊、登陸；html
四、Web前端能作什麼呢？
- 公司官網;
- 移動端網頁-Mobile、平板電腦;
- 微信小程序;
總之：比較簡單，你們學習起來不要慌！
五、目標定位——Python全棧開發；
不只要掌握後端開發的技術還要掌握必定程度的前端開發技術（學習HTML+CSS是沒有什麼邏輯可言的）；
六、前端開發包含哪些內容？
- 結構之HTML（Hyper Text Markup Language，即超文本標記語言），
簡單來講，網頁就是用HTML語言製做的。HTML是一門描述性語言，是一門很是容易入門的語言，但它不是一門編程語言。 - 表現之CSS——層疊樣式表(英文全稱：Cascading Style Sheets)，又叫CSS樣式；
- 行爲之JavaScript——一門腳本語言；
七、結構+表現+行爲之HTML+CSS+JavaScript；
小結：
「HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行爲；
02-HTML介紹
一、HTML簡介；
HTML是一個網頁的主體部分，也是一個網頁的基礎。由於一個網頁能夠沒有樣式，能夠沒有交互，可是必需要有網頁須要呈現的內容。因此HTML部分是整個前端的基礎。前端
HTML，全稱是‘超文本’標記語言（Hyper Text Markup Language），它是一種用於建立網頁的標記語言。舉個通俗的例子，就是一段文本內，不但有該文本真正須要傳遞給讀者的有用信息，更有描述該段文本中各部分文字的狀況的信息。java
<header>
<h1>Alex老師是否是很帥？</h1>
<p>這是你說的啊，我可沒說</p>
</header>
<div>
<div>
二狗子<span>,我就叫二狗子</span>
</div>
<p>
你說什麼就是什麼啦，與我不要緊了，反正我是個男的！</a>
</p>
<div>
三袍子,<span>我就叫三袍子</span>
</div>
<p>
我反對，我以爲武sir更帥。
</p>
</div>
小結：
一、很顯然，HTML做爲一種標記語言它並無什麼邏輯，簡單來講就是一些符號，一些有特殊意義的符號，即一些瀏覽器認識的有特殊意義的符號；
二、咱們寫好的HTML文件最終都會運行在瀏覽器上，由瀏覽器來解析。 HTML很容易學習，相信咱們很快就可以掌握它！
二、開發環境（IDE工具）；
- HBuilder 官網：http://www.dcloud.io/ 下載連接：http://download.dcloud.net.cn/HBuilder.9.0.8.windows.zip
- Pycharm 官網：http://www.jetbrains.com/ 下載連接：https://download.jetbrains.8686c.com/python/pycharm-professional-2018.2.exe
- WebStorm 官網：http://www.jetbrains.com/ 下載連接：https://download.jetbrains.8686c.com/webstorm/WebStorm-2018.2.exe
- SublimeText...
三、瞭解前端的全部標籤（www.baidu.com 按F12鍵）；
四、HTML標籤介紹；
1）文件後綴名簡述；python
文件後綴通常使用.html或.htm .html與.htm均是靜態網頁後綴名，網頁文件沒有區別與區分，html與htm後綴網頁後綴能夠互換，對網頁徹底沒有影響同時也沒有區別。能夠認爲html與htm沒有本質區別，惟一區別即多與少一個「l」。jquery
2）什麼是標籤呢？linux
1. 在HTML中規定標籤使用英文的的尖括號即`<`和`>`包起來，如`<html>`、`<p>`都是標籤； 2. HTML中標籤**一般**都是成對出現的，分爲開始標籤和結束標籤，結束標籤比開始標籤多了一個`/`，如`<p>標籤內容</p>`和`<div>標籤內容</div>`。開始標籤和結束標籤之間的就是標籤的內容； 3. 標籤之間是能夠嵌套的。例如：div標籤裏面嵌套p標籤的話，那麼`</p>`必須放在`</div>`的前面； 4. HTML標籤不區分大小寫，`<h1>`和`<H1>`是同樣的，可是咱們一般建議使用小寫，由於大部分程序員都以小寫爲準；
注意：不是全部標籤都支持互相嵌套。
03-HTML文檔結構
一、HTML文檔結構（固定結構）；
- <!DOCTYPE HTML> 頭聲明；
- <html></html>根標籤；
- <head></head>頭部相關內容；
- <body></body>頁面主體相關內容；
<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
二、HTML文檔結構圖；
一、<html></html> 稱爲根標籤，全部的網頁標籤都在<html></html>中； 二、<head></head> 標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤，頭部標籤在下一節中會有詳細介紹； 三、在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在<body>標籤中的內容（圖中淡綠色部份內容）最終會在瀏覽器中顯示出來；
三、解釋說明；
<!DOCTYPE html>
<!--以上聲明文檔的類型，標記該文檔爲HTML5的文件，第一行的位置不能添加註釋哦！只能是<!DOCTYPE html>-->
<!--頁面的根節點-->
<!--html中的標籤都是閉合標籤，但閉合標籤包含'雙閉合標籤'和'單閉合標籤'-->
<!--雙閉合：<html></html>-->
<!--單閉合：<meta/>-->
<html>
<!--聲明頭部的元信息，對咱們文檔規定編碼格式-->
<head>
<meta charset="utf-8"/>
<!--包含頭部的信息 是一個容器，包含style、title、meta、script、link等-->
</head>>
<body>
<!--包含瀏覽器顯示的內容標籤div、p、a、img、input等等-->
這就是咱們的文檔結構哦！
</body>
</html>
04-head標籤相關內容
一、注意哦，註釋不能嵌套；
<!--這裏是要書寫的註釋的內容-->
注意：
- 註釋中能夠直接使用回車進行換行；
- 咱們習慣用註釋的標籤將HTML代碼包裹起來；
- HTML註釋不支持嵌套；
- HTML註釋不能寫在HTML標籤中；
<!-- xx部分 開始 -->
這裏放你xx部分的HTML代碼
<!-- xx部分 結束 -->
二、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>標籤之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標籤頁的標題欄中。能夠把它當作是一個網頁的標題。主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。web
四、meta標籤；
元素可提供有關頁面的原信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
五、其餘標籤；
一、<!--標題--> <title>路飛學城</title> 二、<!--icon圖標（網站的圖標）--> <link rel="icon" href="fav.ico"> 三、<!--定義內部樣式表--> <style></style> 四、<!--引入外部樣式表文件--> <link rel="stylesheet" href="mystyle.css"> 五、<!--定義JavaScript代碼或引入JavaScript文件--> <script src="myscript.js"></script>
操做日誌：
<!DOCTYPE html>
<html lang="en">
<head>
<!--一、文檔的標題、編碼方式及URL等信息，這些信息大部分是用於提供索引，
辨認或其餘方面的應用（移動端）-->
<!--二、
經常使用的兩個屬性：
http-equiv：它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之
對應的屬性值爲content，content中的內容其實就是各個參數的變量值;
name:
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
-->
<!--指定文檔的內容類型和編碼類型-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<!--5秒重以後 頁面跳轉至 路飛學城的官網-->
<!--<meta http-equiv="refresh" content="5;URL = https://www.luffycity.com"/>-->
<!--三、網頁的標題-->
<title>路飛學城</title>
<!--四、告訴瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<!--五、爲了咱們的網站SEO優化，常添加keywords，百度搜索引擎搜索關鍵字，如IT培訓，Linux、Python爬蟲-->
<!--<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,京東">-->
<!--<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通信、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!">-->
<meta name="Keywords" content="Python開發,linux教程,網站開發,金融分析,爬蟲實戰,機器學習,編程教程,在線課程,在線教育,路飛,路飛學城,路飛學院">
<meta name="description" content="路飛學城立志幫助有志向的年輕人經過努力學習得到體面的工做和生活！路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能。">
<!--六、定義咱們的網站ico圖標-->
<link rel="icon" href="./fav.ico">
<!--七、引入外部css樣式表-->
<link rel="stylesheet" type="text/css" href="index.css">
<!--八、定義內部css樣式表-->
<style type="text/css">
</style>
<!--九、定義內部js腳本文件-->
<script type="text/javascript">
</script>
<script src ='./index.js' ></script>
</head>
<body>
<h1>luffycity,幫助年輕人經過努力學習得到體面的工做和生活！</h1>
</body>
</html>
05-經常使用標籤一之h1~h6，p，a
一、標題標籤h1~h6(heading);
<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題，<h6> 定義最小的標題。 因爲 h 元素擁有確切的語義，所以請您慎重地選擇恰當的標籤層級來構建文檔的結構。所以，請不要利用標題標籤來改變同一行中的字體大小。
二、段落標籤<p>,paragraph的簡寫，用來定義段落；
三、超連接標籤<a>；
超級連接<a>標記表明一個連接點，是英文anchor（錨點）的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像；（即頁面跳轉）
小結：
一、目標文檔爲下載資源 例如：href屬性值，指定的文件名稱，就是下載操做(rar、zip等)； 二、電子郵件連接 前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息。 例如：<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>； 三、返回頁面頂部的空連接或具體id值的標籤 例如：<a href="#">內容</a>或<a href="#id值">內容</a>； 四、javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。 例如：<a href="javascript:alert()">內容</a>； 五、javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應 例如：<a href="javascrip:;">內容</a>;
<!DOCTYPE html>
<html lang="en"> <!--注意，在此處加lang='en'-->
<head>
<meta charset="UTF-8">
<title>body標籤中的經常使用標籤一</title>
</head>
<body>
<p style="height: 200px" id="p1" >頂部</p>
<!--一、body相關標籤-->
<!--二、heading：標題h1~h6,沒有h7標題-->
路飛學城,不只有獨家<h3>Python全棧開發課程</h3>，帶你逐步提高技能。更有Linux運維工程師，帶來最極致的成長體驗。
<!--三、塊級元素：一、獨佔一行！二、能夠設置寬度、高度-->
<h1>路飛學城</h1><h2>路飛學城</h2>
<h3>路飛學城</h3>
<h4>路飛學城</h4>
<h5>路飛學城</h5>
<h6>路飛學城</h6>
<!--四、默認沒有h7,咱們來驗證一下-->
<!--五、<h7>路飛學城</h7>-->
<!--六、p,即Paragraphy的縮寫,定義段落-->
<p>路飛學城立志幫助有志向的年輕人經過努力學習得到體面的工做和生活！路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能!</p>
<p>路飛學城立志幫助有志向的年輕人經過努力學習得到體面的工做和生活！路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能!</p>
<!--七、超連接標籤a,anchor錨點的縮寫，將當前頁面連接至另外一個頁面-->
<!--
_self,默認值，在當前頁面打開新的資源；
_blank,在新的頁面打開網站資源；
-->
<a href="http://cuixiaozhao.com" target="_blank" title="崔工的博客">天晴天朗的cnblogs地址</a>
<!--八、下載文件內容-->
<a href="./A.ZIP">下載壓縮包</a>
<!--九、發送郵件至該郵箱，調用系統上存在的郵件客戶端，如formail、outlook-->
<a href="mailto:tqtl@tqtl.org">聯繫崔工</a>
<!--十、返回頁面頂部的內容-->
<a href="#">跳轉到頂部</a>
<!--十一、返回每一個id-->
<a href="#p1">跳轉至頂部的段落標籤</a>
<!-- 十二、javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，而 javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應，把a的默認動做取消了。-->
<a href="javascript:alert(1)">有內容</a>
<a href="javascript:;">空內容</a>
</body>
</html>
06-經常使用標籤一之ul、ol、div、img、span
一、列表標籤ul、ol
<ul>:unordered lists的縮寫 無序列表； <ol>:ordered listsde的縮寫 有序列表;
1)ol標籤的屬性：
- 1：數字；
- a：小寫字母；
- A：大寫字母；
- i：小寫羅馬字符，不是數字；
- I：大寫羅馬字符，注意哦，是羅馬字符，不是羅馬數字；
2）ul標籤的屬性：
- disc：實心圓(default)；
- circle:空心圓；
- square：實心矩形；
- none：不顯示標識；
二、盒子標籤div；
<div>可定義文檔的分區 division的縮寫 譯：區 <div> 標籤能夠把文檔分割爲獨立的、不一樣的部分（區塊）；
三、圖片標籤<img/>;
語法：<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
注意：
一、src設置的圖片地址能夠是本地，也能夠是網絡地址（採用域名的圖片服務器）；
二、圖片的格式能夠是png、jpg或gif；
三、alt屬性的值會在圖片加載失敗的時候進行顯示；
四、可自定圖片的寬度和高度，不設置的話，默認顯示自己的高度和寬度；
五、與行內元素在一行內顯示；
六、能夠設置寬度和高度；
七、span標籤能夠單獨摘出某塊內容，結合css設置相應的樣式；
四、換行標籤<br>;
<br>標籤用來將內容換行，其在HTML網頁上的效果至關於咱們平時使用word編輯文檔時使用回車換行。
五、分割線<hr>；
<hr>標籤用來在HTML頁面中建立水平分隔線，一般用來分隔內容
六、特殊符號;
07-經常使用標籤二-table標籤
一、表格標籤table；
表格由<table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由<td>標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等；
二、表格的行和列的合併；
rowspan 合併行(豎着合併)；colspan 合併列(橫着合併)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格table學習</title>
</head>
<body>
<!--表格是一個具體的對象，能夠對它進行添加屬性-->
<table border="1px" cellspacing="0">
<!--表格頭-->
<thead></thead>
<tr>
<th></th>
<th>星期1</th>
<th>星期2</th>
<th>星期3</th>
<th>星期4</th>
<th>星期5</th>
</tr>
<!--表格的主體-->
<tbody>
<!--表格主體的每一行-->
<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="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>
</tbody>
<tfoot>
<tr>
<td colspan="6">課程表</td>
</tr>
</tfoot>
</table>
</body>
</html>
08-經常使用標籤二之form標籤
一、表單概念初識及做用；
表單是一個包含表單元素的區域;
表單元素是容許用戶在表單中輸入內容，好比：文本域(textarea)、輸入框(input)、單選框(radio);
做用：表單用於顯示、手機信息，並將信息提交給服務器;
<form>容許出現表單控件</form>
二、form表單屬性之action；
定義表單被提交時發生的動做提交給服務器處理程序的地址；
三、method；
- get
- post
四、encrype；
編碼類型，即表單數據進行編碼的方式容許表單將什麼樣的數據提交給服務器；
五、表單控件分類；
- input
- button
- label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-經常使用標籤二之form標籤</title>
</head>
<body>
<div class="form" >
<!--一、form標籤是塊級元素，被提交-->
<form action="https://www.baidu.com" method="get">
<p>
<!--二、lable標籤是行內元素,input是行內塊元素-->
<label for="user">用戶名：</label>
<input type="text" name="username" id="user" placeholder="請輸入用戶名">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" placeholder="請輸入密碼">
</p>
<p>
<!--三、顯示普通的按鈕，disabled屬性，禁用按鈕-->
<!--<input type="button" name="btn" value="提交" disabled="disabled">-->
<input type="button" name="btn" value="提交" >
<input type="submit" name="btn" value="submit">
<!--四、button與form表單沒有任何關係-->
<button type="button">button按鈕</button>
</p>
</form>
</div>
</body>
</html>
09-經常使用標籤二之表單控件
一、radio、checkbox-單選框、複選框；
二、textarea-文本域；
三、select-下拉選；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-09-經常使用標籤二-表單控件</title>
</head>
<body>
<div class="form" >
<!--一、form標籤是塊級元素，被提交-->
<form action="https://www.baidu.com" method="get">
<p>
<!--二、lable標籤是行內元素,input是行內塊元素-->
<label for="user">用戶名：</label>
<!--三、readonly屬性，表示只讀-->
<input type="text" name="username" id="user" placeholder="請輸入用戶名">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" placeholder="請輸入密碼">
</p>
<p>
<!--四、單選框radio,checked會被默認選中，產生互斥效果，name值要相同，好比同爲sex-->
用戶性別：
<!--<input type="radio" name="男" checked="">男-->
<!--五、此刻由於name值均爲sex，顧產生了互斥的效果；-->
<input type="radio" name="sex" checked="">男
<input type="radio" name="sex">女
</p>
<!--六、複選框checkbox-->
<p>
用戶的愛好：
<input type="checkbox" name="checkfav" value="吃" checked="check">吃
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="玩">玩
<input type="checkbox" name="checkfav" value="樂">樂
</p>
<p>
<!--七、文件上傳-->
<input type="file" name="textfile">
</p>
<p>
<!--八、文本域-即輸入文本內容的區域-->
自我介紹：
<textarea cols="20" rows="5" name="txt" placeholder="請作一下自我介紹" ></textarea>
</p>
<p>
<!--九、下拉列表-->
<select name="citys" size="3" multiple="">
<!--十、selected，將會被預選中-->
<option value="深圳" selected>深圳</option>
<option value="北京">北京</option>
<option value="沙河">沙河</option>
<option value="山東">山東</option>
<option value="河北">河北</option>
</select>
</p>
<p>
<!--十一、顯示普通的按鈕，disabled屬性，禁用按鈕-->
<!--<input type="button" name="btn" value="提交" disabled="disabled">-->
<input type="button" name="btn" value="提交" >
<!--十二、提交form表單時候，使用type=submit按鈕-->
<input type="submit" name="btn" value="submit">
<!--1三、重置按鈕-->
<input type="reset" name="重置按鈕啦">
<!--1四、button與form表單沒有任何關係-->
<button type="button">button按鈕</button>
</p>
</form>
</div>
</body>
</html>
10-經常使用標籤分類和嵌套規則
一、HTML標籤的屬性；
<div id="i1">這是一個div標籤</div> <p class='p1 p2 p3'>這是一個段落標籤</p> <a href="http://www.luffycity.com">這是一個連接</a> <input type='button' onclick='addclick()'></input>
二、爲何能設置屬性呢？
其實呢，你能夠這樣簡單理解，由於最終咱們這些標籤會經過CSS去美化，經過JavaScript來操做，那麼這些標籤咱們能夠當作是一個對象，對象就應該有它本身的屬性和方法。那麼你像上面說到input標籤，type=‘button’就是它的屬性，onclick=‘addclick()’就是它的方法；
三、關於標籤屬性的注意事項：
1.HTML標籤除一些特定屬性外能夠設置自定義屬性，一個標籤能夠設置多個屬性用空格分隔，多個屬性不區分前後順序； 2.屬性值要用引號包裹起來，一般使用雙引號也能夠單引號； 3.屬性和屬性值不區分大小寫，可是推薦使用小寫；
四、標籤的分類：
1）經常使用的塊狀元素；
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
塊級元素的特色：
2）經常使用的行內元素；
<a> <span> <br> <i> <em> <strong> <label>
行內元素的特色：
3）經常使用的行內塊狀元素；
<img> <input>
行內塊元素的特色；
五、標籤的嵌套規則；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-經常使用標籤分類和嵌套規則</title>
</head>
<body>
<div class="wrapper">
<!--一、塊級元素：div、p、h1~h六、ul、ol、table、form、li
一、獨佔一行；
二、能夠設置高度和寬度，若是設置高度和寬度，則就是當前的寬度
和高度，若是寬度和高度沒有設置，寬度就是父盒子的寬度，高度根據內容填充-->
<div class="left">
這是路飛學城的戰場
<div>這是個人區域
<div style="width: 500px;height: 100px">這是個人愛好</div>
<ul>
<li>
<h2>抽菸</h2>
</li>
<li>
<ol>
<li>喝酒</li>
<li>燙頭</li>
</ol>
</li>
</ul>
</div>
</div>
<div class="right">
<!--二、行內元素：a、span、i、em、strong、label"
行內元素：在一行內顯示，不能設置寬度和高度，寬度和高度根據內容填充
-->
<a href="#" style="width: 200px;height: 100px;">百度</a>
<a href="#">路飛</a>
<span style="width:100px;height: 200px">這裏是一些文本內容哦！</span>
<span>文本內容</span>
</div>
<!--三、行內塊標籤
一、在一行內展現；
二、可設置寬度和高度；
-->
<div class="inline-block">
<img src="./pyy01.jpg" alt="奶東彭于晏" style="width: 200px;height: 200px">
<input type="text" name="username" style="width: 200px;height: 50px">
</div>
</div>
</body>
</html>
11-css的介紹和感知
一、咱們爲何須要CSS？
使用css的目的就是讓網頁具備美觀一致的頁面，另一個最重要的緣由是內容與格式分離 在沒有CSS以前，咱們想要修改HTML元素的樣式須要爲每一個HTML元素單獨定義樣式屬性，當HTML內容很是多時，就會定義不少重複的樣式屬性，而且修改的時候須要逐個修改，費心費力。是時候作出改變了，因此CSS就出現了。
CSS的出現解決了兩個問題：
一、將HTML頁面的內容與樣式進行分離；
二、提升Web開發的工做效率；
二、什麼是CSS？
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。
三、CSS的優點；
一、內容與表示分離；
二、網頁的表現統一，容易修改；
三、豐富的樣式，使得頁面佈局更加靈活；
四、減小網頁的代碼量，增長網頁的瀏覽器速度，節省帶寬；
五、運用獨立頁面的CSS，有利於網頁被搜索引擎收錄；
四、如何使用CSS？
咱們一般會把樣式規則的內容都保存在CSS文件中，此時該CSS文件被稱爲外部樣式表，而後在HTML文件中經過link標籤引用該CSS文件便可。這樣瀏覽器在解析到該link標籤的時候就會加載該CSS文件，並按照該文件中的樣式規則渲染HTML文件。
12-css的三種引入方式
一、CSS基礎語法；
二、CSS註釋；
/*注意啦，這就是CSS的註釋樣式哦！*/
三、網頁中引入CSS樣式的幾種方法；
- 內聯樣式
- 行內樣式表
- 外部樣式表
- 連接式
- 導入式
四、內嵌樣式；
五、行內樣式；
六、外聯樣式表-連接式；
七、外聯樣式表-@import url()方式-導入式；
小結：
連接式與導入式的區別：
一、<link/>標籤屬於XHTML,@import是屬性css2.1； 二、使用<link/>連接的css文件先加載到網頁當中，再進行編譯顯示； 三、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中； 四、@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來講就是無效的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*寫咱們的CSS代碼*/
/*標籤選擇器，共性的，影響全局、全部*/
span{
color: yellow;
}
</style>
<!--外接樣式之導入式-->
<style type="text/css">
@import url('./index.css');
</style>
<!--內容與表現分離的應用-內接樣式-->
<!--外接樣式之連接式,建議選擇該種方式-->
<!--<link rel="stylesheet" href="./index.css">-->
</head>
<body>
<!--
一、行內樣式；
二、內接樣式；
三、外接樣式；
3.1連接式
3.2導入式
-->
<div>
<!--行內樣式展現-->
<p style="color: green;">我是一個段落</p>
</div>
<div>
<div>
<span>我是另一個段落</span>
<span>我是另一個段落</span>
<span>我是另一個段落</span>
<a href="#">路飛學城</a>
</div>
</div>
</body>
</html>
13-標籤選擇器
一、什麼是選擇器？
首先來講一下，什麼是選擇器。
在一個HTML頁面中會有不少不少的元素，不一樣的元素可能會有不一樣的樣式，某些元素又須要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素以後就能夠爲它們設置樣式了。 選擇器爲樣式規則指定一個做用範圍。
基礎選擇器包括：
- 標籤選擇器；
- 類選擇器；
- ID選擇器；
- 通用選擇器；
二、標籤選擇器；
顧名思義即經過標籤名來選擇元素；
示例：
p {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的選擇器之標籤選擇器初識</title>
<style type="text/css">
body{
color:gray;
/*網頁的字體通常爲12px或16px*/
font-size: 12px;
}
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
</style>
</head>
<body>
<!--
CSS的選擇器：一、基本選擇器；二、高級選擇器；
一、標籤選擇器；
標籤選擇器能夠選中全部的標籤元素，好比div、ul、li、p等；
無論標籤藏得多深，都能被選中；
選中的是全部的，而不是選擇一個，因此說選擇的是"共性的"，不是特有的;
二、id選擇器；
三、類選擇器；
-->
<div>
<p>我是一個段落</p>
<ul>
<li>
<p>崔曉昭</p>
<span>我也是一個段落</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我仍是一個段落</p>
</div>
</div>
</div>
</div>
</body>
</html>
14-id選擇器
一、ID選擇器；
顧名思義，經過元素的id值進行選擇元素；
示例：
#i1 {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的選擇器之標籤選擇器初識</title>
<style type="text/css">
body{
color:gray;
/*網頁的字體通常爲12px或16px*/
font-size: 12px;
}
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
#s1{
color: red;
}
#s2{
color: blueviolet;
}
#box{
background: aqua;
}
</style>
</head>
<body>
<!--
CSS的選擇器：一、基本選擇器；二、高級選擇器；
一、標籤選擇器；
標籤選擇器能夠選中全部的標籤元素，好比div、ul、li、p等；
無論標籤藏得多深，都能被選中；
選中的是全部的，而不是選擇一個，因此說選擇的是"共性的"，不是特有的;
二、id選擇器；
#選中的id；
任何的標籤均可以設置id屬性；
id的命名規範：
一、字母數字下劃線；
二、嚴格區分大小寫，好比s1！=S1
三、類選擇器；
玩好了類，就等於玩好了CSS中的1/2；
-->
<div>
<p>我是一個段落</p>
<ul>
<li>
<p>崔曉昭</p>
<span>我也是一個段落</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我仍是一個段落</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<!--id是惟一值，惟一的！，嚴格區分大小寫：s1！=S1-->
<!--<span id="s1">123</span>-->
<span id="s2">234</span>
</div>
</body>
</html>
15-類選擇器
一、類選擇器；
顧名思義，經過樣式類進行選擇元素；
示例：
.c1 {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的選擇器之標籤選擇器初識</title>
<style type="text/css">
/*標籤選擇器01*/
body{
color:gray;
/*網頁的字體通常爲12px或16px*/
font-size: 12px;
}
/*標籤選擇器02*/
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
/*id選擇器*/
#s1{
color: red;
}
#s2{
color: blueviolet;
}
#box{
background: aqua;
}
/*類選擇器*/
.title03{
color: yellowgreen;
font-size: 20px;
}
.alex{
color:red;
}
</style>
</head>
<body>
<!--
CSS的選擇器：一、基本選擇器；二、高級選擇器；
一、標籤選擇器；
標籤選擇器能夠選中全部的標籤元素，好比div、ul、li、p等；
無論標籤藏得多深，都能被選中；
選中的是全部的，而不是選擇一個，因此說選擇的是"共性的"，不是特有的;
二、id選擇器；
#選中的id；
任何的標籤均可以設置id屬性；
id的命名規範：
一、字母、數字、下劃線（可使用空格，可是不規範，忘記吧!）；
二、嚴格區分大小寫，好比s1！=S1
三、類選擇器；
玩好了類，就等於玩好了CSS中的1/2；
所謂類就是class，class與id很是類似，任何的標籤均可以添加類；
可是類是能夠重複的，歸類；
同一個標籤中，能夠攜帶多個類，須要使用空格進分割開來，可是會被覆蓋（CSS叫作層疊樣式表）
類的使用，能夠決定Web前端工程師的水平有多牛逼呀！
-->
<div>
<p>我是一個段落</p>
<ul>
<li>
<p>崔曉昭</p>
<span>我也是一個段落</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>我仍是一個段落</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<!--id是惟一值，惟一的！，嚴格區分大小寫：s1！=S1-->
<!--<span id="s1">123</span>-->
<span id="s2">234</span>
</div>
<div class="box2">
<!--類名能夠重複使用，可是要使用空格分割開來-->
<h3 id="h3" class="title03 alex">我是一個三級標題</h3>
<h3>我是一個三級標題</h3>
<h3>我是一個三級標題</h3>
<h3>我是一個三級標題</h3>
<h3>我是一個三級標題</h3>
<h3>我是一個三級標題</h3>
</div>
</body>
</html>
16-如何正確的使用類選擇器及總結
一、直接看操做日誌吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS小練習</title>
<style type="text/css">
/*專業用法*/
.lv{
color:green;
}
.big{
font-size: 40px;
}
.underline{
text-decoration: underline;
}
/*小白用法*/
.lv1{
color:green;
font-size: 40px;
}
.lv2{
color:green;
font-size: 14px;
}
.lv3{
font-size: 40px;
text-decoration: underline;
}
</style>
</head>
<body>
<!--公共類，找標籤共有的屬性
一、第一個
-->
<!--專業用法-->
<div>
<p class="lv big">段落1</p>
<p class="lv underline">段落2</p>
<p class="underline big">段落3</p>
</div>
<!--小白用法-->
<p>-----------分割線------------</p>
<div>
<p class="lv1">段落1</p>
<p class="lv2">段落2</p>
<p class="lv3">段落3</p>
</div>
<!--小結
一、不要去試圖用一個類將咱們的頁面寫完，這個標籤要攜帶多各種，共同設置樣式；
二、每一個類要儘量少攜帶屬性，下降耦合度；解耦合，是程序開發的重要主題；
三、必定要有"公共類的概念"；
難麼問題來了，究竟是使用id仍是使用class選擇器呢？
答案：儘量使用class選擇器，看具體需求，除非特殊狀況能夠用id選擇器；
緣由：id通常是用在js，也就是說js是經過id來獲取標籤的；
-->
</body>
</html>
17-高級選擇器
一、並集選擇器；
二、交集選擇器；
三、後代選擇器；
由於HTML元素能夠嵌套，因此咱們能夠從某個元素的後代查找特定元素，並設置樣式：
四、兒子選擇器；
div>p {
color: red;
}
五、毗鄰選擇器；
div+p {
color: red;
}
六、弟弟選擇器；
div~p {
color: red;
}
操做日誌：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>17-高級選擇器</title>
<style>
/*後代選擇器
在CSS中仍是很是頻繁的
*/
/*div p{*/
/*color: red;*/
/*}*/
/*div div p{*/
/*color: yellow;*/
/*}*/
/*.container div p{*/
/*color: green;*/
/*}*/
/*子代選擇器的語法*/
.container p{
color: yellowgreen;
}
.container>p{
color: greenyellow;
}
/*交集選擇器*/
h3{
width: 300px;
color: red;
}
.active{
font-size:30px;
}
h3.active{
background-color: yellow;
}
/*並集選擇器（組合）設置多個標籤的統同樣式*/
a,h4{
color: #666;
font-size: 20px;
text-decoration: none;
}
/*通用選擇器,性能有點差，通常不用，學習階段須要瞭解*/
*{
color:red;
}
</style>
</head>
<body>
<div class="container">
<p>我是另一個字段</p>
<div>
<p>我是一個段落</p>
</div>
<p>我是另外又另外的一個段落</p>
<ul>
<li>
<h3 class="active">我是一個H3</h3>
</li>
<li>
<h4>我是一個h4標題</h4>
<a href="#">BAT</a>
</li>
</ul>
</div>
</body>
</html>
18-屬性選擇器
一、根據屬性查找；
二、根據屬性和屬性值進行查找；
1）找到全部title屬性等於hello的元素：
[title="hello"] {
color: red;
}
2）找到全部title屬性以hello開頭的元素：
[title^="hello"] {
color: red;
}
3）找到全部title屬性以hello結尾的元素：
[title$="hello"] {
color: red;
}
4）找到全部title屬性中包含（字符串包含）hello的元素：
[title*="hello"] {
color: red;
}
5）找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：
[title~="hello"] {
color: red;
}
三、表單經常使用；
input[type="text"] {
backgroundcolor: red;
}
操做日誌：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-屬性選擇器</title>
<style type="text/css">
/*無具體值的*/
label[for]{
color: red;
font-size: 20px;
}
/*有值的*/
label[for='pwd']{
color: yellow;
}
/*以...開頭*/
label[for ^='vip']{
font-size: 40px;
}
/*以...結尾*/
label[for$='2']{
color: purple;
}
/*找到全部*/
label[for*='ser']{
color:orange;
}
input[type='text']{
background-color: antiquewhite;
}
</style>
</head>
<body>
<!--屬性選擇器一般在表單控件中使用的邊角頻繁！-->
<div class="box">
<form action="">
<label for="user">用戶名：</label>
<input type="text" name="" id="user">
<label for="pwd">密碼：</label>
<label for="vip1">vip1：</label>
<label for="vip2">vip2：</label>
<label for="user2">用戶名2：</label>
<label for="user3">用戶名3：</label>
</form>
</div>
</body>
</html>
19-僞類選擇器（a標籤的愛恨原則）
一、沒有訪問過的超連接a的標籤樣式；
二、訪問過的超連接a標籤樣式；
三、鼠標懸浮在元素上應用樣式；
四、鼠標點擊瞬間的樣式（離開後消失）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-僞類選擇器(a標籤的愛恨原則)</title>
<style type="text/css">
/*愛恨原則 LOVE HATE*/
/*沒有被訪問的a標籤的樣式*/
.box ul li.item1 a:link{
color: red;
}
/*訪問事後的a標籤的樣式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠標懸停至上方的樣式*/
.box ul li.item3 a:hover{
color: darkgreen;
}
/*鼠標點住不鬆開的時候的樣式*/
.box ul li.item4 a:active{
color: darkorange;
}
</style>
</head>
<body>
<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>
</body>
</html>
20-僞類選擇器（nth-child的用法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-僞類選擇器(a標籤的愛恨原則)</title>
<style type="text/css">
/*愛恨原則 LOVE HATE*/
/*沒有被訪問的a標籤的樣式*/
.box ul li.item1 a:link{
color: red;
}
/*訪問事後的a標籤的樣式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠標懸停至上方的樣式*/
.box ul li.item3 a:hover{
color: darkgreen;
}
/*鼠標點住不鬆開的時候的樣式*/
.box ul li.item4 a:active{
color: darkorange;
}
/*選中第一個元素*/
div ul li:first-child{
font-size: 20px;
color:red;
}
/*選中最後一個元素*/
div ul li:last-child{
font-size: 40px;
color: green;
}
/*選中指定元素,元素從1開始計數，不是0*/
div ul li:nth-child(3){
font-size: 100px;
color: blue;
}
/*n表示選中全部，從0開始，0的時候表示沒有選中*/
div ul li:nth-child(n){
font-size: 50px;
color: mediumvioletred;
}
/*偶數*/
div ul li:nth-child(2n){
font-size: 70px;
color: green;
}
/*奇數*/
div ul li:nth-child(2n-1){
font-size: 80px;
color: rebeccapurple;
}
/*隔4個換1個*/
div ul li:nth-child(4n+1){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="#">張三丰</a>
</li>
<li class="item2">
2
<a href="#">李四龍</a>
</li>
<li class="item3">
3
<a href="#">王八難</a>
</li>
<li class="item4">
4
<a href="#">趙六曲</a>
</li>
<li class="item5">
5
<a href="#">趙六曲</a>
</li>
<li class="item6">
6
<a href="#">趙六曲</a>
<li class="item7">
7
<a href="#">趙六曲</a>
</li>
<li class="item8">
8
<a href="#">趙六曲</a>
</li>
</ul>
</div>
</body>
</html>
21-僞元素選擇器
一、first-letter；
用於爲文本的首字母設置特殊樣式。
二、before；
用於在元素的內容前面插入新內容。
三、after；
用於在元素的內容後面插入新內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-僞元素選擇器</title>
<style type="text/css">
/*設置第一個首字符的樣式*/
p:first-letter{
font-size: 30px;
color:red
}
/*content*/
/*在..以前*/
p:before{
content: 'alex';
}
/*在..以後,使用很是頻繁，一般與後面講到的佈局有gaunt*/
p:after{
content: 'cuixiaozhao';
font-size: 70px;
color: blue;
}
</style>
</head>
<body>
<p>我是一個段落</p>
</body>
</html>
22-css的繼承性
一、CSS的繼承性體現；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-css的繼承性</title>'
<style type="text/css">
.father{
color:red;
font-size: 30px;
background-color: green;
}
.child{
color: purple;
}
</style>
</head>
<body>
<!--給父級設置一些屬性，子級繼承了父級的屬性，這就是咱們的CSS中的繼承
有一些屬性是能夠繼承下來的：color、font-*、text-*、line-*文本元素
其餘不行：像一些佈局的盒子屬性，定位的元素（浮動、絕對行爲、固定定位）不能繼承
-->
<div class="father" id="egon">
<div class="child">
<p>alex</p>
</div>
</div>
<p>小馬哥</p>
</body>
</html>
23-css的層疊性
一、CSS的層疊性初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23-css的層疊性</title>
<style type="text/css">
/*1 0 0*/
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
</style>
</head>
<body>
<!--權重：在CSS中，誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大呢？很是簡單，進行數數
一、id的數量、class的數量、標籤的數量；
-->
<p id="box" class="container">猜猜我是什麼顏色</p>
</body>
</html>
24-css權重比較
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 24-css權重比較</title>
<style type="text/css">
/*2 0 1*/
#box1 #box2 p{
color: yellow;
}
/*1 1 1*/
#box2.wrapper3 p{
color: red;
}
/*1 0 3*/
div div #box3 p{
color: purple;
}
/*0 3 4*/
div.wrapper1 div.wrap2 div.wrap3 p{
color: blue;
}
</style>
</head>
<body>
<!--
CSS的層疊性體如今，權重大的標籤覆蓋了權重小的標籤；
權重：誰的權重大，瀏覽器就會顯示誰的屬性
誰的權重大？很是簡單 進行數數
一、id的數量、class的數量、標籤的數量
-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再來猜猜看我是什麼顏色？</p>
</div>
</div>
</div>
</body>
</html>
25-層疊性權重相同處理和繼承的權重爲0
一、權重及繼承的說明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 25-層疊性權重相同處理和繼承的權重爲0</title>
<style type="text/css">
/*!*1 1 1*!*/
/*#box1 .wrap2 p{*/
/*color: red;*/
/*}*/
/*!*1 1 1*!*/
/*#box2 .wrap3 p{*/
/*color: yellow;*/
/*}*/
/*0 0 0 繼承來的*/
#box1 #box2 .wrap3{
color:red;
}
/*1 1 1選中來的*/
#box2 .wrap3 p{
color:green;
}
</style>
</head>
<body>
<!--
一、當權重同樣的時候，之後來設置的屬性爲準，前提是權重同樣，後來者居上
二、繼承來的屬性，權重值爲0
總結：
一、先看有沒有被選中，若是選中了，就溫馨（id,class,標籤的數量）
誰的權重大，就顯示誰的屬性；權重同樣大，後來者居上；
二、若是沒有被選中，權重爲0；
三、若是屬性都是被繼承下來的，權重都是0，採起"就近原則"：誰描述的近，就顯示誰的屬性；
-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再來猜猜看我是什麼顏色？</p>
</div>
</div>
</div>
</body>
</html>
26-！important屬性介紹
一、！important提升優先級演示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-!important屬性介紹</title>
<style type="text/css">
<!--！important，提升優先級-->
p{
font-size: 30px;
color: red !important;
}
.spe1{
font-size: 40px;
color: yellow;
}
.spe2{
font-size: 40px;
color: green;
}
.list{
color:purple!important;
}
</style>
</head>
<body>
<!--!important不影響繼承來的權重，隻影響選中的元素-->
<!--！important，設置權重爲無限大！實戰中，儘可能別用吧！-->
<div>
<p></p>
<p class="spe1 spe2">我是什麼顏色</p>
<p class="spe2 spe1">我是什麼顏色</p>
</div>
<div class="list">
<ul>
<li>
我是一個li標籤
</li>
</ul>
</div>
</body>
</html>
27-盒模型介紹
一、盒模型初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27-盒模型介紹</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
padding: 20px;
border: 3px solid red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
28-盒模型五個屬性介紹
一、margin(外邊距)；
二、border(邊框)；
三、padding(內填充)；
四、width*height(寬*高，content內容區域)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27-盒模型介紹</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
padding: 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div>
<!--盒模型：在網頁中，通常都會顯示一些方方正正的盒子，這種盒子就被咱們稱之爲「盒模型」
一、重要的一些屬性：
width：指的是內部寬度，不是盒子真實的寬度；
height：指的是內部的高度，不是盒子真實的高度；
border：
padding：
margin：
問題：設計師要求作一個402*402px的盒子，咱們應該如何進行設計呢？
-->
注意哦，這裏是內容呢！
</div>
</body>
</html>
29-盒模型的計算
一、盒模型計算初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>29-盒模型的計算</title>
<style type="text/css">
/*!*div1*!*/
/*div{*/
/*width: 400px;*/
/*height: 400px;*/
/*border: 1px solid purple ;*/
/*}*/
/*!*div2*!*/
/*div{*/
/*width: 200px;*/
/*height: 200px;*/
/*border: 1px solid purple ;*/
/*padding: 100px;*/
/*}*/
/*div3*/
div{
width: 0;
height: 0;
border: 1px solid purple ;
padding: 200px;
}
</style>
</head>
<body>
<!--問題：設計師要求作一個402*402px的盒子，咱們應該如何進行設計呢？-->
<!--若是想保證盒子的真實寬度，加width就應該減小padding，減小width就應該加padding-->
<div>
內容
</div>
</body>
</html>
30-認識padding
一、pading的四個方向(順時針方向)；
- 小屬性設置；
- 綜合屬性設置，用空格分隔開來；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>30-認識padding</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*padding: 20px;*/
background-color: red;
/*border: 5px solid yellowgreen;*/
/*!*padding的小屬性設置*!*/
/*padding-top: 30px;*/
/*padding-right: 30px;*/
/*padding-left: 30px;*/
/*padding-bottom: 30px;*/
/*!*padding的綜合屬性設置，用空格分隔開來,方向爲順時針方向，即上、右、下、左*!*/
/*padding:20px 30px 40px 50px;*/
/*!*上 左右 下*!*/
/*padding:20px 30px 40px;*/
/*!*上下、左右*!*/
/*padding 20px 30px;*/
/*上下左右*/
padding:33px;
}
</style>
</head>
<body>
<!--padding：就是內邊距.padding區域是有背景顏色的，而且背景顏色和內容區域的顏色是一致的
即，backgroupd-color這個屬性將填充全部的border之內的所有區域
就是邊框到內容之間的距離；
padding的設置是有四個方向的，在人爲世界裏"上、下、左、右"可是前段世界裏不是這樣的
描述padding方向的方法有兩種：一、寫小屬性；二、寫綜合屬性，用空格隔開；
-->
<div class="box">
這裏是內容，內容，內容哦，真的是內容哦！
</div>
</body>
</html>
31-清除某些標籤默認的padding
一、清除默認padding的方法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>31-清除某些標籤默認的padding</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<!--
好比一般咱們作網站的時候，要清除默認的padding、margin
*號效率不高，因此咱們要使用"並集"選擇器來選中頁面中應該有的標籤(不用去背誦，再也不
重複造輪子，由於已經有人幫咱們寫好了這些內容呢，謝謝他們哦！)
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
-->
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>
博客地址參考：
http://www.javashuo.com/article/p-ktcnalmp-gv.html
https://meyerweb.com/eric/tools/css/reset/
32-認識border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>32-認識border</title>
<style type="text/css">
.box{
width: 200px;
height:200px;
/*red不寫，默認顏色是黑色，5px不寫，默認是3px;*/
/*border:5px solid red;*/
/*按照三要素*/
border-width:5px 10px;
border-style: solid dotted double dashed ;
border-color: red green yellow;
}
/*按照方向分*/
.box{
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;
/*設置border沒有樣式*/
/*border:none;*/
/*border-left: none;*/
/*border-left: 0;*/
}
</style>
</head>
<body>
<!--border即邊框的意思
邊框三要素：
一、粗細；
二、線性；
三、顏色；
若是顏色不謝，默認是黑色的；
若是粗細不寫，不顯示。只寫線性樣式，默認的有上下左右，3px的寬度，solid默認的顏色；
-->
<div class="box"></div>
</body>
</html>
33-使用border製做三角形
一、製做小三角;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>33-使用border製做三角形</title>
<style type="text/css">
/*小三角 箭頭指向下方*/
div{
width:0;
height:0;
/*border-top: 20px solid red;*/
border-bottom: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
/*border-left: 20px solid yellow;*/
/*border-right: 20px solid green;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
34-簡單認識一下margin
一、有坑的margin初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>34-簡單認識一下margin</title>
<style type="text/css">
*{
padding:0;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
background-color:green ;
/*margin: 20px;*/
margin-top: 30px;
margin-left: 50px;
margin-bottom: 100px;
}
p{
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
<p>我是一個p標籤</p>
</body>
</html>
35-標準文檔流的介紹
一、標準文檔流初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>35-標準文檔流的介紹</title>
</head>
<body>
<!--什麼是標準文檔流
宏觀的講：咱們的Web頁面和PhotoShop的設計的軟件有本質的區別；
Web網頁的製做是個"流"的概念；自上而下進行，祥"織毛衣".
而設計軟件，想往哪裏畫，就往哪裏畫。
標準文檔流有哪些微觀現象？
學習前端的意義是爲了成爲一名全棧工程師，與UI設計師、產品經理、Python後端開發工程師協做好工做！
-->
<p>1</p>
<p>2</p>
</body>
</html>
36-標準文檔流下的微觀現象
一、空白摺疊現象；
二、高矮不齊，底邊對齊；
三、自動換行，一行寫不滿，自動換行寫；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>36-標準文檔流下的微觀現象</title>
<style type="text/css">
span{
font-size: 50px;
}
</style>
</head>
<body>
<!--標準文檔流下有哪些微觀現象？
一、空白摺疊現象（不適用空格符號的狀況下，全部空格默認爲1個）；
二、高矮不齊、底邊對齊；
三、自動換行，一行寫不滿，自動換行寫；
-->
<div>
文字文字，我這裏全是文字呢！<span>李靜瓶</span>注意啦。
<img src="./佟麗婭a.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
<img src="./佟麗婭a.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
<img src="./佟麗婭b.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
<img src="./佟麗婭b.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
<img src="./佟麗婭b.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
<img src="./佟麗婭b.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
<img src="./佟麗婭b.jpg" alt="此處是佟麗婭哦！" width="200px" height="200px">
</div>
</body>
</html>
37-行內元素和塊級元素轉換
一、行內元素及塊級元素的相互轉換；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>37-行內元素和塊級元素轉換</title>
<style type="text/css">
/*塊級元素轉行內元素*/
.box1{
/*將塊狀元素轉化爲行內元素*/
/*display:inline;*/
display: inline-block;
width: 200px;
height: 40px;
border:1px solid red ;
}
.box2{
margin-top: 20px;
width:200px;
height: 40px;
border: 1px solid green;
}
span{
background-color: yellow;
width: 100px;
height: 40px;
/*將行內元素轉換爲塊級元素*/
/*display: block;*/
/*隱藏當前的標籤，可是佔用位置*/
display: none;
/*隱藏當前的標籤，可是佔用位置*/
visibility: hidden;
}
img{
width:300px;
height:300px;
/*none是沒有的意思，即隱藏當前的圖片*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="box1">內容</div>
<div class="box1">內容</div>
<div class="box2">內容</div>
<span>alex</span>
<span>alex</span>
<img src="./佟麗婭a.jpg" alt="" >
<img src="./佟麗婭b.jpg" alt="" >
<!--form表單中input、-->
</body>
</html>
38-佈局屬性-浮動介紹
一、浮動初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>38-佈局屬性-浮動介紹</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height:300px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height:400px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<!--理解一下，什麼是浮動呢？
浮動是CSS裏面佈局最多的一個屬性;
效果：兩個元素並排，而且兩個元素都可以設置寬度和高度；
浮動要想學好，必定要知道他的三個特性：
一、浮動的元素脫標；
二、浮動的元素有"字圍效果"
三、緊湊的效果；
-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
39-浮動元素脫標
一、浮動之脫標；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>38-佈局屬性-浮動介紹</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height:200px;
background-color: red;
float: left;
}
.box2{
width: 400px;
height:400px;
background-color: yellow;
}
span{
background-color: green;
/*消除微觀現象，緊湊在一塊兒*/
float: left;
width: 300px;
height: 50px;
}
</style>
</head>
<body>
<!--理解一下，什麼是浮動呢？
浮動是CSS裏面佈局最多的一個屬性;
效果：兩個元素並排，而且兩個元素都可以設置寬度和高度；
浮動要想學好，必定要知道他的三個特性：
一、浮動的元素脫標；
二、浮動的元素有"字圍效果"
三、緊湊的效果；
-->
<!--
脫標：脫離了標準文檔流；
小紅盒子浮動了，脫離標準流，此時小黃這個盒子就是標準文檔流中的第一個盒子。
因此就渲染到了左上方；
-->
<div class="box1">小紅</div>
<div class="box2">小黃</div>
<!--
span標籤不須要轉成塊級元素，也可以設置寬高；
全部的標籤一旦設置了浮動，可以並排，都不區分行內、塊級元素；
-->
<span>標籤學習呢！</span>
<span>標籤學習呢！</span>
</body>
</html>
40-浮動元素互相貼靠
一、浮動元素之相互貼靠初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>40-浮動元素互相貼靠</title>
<style type="text/css">
span{
background-color: red;
float: left;
}
.box1{
width: 100px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 150px;
height: 150px;
background-color: yellow;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<!--
若是父元素body，有足夠的空間，第三個緊靠第二個，第二個緊靠着第一個，第一個緊靠左邊’
若是沒有足夠的空間，那麼就會靠着第1個，若是沒有足夠
空間，自身主動往邊兒上靠；
-->
<!--<span>崔曉昭</span>-->
<!--<span>李靜瓶</span>-->
<div class="box1">崔曉昭</div>
<div class="box2">李靜瓶</div>
<div class="box3">高志粉</div>
</body>
</html>
41-浮動元素字圍效果
一、浮動之字圍效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>41-浮動元素字圍效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
p{
background-color: #666;
}
img{
width:300px;
height: 300px;
}
</style>
</head>
<body>
<!--浮動元素的"字圍效果"
當div浮動，p不浮動；
div擋住了p；div的層級高，可是p中的文字不會被遮蓋，此時
就造成了字圍效果；
關於浮動，咱們強調一點：浮動這個元素，咱們初期必定要遵循一個原則
永遠不是一個盒子單獨浮動，要浮動就一塊兒浮動；
-->
<div>
<img src="./pyy01.jpg" alt="">
</div>
<p>
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
你是個人眼，讓我看見四級的變換，由於你是個人眼，
讓我看將擁擠的人潮；你是個人眼......
</p>
</body>
</html>
42-浮動元素緊湊效果
一、浮動之緊湊效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>42-浮動元素緊湊效果</title>
<style type="text/css">
div{
float: left;
background-color: red;
}
</style>
</head>
<body>
<!--收縮：一個浮動元素，若是沒有設置width，那麼就自動收縮爲文字中的寬度(這點跟行內元素很像)
到目前爲止，咱們知道浮動的四個特性：
一、浮動的元素脫標；
二、浮動的元素相互貼靠；
三、浮動的元素有"字圍效果"；
四、浮動元素的收縮效果；
此刻，若是想製做網頁，就是經過浮動來實現並排的；
-->
<div>
alex
</div>
</body>
</html>
43-小米商城結構佈局介紹
一、真實頁面展現；
二、原型圖展現；
44-小米商城頂部欄
一、結構圖；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城結構圖</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.bar-banner{
width: 1226px;
height:40px;
/**/
/*居中顯示*/
margin: 0 auto;
}
.nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
</style>
</head>
<body>
<div class="topBar">
<div class="bar-banner">
<div class="nav">導航條</div>
<div class="cart">購物車</div>
<div class="user-info">用戶登陸</div>
</div>
</div>
</body>
</html>
45-小米商城導航欄
一、導航欄代碼實現；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城結構圖</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.container1{
width: 1226px;
/**/
/*居中顯示*/
margin: 0 auto;
}
.topBar-nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.topBar-cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
.logo{
float: left;
width: 62px;
height: 55px;
background-color: #E766EA;
margin-top: 22px;
}
.header{
width: 100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto ;
}
.nav{
float: left;
width: 780px;
height: 110px;
background-color: yellow;
}
.search{
float: right;
width: 296px;
height: 50px;
background-color: purple;
margin-top: 25px;
}
</style>
</head>
<body>
<!--topBar部分的盒子模型-->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">導航條</div>
<div class="topBar-cart">購物車</div>
<div class="user-info">用戶登陸</div>
</div>
</div>
<!--header-->
<div class="header">
<div class="container2">
<div class="logo">logo</div>
<div class="nav">導航</div>
<div class="search">搜索框</div>
</div>
</div>
</body>
</html>
46-小米商城內容列表
一、織毛衣似的進行寫代碼；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城結構圖</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.container1{
width: 1226px;
/**/
/*居中顯示*/
margin: 0 auto;
}
.topBar-nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.topBar-cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
.logo{
float: left;
width: 62px;
height: 55px;
background-color: #E766EA;
margin-top: 22px;
}
.header{
width: 100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto ;
}
.nav{
float: left;
width: 780px;
height: 110px;
background-color: yellow;
}
.search{
float: right;
width: 296px;
height: 50px;
background-color: purple;
margin-top: 25px;
}
.content{
width: 1226px;
height: 460px;
margin: 0 auto;
}
.content-list{
float: left;
width: 234px;
height: 460px;
background-color: #1971FE;
}
.lunbo{
float: left;
width: 992px;
height: 460px;
background-color: #FD8008;
}
</style>
</head>
<body>
<!--topBar部分的盒子模型-->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">導航條</div>
<div class="topBar-cart">購物車</div>
<div class="user-info">用戶登陸</div>
</div>
</div>
<!--header-->
<div class="header">
<div class="container2">
<div class="logo">logo</div>
<div class="nav">導航</div>
<div class="search">搜索框</div>
</div>
</div>
<!--輪播圖div-->
<div class="content">
<!--內容選擇列表-->
<div class="content-list"></div>
<div class="lunbo"></div>
</div>
</body>
</html>
47-小米商城選購區域
一、小米商城選購區域代碼；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城結構圖</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
/*清除ul的默認樣式*/
list-style: none;
}
.topBar{
width: 100%;
height: 40px;
background-color: black;
}
.container1{
width: 1226px;
/**/
/*居中顯示*/
margin: 0 auto;
}
.topBar-nav{
float: left;
width: 375px;
height:40px;
background-color: red;
}
.user-info {
float: right;
width: 140px;
height: 40px;
background-color: #FC4B38;
margin-right: 15px;
}
.topBar-cart{
float: right;
width: 120px;
height: 40px;
background-color: green;
}
.logo{
float: left;
width: 62px;
height: 55px;
background-color: #E766EA;
margin-top: 22px;
}
.header{
width: 100%;
height: 110px;
}
.container2{
width: 1226px;
height: 110px;
margin: 0 auto ;
}
.nav{
float: left;
width: 780px;
height: 110px;
background-color: yellow;
}
.search{
float: right;
width: 296px;
height: 50px;
background-color: purple;
margin-top: 25px;
}
.content{
width: 1226px;
height: 460px;
margin: 0 auto 14px;
}
.content-list{
float: left;
width: 234px;
height: 460px;
background-color: #1971FE;
}
.lunbo{
float: left;
width: 992px;
height: 460px;
background-color: #FD8008;
}
.shop{
width: 1226px;
height: 170px;
margin: 0 auto 40px;
/**/
}
.shop .channel{
width: 234px;
height: 170px;
float: left;
background-color: purple;
}
.shop .advertising{
width: 992px;
height: 170px;
/**/
float: left;
}
.shop .advertising ul li{
width: 316px;
height: 170px;
background-color: red;
float: right;
margin-left: 14px;
}
</style>
</head>
<body>
<!--topBar部分的盒子模型-->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">導航條</div>
<div class="topBar-cart">購物車</div>
<div class="user-info">用戶登陸</div>
</div>
</div>
<!--header-->
<div class="header">
<div class="container2">
<div class="logo">logo</div>
<div class="nav">導航</div>
<div class="search">搜索框</div>
</div>
</div>
<!--輪播圖-->
<div class="content">
<!--內容選擇列表-->
<div class="content-list"></div>
<div class="lunbo"></div>
</div>
<!--選購區域-->
<div class="shop">
<!--商品的選購引導-->
<div class="channel">
</div>
<div class="advertising">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
48-使用浮動帶來的問題
一、引出問題，浮動帶來必定的影響；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-使用浮動帶來的問題</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 1126px;
/*子元素浮動父，盒子通常不設置高度*/
/*出現這種狀況，咱們要清除浮動帶來的影響*/
/*height: 300px;*/
}
.box1{
width:200px;
height: 300px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: green;
float: left;
}
.box3{
width: 400px;
height: 100px;
background-color: blue;
float: left;
}
.father2{
width: 1126px;
height: 600px;
background-color: purple;
}
</style>
</head>
<body>
<div class="father ">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
49-清除浮動1：給父盒子設置高度
一、給父盒子設置高度來清除浮動帶來的影響；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>49-清除浮動1：給父盒子設置高度</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
/*給父盒子設置高度，不靈活。
一、若是哪天公司產品經理忽然要改，要求父盒子高度變大，並且不只僅是一個地方，
那麼咱們不可能去找源代碼去修改
*/
/*固定導航欄*/
/*height: 40px;*/
}
ul{
list-style: none;
height: 40px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<ul>
<li>Python全棧開發</li>
<li>Linux雲計算工程師</li>
<li>Web前端開發</li>
</ul>
</div>
<div class="box">
</div>
</body>
</html>
50-清除浮動2=clear：both
一、使用clear：both來清除浮動；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>50-清除浮動2-clear：both</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div>
<ul>
<li>Python全棧開發</li>
<li>Linux雲計算工程師</li>
<li>Web前端開發</li>
<!--給浮動元素最後面加一個空的div而且該元素不浮動，而後設置clear:both
來清除別人對個人浮動影響-->
<!--清除浮動的專業名詞：內牆法-->
<!--平白無故加了div元素，結構冗餘-->
</ul>
<div class="clear"></div>
</div> <div class="box"> </div> </body> </html>
51-清除浮動3-僞元素清除法（經常使用）
一、僞元素清除法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>51-清除浮動3-僞元素清除法(經常使用)</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
/*專有名詞-clearfix
必需要寫這三句話
*/
.clearfix:after {
content: '';
clear: both;
display: block;
}
/*新浪網站上的清除浮動的5句話，與以上效果等價*/
/*.clearfix:after {*/
/*content: ".";*/
/*display: block;*/
/*height: 0;*/
/*visibility: hidden;*/
/*clear: both*/
/*}*/
</style>
</head>
<body>
<div class="clearfix">
<ul>
<li>Python全棧開發</li>
<li>Linux雲計算工程師</li>
<li>Web前端開發</li>
<!--給浮動元素最後面加一個空的div而且該元素不浮動，而後設置clear:both
來清除別人對個人浮動影響-->
<!--清除浮動的專業名詞：內牆法-->
<!--平白無故加了div元素，結構冗餘-->
</ul>
</div>
<div class="box">
</div>
</body>
</html>
52-清除浮動4-overflow「hidden（經常使用）
一、overflow之hidden屬性隱藏；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>52-清除浮動4-overflow：hidden(經常使用)</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
div{
width: 400px;
}
.box{
width:400px;
overflow: hidden;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box2{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>Python全棧開發</li>
<li>Linux雲計算工程師</li>
<li>Web前端開發</li>
<!--給浮動元素最後面加一個空的div而且該元素不浮動，而後設置clear:both
來清除別人對個人浮動影響-->
<!--清除浮動的專業名詞：內牆法-->
<!--平白無故加了div元素，結構冗餘-->
</ul>
</div>
<div class="box2">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
body{
overflow: auto;
}
div{
width: 300px;
height: 300px;
border: 1px solid red;
/*overflow: auto;*/
overflow: inherit;
}
</style>
</head>
<body>
<div>
內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容
</div>
</body>
</html>
53-margin垂直方向塌陷問題
一、margin在垂直方向上的塌陷問題初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>53-margin垂直方向塌陷問題</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
overflow: hidden;
border: 1px solid gray;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px;
float: left;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<!--當給兩個兄弟盒子設置垂直方向上的margin時候，
那麼瀏覽器會以較大的px爲準，那麼咱們將這種現象稱之爲塌陷
一、浮動的盒子，垂直方向上不塌陷；
-->
<div class="box1">
</div>
<div class="box2">
</div>
</div>
</body>
</html>
54-margin：0 auto水平居中盒子
一、margin: 0 auto初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>54-margin：0 auto水平居中盒子</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
/*盒子設置水平居中的寬度時候，必定要設置width屬性*/
width: 780px;
height: 50px;
background-color: red;
/*margin: 0 auto;*/
/*如下效果與以上等價，單獨使用一種，left或者fight沒有意義*/
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<!--
一、使用margin：0 auto；水平居中盒子；
二、盒子設置水平居中，必需要有width，要明確width的值，文字水平居中使用text-align:center;
三、只有標準流下的盒子，才能使用margin:0 auto;
四、當一個盒子浮動了，固定定位或者絕對定位了，marin:0 auto;不能使用；
五、margin:0 auto是居中盒子，不是居中文本，居中文本請使用text-aligh:center;
-->
<div>
cuixiaozhao
</div>
</body>
</html>
55-善於使用父親的padding，而不是margin
一、優先使用padding屬性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>55-善於使用父親的padding,而不是margin</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
/*width: 300px;*/
/*height: 300px;*/
width: 270px;
height: 270px;
background-color: blue;
padding-top: 30px;
padding-left: 30px;
/*border: 1px solid red;*/
}
.xiongda{
width: 100px;
height: 100px;
background-color: orange;
/*margin-left: 30px;*/
/*margin-top: 30px;*/
}
</style>
</head>
<body>
<!--由於父親沒有border，那麼兒子margin實際參考線是"流"的頂行
因此父親與兒子一同掉下來；
-->
<div class="father">
<div class="xiongda">
</div>
</div>
</body>
</html>
56-文本屬性和字體屬性
一、字體屬性初識；
1) font-weight；
2）font-size；
3）color；
- 十六進制值 如: ＃FF0000；
- 一個RGB值 如: RGB(255,0,0)；
- 顏色的名稱 如: red；
4）text-align
5）line-height；
6）text-decoration；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 300px;
height: 100px;
/**/
border: 1px solid red;
/*瀏覽器默認字體大小爲:16px:像素單位
像素-PC端：
em-移動端：
rem-移動端：
%-百分比:
*/
font-size: 20px;
font-weight: bolder;
text-align: right;
/*text-decoration用於清除a標籤的默認樣式*/
text-decoration: none blue ;
color: blueviolet;
cursor: pointer;
/*經常使用的一種寫法，使得line-height等於盒子的height，內容變水平居中顯示*/
line-height: 100px;
}
</style>
</head>
<body>
<div>
我是崔曉昭.
</div>
</body>
</html>
57-單行文本垂直居中
一、單行文本的垂直居中；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>57-單行文本垂直居中</title>
<style type="text/css">
div{
width: 300px;
height: 50px;
border:1px solid red;
/*行高的意思：公式：行高=盒子的高度，讓文本垂直居中，可是僅適用於單行文本*/
line-height: 50px;
font-size: 18px;
}
</style>
</head>
<body>
<div>崔曉昭 河北</div>
</body>
</html>
58-多行文本垂直居中
一、多行文本的垂直居中；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>58-多行文本垂直居中</title>
<style type="text/css">
div{
width: 300px;
height: 160px;
border:1px solid red;
padding-top: 40px;
/*行高的意思：公式：行高=盒子的高度，讓文本垂直居中，可是僅適用於單行文本*/
line-height: 50px;
font-size: 16px;
}
</style>
</head>
<body>
<div>
崔曉昭·河北石家莊市崔曉昭·河北石家莊市崔曉昭·河北石家莊市崔曉昭·河北石家莊市
</div>
</body>
</html>
59-font-family介紹
一、font-family初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字體</title>
<style type="text/css">
p{
width: 300px;
height: 60px;
/* 等價於
font-size: 14px;
line-height: 30px;
font-family: '宋體';
*/
font:14px/30px "Arial","Hanzipen SC","微軟雅黑";
}
</style>
</head>
<body>
<!--
使用font-family注意幾點：
1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝，
好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，
那麼就會變成宋體
頁面中，中文咱們只使用： 微軟雅黑、宋體、黑體。
若是頁面中，須要其餘的字體，那麼須要切圖。 英語：Arial 、 Times New Roman
2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。
3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體，
就自動的變爲後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";
4.全部的中文字體，都有英語別名，
咱們也要知道： 微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高能夠用百分比，表示字號的百分之多少。
通常來講，都是大於100%的，由於行高必定要大於字號。
font:12px/200% 「宋體」 等價於 font:12px/24px 「宋體」;
反過來，好比： font:16px/48px 「宋體」;
等價於 font:16px/300% 「宋體」
-->
<p> 我是文本</p>
</body>
</html>
60-超連接美化導航案例
一、導航初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>60-超連接美化導航案例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a標籤除外，不繼承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">網站導航1</a>
</li>
<li>
<a href="">網站導航2</a>
</li>
<li>
<a href="">網站導航3</a>
</li>
<li>
<a href="">網站導航4</a>
</li>
<li>
<a href="">網站導航5</a>
</li>
<li>
<a href="">網站導航6</a>
</li>
</ul>
</div>
</body>
</html>
61-顏色的使用
一、CSS中，顏色的三種表示方法初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>61-顏色的使用.html</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/**/
background-color: #f00;
/* 顏色表示方法有哪些？
一共有三種：單詞、rgb表示法、十六進制表示法
一、rgb:紅色 綠色 藍色 三原色（red,green,blue）
光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。
用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。
若是此項的值，是255，那麼就說明是純色：
黑色：
background-color: rgb(0,0,0);
光學顯示器，每一個元件都不發光，黑色的。
白色：
background-color: rgb(255,255,255);
顏色能夠疊加，好比黃色就是紅色和綠色的疊加：
background-color: rgb(255,255,0);
再好比：
background-color: rgb(111,222,123);
就是紅、綠、藍三種顏色的不一樣比例疊加。
16進製表示法
紅色：
background-color: #ff0000;
全部用#開頭的值，都是16進制的。
#ff0000：紅色
16進製表示法，也是兩位兩位看，看r、g、b，可是沒有逗號隔開。
ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。因此等價於rgb(255,0,0);
怎麼換算的？咱們介紹一下
咱們如今看一下10進制中的基本數字（一共10個）:
0、一、二、三、四、五、六、七、八、9
16進制中的基本數字（一共16個）:
0、一、二、三、四、五、六、七、八、9 && a、b、c、d、e、f
16進制對應表：
十進制數 十六進制數
0 0
1 1
2 2
3 3
…… ……
10 a
11 b
12 c
13 d
14 e
15 f
16 10
17 11
18 12
19 13
……
43 2b
……
255 ff
十六進制中，13 這個數字表示什麼？
表示1個16和3個1。 那就是19。 這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。
小練習：
16進制中28等於10進制多少？
答：2*16+8 = 40。
16進制中的2b等於10進制多少？
答：2*16+11 = 43。
16進制中的af等於10進制多少？
答：10 * 16 + 15 = 175
16進制中的ff等於10進制多少？
答：15*16 + 15 = 255
因此，#ff0000就等於rgb(255,0,0)
background-color: #123456;
等價於：
background-color: rgb(18,52,86);
因此，任何一種十六進制表示法，都可以換算成爲rgb表示法。也就是說，兩個表示法的顏色數量，同樣。
十六進制能夠簡化爲3位，全部#aabbcc的形式，可以簡化爲#abc;
好比：
background-color:#ff0000;
等價於
background-color:#f00;
好比：
background-color:#112233;
等價於
background-color:#123;
只能上面的方法簡化，好比
background-color:#222333;
沒法簡化！
再好比
background-color:#123123;
沒法簡化！
要記住：
#000 黑
#fff 白
#f00 紅
#333 灰
#222 深灰
#ccc 淺灰
*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
62-background-img的使用
一、平鋪、不平鋪以及水平&垂直方向上的圖片顯示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-background-img的使用</title>
<style type="text/css">
div{
width: 1500px;
height: 1600px;
background-image: url(波姐a.jpg);
/*全面平鋪*/
/*backgroud-repeat*/
/*不平鋪*/
/*background-repeat: no-repeat;*/
/*水平方向*/
/*background-repeat: repeat-x;*/
/*垂直方向*/
/*background-repeat: repeat-y;*/
padding:100px
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
63-background-repeat的使用
一、backgroup-repeat的使用講解；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>63-background-repeat的使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
background-image: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg)
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a標籤除外，不繼承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">網站導航1</a>
</li>
<li>
<a href="">網站導航2</a>
</li>
<li>
<a href="">網站導航3</a>
</li>
<li>
<a href="">網站導航4</a>
</li>
<li>
<a href="">網站導航5</a>
</li>
<li>
<a href="">網站導航6</a>
</li>
</ul>
</div>
</body>
</html>
64-background-position的使用
一、background-postion之+ -號的使用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-background-img的使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 1500px;
height: 1600px;
background-image: url(波姐a.jpg);
/*全面平鋪*/
/*backgroud-repeat*/
/*不平鋪*/
background-repeat: no-repeat;
background-position: +100px +100px;
/*background-position: -100px -100px;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
65-css精靈圖的介紹和使用
一、CSS中精靈圖(俗稱雪碧圖)的介紹及常規用法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>65-css精靈圖的介紹和使用</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 48px;
height: 48px;
/*height: 1194px;*/
background-image: url(1.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.box2{
width: 48px;
height: 48px;
background-image: url(1.png);
background-repeat: no-repeat;
background-position: 0 -440px;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
66-background-position方向的使用
一、backgroup-postion的綜合屬性初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>60-超連接美化導航案例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
/*background-image: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg);*/
/*background-repeat: no-repeat;*/
/*水平居中，通天banner圖*/
/*background-position: center top;*/
/*backgroup的綜合屬性進行設置*/
background: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg) no-repeat center top red;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a標籤除外，不繼承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">網站導航1</a>
</li>
<li>
<a href="">網站導航2</a>
</li>
<li>
<a href="">網站導航3</a>
</li>
<li>
<a href="">網站導航4</a>
</li>
<li>
<a href="">網站導航5</a>
</li>
<li>
<a href="">網站導航6</a>
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-background-img的使用</title>
<style type="text/css">
div{
width: 1500px;
height: 1600px;
background-image: url(波姐a.jpg);
/*全面平鋪*/
/*backgroud-repeat*/
/*不平鋪*/
/*background-repeat: no-repeat;*/
/*水平方向*/
/*background-repeat: repeat-x;*/
/*垂直方向*/
/*background-repeat: repeat-y;*/
/*padding: 100px;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
67-background-attachment的使用
一、綜合屬性之background-attachment的運用；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>67-background-attach的使用</title>
<style type="text/css">
div{
width: 1200px;
height: 2000px;
border: 1px solid red ;
background: url(佟麗婭a.jpg) no-repeat 0 0;
/*固定背景圖片，使得不隨鼠標滾動而滾動*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
</html>
68-相對定位的介紹、特性
一、相對定位概念初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>68-相對定位的介紹</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: red;
/*若是對當前元素僅僅設置相對定位，那麼與標準流下的盒子沒有任何區別*/
position: relative;
/*設置相對定位後，咱們就可使用四個方向的屬性，top left right bottom
相對定位：相對於本身原來的自己定位，top:20px;
那麼盒子相對於原來的位置向下移動，即相對定位僅僅是微調咱們元素的位置；
*/
top:20px;
left:30px;
}
</style>
</head>
<body>
<!--定位有三種
一、相對定位；
二、絕對定位；
三、固定定位；
拋出異常：這三種定位，都暗藏玄機，咱們一一掌握！
position:relative;
position:absolute;
position:fixed;
-->
<div class="box1"></div>
</body>
</html>
69-相對定位的用途
一、相對定位的三大特性詳解；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>69-相對定位的特性、位置屬性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative;
top: 50px;
left: 100px;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<!--相對定位的三大特性：
一、不脫標（標準流）；
二、形影分離；
三、老家留坑；
在頁面中，沒有什麼太大的做用，影響咱們的佈局。可是咱們不要使用相對定位
來作壓蓋效果；
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
70-相對定位的用途
一、相對定位的弊端演示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-相對定位的用途</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
/*background-image: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg);*/
/*background-repeat: no-repeat;*/
/*水平居中，通天banner圖*/
/*background-position: center top;*/
/*backgroup的綜合屬性進行設置*/
background: url(https://fundres.mipay.com/res/pc/images/index_banner-744e8a4eb7.jpg) no-repeat center top red;
}
.nav{
width: 960px;
/*height: 40px;*/
overflow: hidden;
margin: 100px auto 0;
background-color:purple;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
/*相對定位的弊端效果演示*/
.nav ul li.xiaoming{
position: relative;
top:40px;
left: 30px;
/*padding: 50px;*/
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family: 'Consolas', 'Monaco', 'Bitstream Vera Sans Mono', monospace
}
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
/*a標籤除外，不繼承父元素的color*/
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">網站導航1</a>
</li>
<li class="xiaoming">
<a href="">網站導航2</a>
</li>
<li>
<a href="">網站導航3</a>
</li>
<li>
<a href="">網站導航4</a>
</li>
<li>
<a href="">網站導航5</a>
</li>
<li>
<a href="">網站導航6</a>
</li>
</ul>
</div>
<!--由於相對定位有坑，站着位置不做爲，噁心人，就想部分guoqi單位，因此咱們通常不要使用相對定位來作壓蓋效果。
他在頁面中，效果做用極小，就以下兩個做用：
一、微調元素位置；
二、作絕對定位的參考(父元素相對定位，子元素絕對定位)講到絕對定位時候會講到；
-->
</body>
</html>
二、相對定位的做用說明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>70-相對定位的用途2</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
/*微調咱們的元素信息*/
.btn {
position: relative;
top: 3px;
left: -5px;
}
</style>
</head>
<body>
<div>
<input type="text" name="username" class="user" />
<!--相對定位的做用演示-->
<input type="button" value="點我吧" class="btn"/>
</div>
</body>
</html>
71-絕對定位的介紹、屬性
一、決定定位初識及其屬性；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>71-絕對定位的介紹、特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
/*絕對定位的盒子：一、脫標；二、作遮蓋效果，提高了層級；三、設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高*/
position: absolute;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
span{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*position:relative;*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>崔曉昭</span>
</body>
</html>
72-絕對定位參考點
一、絕對定位參考點說明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/**{
padding: 0;
margin: 0;
}*/
body{
width: 100%;
height: 2000px;
border: 10px solid green;
}
.box{
width: 200px;
height: 200px;
background-color: red;
/*絕對定位的參考點：當咱們使用top屬性描述的時候
是以頁面的左上角(跟瀏覽器的左上角有區分)做爲參考點來調整位置
當我使用bottom屬性描述的時候，是以首屏左下角做爲參考點。
*/
position: absolute;
/*top: 100px;*/
bottom: 100px;
left: 38px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
73-絕對定位以父輩元素做參考點
一、父輩元素做爲參考點的場景演示；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>73-絕對定位以父輩元素做參考點</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父輩元素設置相對定位*/
position: relative;
padding: 50px;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
/*position: relative;*/
}
.box p{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
/*top: 0;
left: 0;*/
top: 100px;
left: 20px;
}
/*給父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角做爲參考點,
這父輩元素不必定是爸爸，有多是爺爺；
*/
</style>
</head>
<body>
<div class="box">
<div class="box2">
<p></p>
</div>
</div>
</body>
</html>
74-父絕子絕、父相子絕、父固子絕
一、以上標題的說明；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>74-父絕子絕、父相子絕、父固子絕</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父輩元素設置絕對定位*/
position: absolute;
padding: 50px;
}
.box p{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 0;
left: 0;
/*top: 100px;
left: 20px;*/
}
/*給父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角做爲參考點,
這父輩元素不必定是爸爸，有多是爺爺；
一、若是父親設置了定位，那麼以父親爲參考點。
二、若是父親未設置定位，那麼以父輩元素設置了定位的爲參考點；
*/
</style>
</head>
<body>
<!--不只僅是"父相子絕"、"父絕子絕"、"父固子絕",都是以父輩元素爲參考點！
注意啦"父絕子絕"沒有實戰意義，作站的時候不會出現該狀況，由於絕對定位脫離標準流，影響頁面的佈局。
相反"父相子絕"在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，
僅僅是在當前父輩元素內調整位置信息。
-->
<div class="box">
<p></p>
</div>
</body>
</html>
75-絕對定位的盒子無視父輩的padding
一、無視父輩的padding；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>75-絕對定位的盒子無視父輩的padding</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid red;
position: relative;
padding: 50px;
}
.father p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="father">
<p></p>
</div>
<!--絕對定位的盒子是無視父輩的padding的-->
</body>
</html>
76-絕對定位盒子居中
一、絕對定位盒子中：margin:0 auto的代替方案；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>76-絕對定位盒子居中</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
/**/
background-color: #000000;
}
.box .c{
width: 960px;
height: 69px;
background-color: pink;
/*margin: 0 auto;*/
position: absolute;
/*公式講解：設置絕對定位以後，margin:0不起做用；
若是想讓絕對定位的盒子居中顯示，使用以下方案：
一、先設置left:50%；
二、再使用margin-left等於元素寬度的1/2,即可實現絕對定位盒子居中*/
left: 50%;
margin-left: -480px;
}
</style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div>
</body>
</html>
77-固定定位案例_返回頂部
一、固定定位fixed初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>77-固定定位介紹和特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
/*固定定位*/
/*固定定位：固定當前的元素不會隨着頁面滾動而滾動
參考點：設置固定定位，用top描述，那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點；
做用：
一、返回頂部欄；
二、固定導航欄；
三、作頁面的廣告；
*/
position: fixed;
/*top: 100px;
left: 100px;*/
bottom: 100px;
right: 40px;
}
</style>
</head>
<body>
<div>
<p>你們注意啦！此處是固定定位！</p>
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
</div>
</body>
</html>
78-固定定位案例_固定導航欄
一、固定導航欄以及JavaScript初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>78-固定定位案例_返回頂部</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
/*top: 100px;
left: 100px;*/
bottom: 30px;
right: 40px;
line-height: 100px;
font-size: 20px;
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body>
<div>
<p>返回頂部</p>
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
</div>
//後面的JavaScript章節會用到；
<script src="./js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('p').click(function(){
$('html').animate({
"scrollTop":0
},2000)
})
})
</script>
</body>
</html>
79-固定定位案例_固定導航欄
一、固定導航欄；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>79-固定定位案例_固定導航欄</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
/*給body設置導航欄的告訴，來顯示下方圖片的整個內容*/
padding-top: 49px;
}
.wrap{
width: 100%;
height: 49px;
background-color: #000;
/*設置固定定位以後，必定要加上top屬性和left屬性*/
position: fixed;
top: 0;
left:0;
}
.wrap .nav{
width: 960px;
height: 49px;
margin: 0 auto;
}
.wrap .nav ul li{
width: 160px;
height: 49px;
float: left;
/*line-height: 49px;*/
text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "微軟雅黑" "agency fb";
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body>
<div class="wrap">
<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>
</div>
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
</body>
</html>
80-z-index的四大特性
一、z-index的四大特性初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>80-z-index的四大特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top: 30px;
left: 40px;
/*引入z-index值*/
z-index: 1;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
top: 0;
left: 0;
/*引入z-index值*/
z-index: -1;
}
.box3{
width: 200px;
height: 200px;
background-color: green;
float: left;
margin-left: 20px;
margin-top: -30px;
/*帶有float屬性的，沒法使用z-index屬性*/
/*z-index: 5;*/
}
</style>
</head>
<body>
<!--z-index
一、表示誰壓着誰，即遮蓋，數值大亞蓋住數值小的；
二、只有定位了的元素，纔能有z-index，也就是說，無論相對定位，絕對定位，固定定位；
都可以可使用z-index，而浮動元素不能使用；
三、z-index值沒有單位，就是一個正整數，默認的z-index的值爲0；
四、若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人
定位了元素，永遠壓住沒有定位的元素。
五、從父現象：父親慫了，兒子再牛逼也沒用；
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
81-z-index的從父現象
一、z-index從父現象初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>81-z-index的從父現象</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.cql{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 3;
}
.cql .cxs{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 240px;
left: 300px;
z-index: 333;
}
.gzf{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 2;
}
.gzf .cxz{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 320px;
/*從父現象*/
z-index: 666;
}
</style>
</head>
<body>
<div class="cql">
<p class="cxs"></p>
</div>
<div class="gzf">
<p class="cxz"></p>
</div>
</body>
</html>
82-z-index的用途
一、z-index的用途初識；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>82-z-index的用途</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
/*給body設置導航欄的告訴，來顯示下方圖片的整個內容*/
padding-top: 49px;
}
.wrap{
width: 100%;
height: 49px;
background-color: #000;
/*設置固定定位以後，必定要加上top屬性和left屬性*/
position: fixed;
top: 0;
left:0;
z-index: 9999;
}
.wrap .nav{
width: 960px;
height: 49px;
margin: 0 auto;
z-index: 8888;
}
.wrap .nav ul li{
float: left;
width: 160px;
height: 49px;
/*line-height: 49px;*/
text-align: center;
}
.wrap .nav ul li a{
width: 160px;
height: 49px;
display: block;
color: #fff;
font: 20px/49px "微軟雅黑" "agency fb";
}
.wrap .nav ul li a:hover{
background-color: red;
font-size: 22px;
}
.app{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<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>
</div>
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<div class="app"></div>
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
<img src="佟麗婭a.jpg" alt="" />
</body>
</html>
相關文章
- 1. 第五模塊：WEB開發基礎 第1章·HTML&CSS基礎
- 2. 【前端】第五模塊·WEB開發基礎-第3章jQuery&Bootstrap
- 3. 【前端】第五模塊·WEB開發基礎-第2章JavaScript基礎
- 4. 第五模塊：WEB開發基礎 第2章·JavaScript基礎
- 5. 第五模塊·WEB開發基礎-第2章JavaScript基礎
- 6. 第五模塊：WEB開發基礎 第3章·BootStrap&JQuery開發
- 7. 第五模塊·WEB開發基礎-第3章jQuery&Bootstrap
- 8. 第五章 模塊之基礎知識
- 9. 第五章 基礎構建模塊
- 10. Web前端基礎(18):jQuery基礎(五)
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • PHP開發工具
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 升級Gradle後報錯Gradle‘s dependency cache may be corrupt (this sometimes occurs
- 2. Smarter, Not Harder
- 3. mac-2019-react-native 本地環境搭建(xcode-11.1和android studio3.5.2中Genymotion2.12.1 和VirtualBox-5.2.34 )
- 4. 查看文件中關鍵字前後幾行的內容
- 5. XXE萌新進階全攻略
- 6. Installation failed due to: ‘Connection refused: connect‘安卓studio端口占用
- 7. zabbix5.0通過agent監控winserve12
- 8. IT行業UI前景、潛力如何？
- 9. Mac Swig 3.0.12 安裝
- 10. Windows上FreeRDP-WebConnect是一個開源HTML5代理，它提供對使用RDP的任何Windows服務器和工作站的Web訪問
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 第五模塊：WEB開發基礎 第1章·HTML&CSS基礎
- 2. 【前端】第五模塊·WEB開發基礎-第3章jQuery&Bootstrap
- 3. 【前端】第五模塊·WEB開發基礎-第2章JavaScript基礎
- 4. 第五模塊：WEB開發基礎 第2章·JavaScript基礎
- 5. 第五模塊·WEB開發基礎-第2章JavaScript基礎
- 6. 第五模塊：WEB開發基礎 第3章·BootStrap&JQuery開發
- 7. 第五模塊·WEB開發基礎-第3章jQuery&Bootstrap
- 8. 第五章 模塊之基礎知識
- 9. 第五章 基礎構建模塊
- 10. Web前端基礎(18):jQuery基礎(五)