前端知識 — HTML內容、CSS基礎
前端
一、前端是作什麼的css
二、咱們爲何要學前端？html
三、前端都有哪些內容？前端
一、HTMLgit
二、CSSgithub
三、JavaScript數據庫
四、jQuery和Bootstrapdjango
Web開發本質：
一、瀏覽器輸入網址回車都發生了什麼？編程
一、瀏覽器給服務端發送了一個消息後端
二、服務端拿到消息瀏覽器
三、服務端返回消息
四、瀏覽器展現頁面
import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(1024) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close()
HTML是什麼
超文本標記語言（Hypertext Markup Language, HTML）是一種用於建立網頁的標記語言。
本質上是瀏覽器可識別的規則，咱們按照規則寫網頁，瀏覽器根據規則渲染咱們的網頁。對於不一樣的瀏覽器，對同一個
標籤可能會有不一樣的解釋。（兼容性問題）
網頁文件的擴展名：.html或.htm
最基本的HTML文檔：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
一、<!DOCTYPE html>聲明爲HTML5文檔
二、<html>、</html>是文檔的開始標誌和結束標誌。是HTML頁面的根元素，在他們之間是文檔的頭部（head）和主體（body）。
三、<head>、</head>定義了HTML文檔的開頭部分。他們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。
四、<title>、</title>定義了網頁標題，在瀏覽器標題欄顯示。
五、<body>、<、body>之間的文本是可見的網頁主體內容。
HTML標籤格式
HTML標籤是由尖括號包圍的關鍵字，如<html>，<div>等
HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。
也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg"/>等。
標籤裏面能夠有若干屬性，也能夠不帶屬性。
標籤的語法：
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" ......>內容部分</標籤名>
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" ...... />
幾個很重要的屬性：
id：定義標籤的惟一ID，HTML文檔樹中惟一
class：爲html元素定義一個或多個類名（classname）（CSS樣式類名）
style：規定元素的行內樣式（CSS樣式）
HTML經常使用標籤
head經常使用標籤
<title></title> 定義網頁標題
<style></style> 定義內部樣式表
<script></script> 定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件
<meta/> 定義網頁原信息
meta標籤
meta標籤介紹：
<meta>元素可提供有關頁面的元信息（meta-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標籤位於文檔的頭部，不包括任何內容。
<meta>提供的信息是用戶不可見的。
meta標籤的組成：meta共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。
一、http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確得顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。
<!--2秒後跳轉到對應的網址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴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="老男孩教育Python學院">
body內經常使用標籤
基本標籤（塊級標籤和內聯標籤）
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s>
<p>段落標籤</p>
<h1>標題1</h1>
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<!--換行-->
<br>
<!--水平線--><hr>
特殊字符
| 內容 | 對應代碼 |
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 註冊 | ® |
div標籤和span標籤
div標籤用來定義一個塊級元素，並沒有實際意義。主要是經過CSS樣式爲其賦予不一樣的表現。
span標籤用來定義內聯（行內）元素，並沒有實際意義。主要經過CSS樣式爲其賦予不一樣表現。
塊級元素與行內元素的區別：
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不須要另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。
注意：
關於標籤嵌套：一般塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包括塊級元素，它只能包括其它內聯元素。
p標籤不能包含塊級標籤，p標籤也不能包含p標籤。
img標籤
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">
a標籤：超連接標籤
所謂的超連接是指從一個網頁指向一個目標的鏈接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。
什麼是URL？
URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱爲網頁地址，是因特網上標準的資源的地址。
URL舉例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
URL地址由4部分組成
第1部分：爲協議：http://、ftp://等
第2部分：爲站點地址：能夠是域名或IP地址
第3部分：爲頁面在站點中的目錄：stu
第4部分：爲頁面名稱，例如 index.html
各部分之間用「/」符號隔開。
<a href="http://www.oldboyedu.com" target="_blank" >點我</a>
href屬性指定目標網頁地址。該地址能夠有幾種類型：
絕對URL - 指向另外一個站點（好比 href="http://www.jd.com）
相對URL - 指當前站點中確切的路徑（href="index.htm"）
錨URL - 指向頁面中的錨（href="#top"）
target：
_blank表示在新標籤頁中打開目標網頁
_self表示在當前標籤頁中打開目標網頁
列表
一、無序列表
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性：
disc（實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）
二、有序列表
<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>
type屬性：
1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
三、標題列表
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容1</dd>
<dd>內容2</dd>
</dl>
表格
表格是一個二維數據空間，一個表格由若干行組成，一個行又由若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的穆大叔顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：
<table>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>愛好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>槓娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>
屬性:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好經過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
form
先後端有數據交互的時候用form表單
form表單提交數據的幾個注意事項：
一、全部獲取用戶輸入的標籤都必須放在form表單裏面。
二、action控制着往哪提交。
三、input、select、textarea 都須要有name屬性
四、提交按鈕<input type='submit'>
表單屬性：
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啓）。 |
| enctype | 規定被提交數據的編碼（默認：url-encoded）。 |
| method | 規定在提交表單時所用的 HTTP 方法（默認：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（默認：_self）。 |
表單元素
基本概念：
HTML表單是HTML元素中較爲複雜的部分，表單每每和腳本、動態頁面、數據處理等功能相結合，所以它是製做動態網站很重要的內容。
表單通常用來收集用戶的輸入信息
表單工做原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。
from django.conf.urls import url from django.shortcuts import HttpResponse def upload(request): print("request.GET:", request.GET) print("request.POST:", request.POST) if request.FILES: filename = request.FILES["file"].name with open(filename, 'wb') as f: for chunk in request.FILES['file'].chunks(): f.write(chunk) return HttpResponse('上傳成功') return HttpResponse("收到了！") urlpatterns = [ url(r'^upload/', upload), ]
input
<input> 元素會根據不一樣的 type 屬性，變化爲多種形態。
| type屬性值 | 表現形式 | 對應代碼 |
|---|---|---|
| text | 單行輸入文本 | <input type=text" /> |
| password | 密碼輸入框 | <input type="password" /> |
| date | 日期輸入框 | <input type="date" /> |
| checkbox | 複選框 | <input type="checkbox" checked="checked" /> |
| radio | 單選框 | <input type="radio" /> |
| submit | 提交按鈕 | <input type="submit" value="提交" /> |
| reset | 重置按鈕 | <input type="reset" value="重置" /> |
| button | 普通按鈕 | <input type="button" value="普通按鈕" /> |
| hidden | 隱藏輸入框 | <input type="hidden" /> |
| file | 文本選擇框 | <input type="file" /> |
屬性說明：
name：表單提交時的「鍵」，注意和id的區別。
value：表單提交時對應項的值。
type=「button」，「reset」，「submit」時，爲按鈕上顯示的文本內容。
type=「text」，「password」，「hidden」時，爲輸入框的初始值。
type=「checkbox」，「radio」，「file」，爲輸入相關聯的值。
checked：radio和checkbox默認被選中的項。
readonly：text和password設置只讀。
disabled：全部input均適用。
select標
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>form表單示例</title>
</head>
<body>
<!--<註冊示例>-->
<form action="">
<p>用戶名： <input name="name" type="text" value="小強">
<input name="name" type="text" placeholder="小強" disabled>
</p>
<!--disabled：表示不能修改，禁用-->
<!--placeholder：佔位符，能夠直接輸入-->
<!--正規寫法-->
<p>
<label for="i1">用戶名：</label>
<input id=i1 name="name" type="text" value="小強">
<input name="name" type="text" placeholder="小強" disabled>
</p>
<!--定義：<label>標籤爲input元素定義標註（標記）-->
<!--說明：-->
<!--一、label元素不會向用戶呈現任何特殊效果。-->
<!--二、<label>標籤的for屬性值應當與相關元素的id屬性值相同。-->
<p>密碼： <input name="password" type="password">
</p>
<!--password：表示隱藏輸入的內容。-->
<p>郵箱： <input name="email" type="email">
</p>
<!--email：表示要按照email的格式輸入，不然不能提交-->
<p>隱藏輸入框： <input type="hidden" value="hidden">
</p>
<p>性別： <input name="gender" type="radio" value="1"> 男 <input name="gender" type="radio" value="0"> 女 <input checked name="gender" type="radio" value="2"> 保密 </p>
<!--radio：表示只能選一個。-->
<!--checked：表示默認。-->
<p>性別2： <label for="r1">男</label>
<input name="gender" id="r1" type="radio" value="1">
<label>男 <input name="gender" type="radio" value="1">
</label>
<label for="r2">女</label>
<input name="gender" id="r2" type="radio" value="0">
<label for="r3">保密</label>
<input checked name="gender" id="r3" type="radio" value="2">
</p>
<p>愛好： <input checked name="hobby" type="checkbox" value="basketball">籃球 <input checked name="hobby" type="checkbox" value="football">足球 <input name="hobby" type="checkbox" value="doublecolorball">雙色球 </p>
<!--checkbox：表示能夠選多個。-->
<p>生日： <input name="birthday" type="date">
</p>
<!--data：日曆格式。-->
<select name="from1" id="s1">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="sc">四川</option>
</select>
<!--selected：默認選中該項。-->
<select name="from1" id="s11">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sc">四川</option>
</select>
<select name="from2" id="s2">
<optgroup label="北京">
<option value="cp">昌平</option>
<option value="cy">朝陽</option>
<option value="hd">海定</option>
<option value="ft">豐臺</option>
</optgroup>
<optgroup label="上海">
<option value="pdxq">浦東新區</option>
<option value="mhq">閔行區</option>
<option value="hpq">黃浦區</option>
</optgroup>
<optgroup label="四川">
<option value="pzh">攀枝花</option>
<option value="zg">自貢</option>
<option value="my">綿陽</option>
</optgroup>
</select>
<p>
<textarea name="info" id="t1" cols="30" rows="10"></textarea>
</p>
<!--textarea：多行文本。-->
<p>頭像： <input name="p1" type="file">
</p>
<!--file：表示上傳文件。-->
<input type="submit" value="點我提交">
<!--submit：提交-->
<input type="button" value="button">
<!--button：普通按鈕,多用JS給它綁定事件-->
<input type="reset" value="reset">
<!--reset：重置-->
</form>
</body>
</html>
textarea：多行文本。
屬性說明：
name：名稱
rows：行數
cols：列數
disabled：禁用
CSS介紹
CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。
每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。
CSS如何引入？
一、直接寫在標籤裏面 style=「樣式1；樣式2；」
二、在head中經過style標籤訂義。
三、把樣式單獨寫在css文件中，而後在html文件中經過link標籤導入。
CSS語法：
選擇器{樣式1；樣式2}
CSS查找標籤的方式（選擇器）
一、基本選擇器
一、標籤選擇器 適用於批量的、統1、默認的樣式
二、ID選擇器 適用於給特定標籤設置特定樣式
三、類選擇器 適用於給某一些標籤設置相同的樣式
二、通用選擇器
一、*
三、組合選擇器
一、後代選擇器
二、兒子選擇器
三、毗鄰選擇器
四、弟弟選擇器
四、屬性選擇器
一、[s9]
二、[s9="hao"]
五、分組和嵌套
一、div,p
二、#d1>p
樣式文件優先級
一、內聯樣式（直接在標籤裏面寫style）優先級最高
二、選擇器都同樣的狀況下，誰靠近標籤誰就生效
三、選擇器不一樣時，計算權重來判斷
CSS引入
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>引入示例</title> <link rel="stylesheet" href="index.css"> </head> <body> <p id="p1">海燕</p> <p id="p2">這是個黑色的海燕</p> <p class="c1">這是個黑色的海燕</p> <p class="c2">這是個黑色的海燕</p> <p class="c3">這是個黑色的海燕</p> <p class="c4">這是個黑色的海燕</p> <h1>海燕</h1> </body> </html>
/*解釋性的信息*/
/*全局通用的信息*/
/*導航條的樣式*/
/*商品列表樣式*/ p{ color:red; font-size: 28px;
}
/*標籤選擇器*/ h1{ color:green;
}
/*ID選擇器*/ #p2{ color: blue;
}
/*類選擇器*/ .c1,.c2{ color:yellow;
}
組合選擇器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>組合選擇器示例</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div id="d1">
<p>我是嵌套在div裏的p標籤</p>
<span>我是嵌套在div裏的span標籤</span>
<div>
<p>我是嵌套在div裏的div裏的p標籤</p>
<span>我是嵌套在div裏的div裏的span標籤</span>
</div>
</div>
<p>000</p>
<div>111</div>
<p>222</p>
<p>333</p>
</body>
</html>
/*組合選擇器示例的CSS文件*/
/*後代選擇器*/
/*#d1 p{*/
/*color:red;*/
/*}*/
/*!*兒子選擇器*!*/
/*#d1>div {*/
/*color: blue;*/
/*}*/
/*毗鄰選擇器*/
/*div+p{*/
/*color: yellow;*/
/*}*/
/*弟弟選擇器*/ div~p{ color:red;
}
屬性選擇器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>屬性選擇器示例</title>
<link rel="stylesheet" href="index3.css">
</head>
<body>
<p s9="好">我是一個p標籤</p>
<p s9="good">我也是一個p標籤</p>
<p>我仍是一個p標籤</p>
</body>
</html>
/*屬性選擇器相關樣式*/ [s9]{ color: red;
} [s9="good"]{ color: blue;
}
分組和嵌套
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分組和嵌套示例</title>
<link rel="stylesheet" href="index4.css">
<link rel="stylesheet" href="index44.css">
</head>
<body>
<div id="p1">我是一個div標籤</div>
<p id="p2">我是一個p標籤</p>
</body>
</html>
/*分組和嵌套示例*/
/*當樣式有重複的時候*/
/*推薦分行寫選擇器,可是要注意必定要加逗號*/ #p1, p{ color: red;
}
/*嵌套使用選擇器*/
/*#d1+p{*/
/*color: blue;*/
/*}*/
/*權重就是2*/
/*div+p{*/
/*color:red;*/
/*}*/
/*權重101*/
/*p1+p{*/
/*color:red;*/
/*}*/
/*分組和嵌套示例*/
/*當樣式有重複的時候*/
/*推薦分行寫選擇器,可是要注意必定要加逗號*/ #p1, p { color: blue;
}
/*嵌套使用選擇器*/
/*#d1+p {*/
/*color: blue;*/
/*}*/
選擇器的優先級
CSS繼承
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個body定義了的字體顏色值也會應用到段落的文本中。
body { color: red;
}
此時頁面上全部的標籤都會繼承body的字體顏色。然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0.
咱們只要給對應的標籤設置字體顏色就能夠覆蓋掉它繼承的樣式。
p { color: green;
}
此外，繼承是CSS重要的一部分，咱們甚至不用去考慮它爲何可以這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border，margin，padding，background等。
選擇器的優先級
內聯樣式的權重爲1000
id選擇器的權重爲100
類選擇器的權重爲10
元素選擇器的權重爲1
權重計算永不進位
除此以外還能夠經過添加 !important 方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用 !important 會使樣式文件混亂不易維護。
萬不得已可使用 !important
CSS屬性
1 一、內容回顧 2 一、昨日內容 3 一、form表單（通常method="post"） 4 一、input系列 5 type 6 一、text 7 二、password 8 三、radio 9 四、checkbox 10 五、date（datetime） 11 六、submit 12 七、button 13 八、reset 14 九、hidden 15 十、file(enctype="multipart/from-data") 16 二、select 17 一、select>option（分組下的下拉框 select>optgroup>option） 18 三、textarea 19 二、form表單提交 三要素： 20 一、input、select、textarea要有一個name屬性 21 二、提交按鈕必需要是type="submit" 22 三、form不是from；獲取用戶輸入的標籤都要放在form標籤裏面（僅限於form提交數據） 23 三、CSS選擇器 24 一、基本選擇器 25 一、標籤選擇器 26 二、ID選擇器 27 三、類選擇器（class="c1,c2,...."） 28 二、通用選擇器（*） 29 三、組合選擇器 30 一、後代選擇器（空格） 31 二、兒子選擇器（>） 32 三、毗鄰選擇器（div+p） 33 四、弟弟選擇器（~） 34 四、屬性選擇器 35 一、[s9] 36 二、[s9="hao"] 37 三、其餘不經常使用的（有印象便可） 38 五、分組和嵌套 39 一、分組（用逗號分隔的多個選擇器條件） 40 二、嵌套（選擇器均可以組合起來用） 41 六、選擇器的優先級 42 一、越靠近標籤的優先級越高（就近原則） 43 二、權重的計算 44 一、內聯樣式1000 45 二、ID選擇器100 46 三、類選擇器10 47 四、元素選擇器1 48 div#d1(101)/div.c1(11)/dic.c1 49 二、以前內容複習 50 一、Python語法基礎 51 二、數據類型和內置方法 52 三、函數 53 一、參數 54 二、裝飾器 55 三、迭代器和生成器 56 四、匿名函數 57 五、遞歸 58 六、內置函數 59 七、三元運算和列表推導式 60 四、文件操做 61 五、面向對象（CRM項目會有大量的應用） 62 六、經常使用的模塊和包 63 七、網絡編程和併發編程（優先級低） 64 八、數據庫（建庫、建表、基本查詢） 65 二、CSS選擇器補充 66 67 三、CSS屬性 68 一、文學屬性 69 一、font-family 70 二、font-size 71 三、font-weight 72 四、color 73 一、rgb（255,255,255） 74 二、#f00 75 三、red 76 四、rgba() 77 二、文本屬性 78 一、text-align 79 二、text-decoration 80 三、背景屬性 81 一、background-color 82 二、background-image 83 四、邊框屬性 84 一、border 85 二、border-radius --> 變圓 86 五、display屬性 87 一、inline 88 二、block 89 三、inline-block 90 四、none（隱藏） 91 六、CSS盒子類型（從外到內） 92 一、margin：邊框以外的距離（多用來調整標籤和標籤之間的距離） 93 二、border邊框 94 三、padding：內容區和邊框之間的距離（內填充/內邊距） 95 四、condent：內容 96 七、浮動 97 div配合float來作頁面的佈局 98 任何元素浮動以後都會變成塊元素 99 100 float： 101 一、left 102 二、right 103 三、none 104 八、清除浮動（清除的是浮動帶來的負面效果-->父標籤塌陷（撐不起來）） 105 一、clear 106 一、left 107 二、right 108 三、both 109 最常和僞元素結合起來應用： 110 .clearfix:after{ 111 content:""; 112 display:block; 113 clear:both 114 } 115 九、定位 116 一、static --> 默認的 117 二、relative --> 相對定位（相對於原來的位置來講） 118 三、absolute --> 絕對定位（相對於最近的一個被定位過的祖宗標籤）（徹底脫離文檔流） 119 四、fixed --> 固定在某個位置（返回頂部按鈕） 120 left right top bottom 121 十、z-index（明天講） 122 四、頁面練習 123 博客頁面 124 一、先排HTML文檔結構，同時定義好類名（類名最好有意義） 125 二、從左往右，從上到下依次寫樣式
不怎麼經常使用的屬性選擇器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>屬性選擇器補充示例</title> <style> /*找到全部title屬性以hao開頭的元素*/ [s9^="hao"] { color: red; } /*找到全部title屬性以d結尾的元素*/ [s9$="d"] { color: red; } /*找到全部title屬性中包含ao的元素*/ [s9*="ao"] { color: red; } /*找到全部title屬性中（有多個值或以空格分割）中有一個值爲hao的元素*/ [s9~="hao"] { color: red; } </style> </head> <body> <p s9="hao">我是一個p標籤</p> <p s9="haomad">我是一個p標籤</p> <p s9="hao mad">我是一個p標籤</p> <p s9="goog">我也是一個p標籤</p> <p class="c1 c2">我是仍是一個p標籤</p> </body> </html>
僞類選擇器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>僞類選擇器示例</title> <style> /*連接沒有被點擊過*/ a:link { color: yellow; } /*連接被點擊過*/ a:visited { color:red; } /*鼠標移上去*/ a:hover { color: blue; } /*被選定*/ a:active { color: black; } #d1 { color: aqua; } #d1:hover { color: antiquewhite; } /*input獲取光標時*/ input:focus { outline: 0; background-color:green; } </style> </head> <body> <a href="http://www.sogo.com">搜狗</a> <a href="http://www.sogo.com">搜狗</a> <div id="d1">我是div標籤</div> <input type="text"> </body> </html>
僞元素選擇器
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>僞元素選擇器示例</title> <style> /*經常使用的給首字母設置特殊樣式*/ p:first-letter{ font-size: 50px; color: red; } /*在每一個c1類元素以前插入內容*/ .c1:before { content: "*"; color: red; } /*在每一個c1類元素以後插入內容*/ .c1:after { content: "[$$$]"; color: #ffff77; } /*改變p標籤內容的字體大小*/ p { font-size: 30px; } </style> </head> <body> <p>在蒼茫的大海上，狂風捲積着烏雲。</p> <p>在蒼茫的大海上，狂風捲積着烏雲。</p> <p class="c1">在蒼茫的大海上</p> <p class="c1">在蒼茫的大海上</p> <p class="c1">在蒼茫的大海上</p> </body> </html>
字體屬性測試
font-weight用來設置字體的字重（粗細）
文字對齊：text-align屬性規定元素中的文本的水平對齊方式。
值 描述
left 左邊對齊，默認值
right 右對齊
center 居中對齊
justify 兩端對齊
文字裝飾：text-decoration屬性用來給文字添加特殊效果
值 描述
none 默認，定義標準的文本
underline 定義文本下的一條線
overline 定義文本上的一條線
line-thourgh 定義穿過文本的一條線
inherit 繼承父元素的text-decoration屬性的值
/*我這個文件是幹啥的*/<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字體屬性測試</title> <link rel="stylesheet" href="text.css"> </head> <body> <h1>海燕</h1> <p>你可長點心吧</p> <p class="c1">默認的</p> <p class="c2">100 c1</p> <p class="c3">900 c2</p> <p class="c4"> 他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，穿着黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀着上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。 </p> <a href="http://www.sogo.com">sogo</a> </body> </html>
/*2018-11-10*/ /*全局的樣式*/ * { font-family: ".PingFang SC","微軟雅黑","Microsoft YaHei UI","Arial"; font-size: 14px; } /*字體的粗細*/ .c2 { font-weight: 100; } .c3 { font-weight: 900; /*color: rgb(0,255,0);*/ /*顏色加透明度*/ color:rgba(255,0,0,0.5); } /*文字對齊方式*/ .c4 { /*text-align: center;*/ /*text-align: right;*/ /*text-align: left;*/ text-align: justify; /*加下劃線*/ text-decoration: underline; text-indent: 28px; } /*去掉a標籤的下劃線*/ a { text-decoration: none; }
背景相關屬性
/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
背景重複
repeat(默認):背景圖片平鋪排滿整個網頁
repeat-x：背景圖片只在水平方向上平鋪
repeat-y：背景圖片只在垂直方向上平鋪
no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背景相關屬性示例</title> <style> .c1 { width: 600px; height: 600px; border: 1px solid black; /*background-image: url("頭像.jpg");*/ /*background-repeat: repeat-x;*/ /*background-repeat: repeat-y;*/ /*background-position: center;*/ /*background-position: 50% 50%;*/ /*background-position: 200px 200px;*/ background: url("頭像.jpg") no-repeat 50% 50%; } </style> </head> <body> <div class="c1">我是div</div> </body> </html>
背景不動效果示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背景不動效果示例</title> <style> .c1 { height: 500px; background: silver; } .c2 { height: 500px; background: url("p1.jpg"); background-attachment: fixed;/*把背景圖固定*/ /*background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center;*/ /*background-attachment: fixed; !*把背景圖固定*!*/ } .c3 { height: 500px; background-color: greenyellow; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
邊框
邊框樣式
值 描述
none 無邊框
detted 點狀虛線邊框
dashed 矩形虛線邊框
solid 實線邊框
將border-radius設置爲長或高的一半便可獲得一個圓形
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>邊框示例</title> <style> div { height: 200px; width: 300px; background-color: red; border-width: 10px; border-color: green; border-style: solid; /*簡寫*/ /*border: 10px solid green;*/ } </style> </head> <body> <div></div> </body> </html>
display屬性
值 意義
display:"none" HTML文檔中元素存在，但在瀏覽器中不顯示。通常用於配合JavaScript代碼使用
display:"block" 默認佔滿整個頁面寬度，若是設定了指定寬度，則會用margin填充剩下的部分
display:"inline" 按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和
float屬性都不會有什麼影響
dispaly:"inline-block" 使元素同時具備行內元素和塊級元素的特色
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>display屬性</title> <style> .cl { background-color: red; /*display: none;*/ visibility: hidden; height: 100px; } .c2 { background-color: green; /*display: block;*/ width: 1000px; } ul { list-style-type: none; } li { display: inline; /*padding: 20px;*/ /*border-right: 1px solid green;*/ } li.last { border-right: none; } li>a { border-right: 1px solid red; padding: 0 15px; } </style> </head> <body> <div class="c1">div</div> <span class="c2">span</span> <span class="c3">span</span> <ul> <li><a href="">玉米商城</a></li> <li><a href="">電腦</a></li> <li><a href="">手機</a></li> <li class="last"><a href="">爆米花</a></li> </ul> </body> </html>
盒子模型
margin：用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding：用於控制內容與邊框之間的距離。
border（邊框）：圍繞在內邊框與內容外的邊框。
content（內容）：盒子的內容，顯示文本和圖像。
順序：
提供一個，用於四邊
提供兩個，第一個用於上下，第二個用於左右
提供三個，第一個用於上，第二個用於左右，第三個用於下
提供四個，上右下左（順時針）
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>盒子模型示例</title> <style> * { margin: 0; padding: 0; } .c1 { height: 200px; width: 300px; border: 5px solid green; /*margin-top: 5px;*/ /*margin-right: 10px;*/ /*margin-bottom: 15px;*/ /*margin-left: 20px;*/ /*上右下左*/ /*margin: 5px 10px 15px 20px;*/ /*上下 左右*/ /*margin: 20px 30px;*/ /*padding: 20px 30px;*/ padding: 10px 20px 30px; margin: 0 auto; margin-bottom: 50px; } .c2 { height: 100px; width: 100%; background-color: red; margin-top: 100px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
float頁面佈局
浮動元素會生成一個塊級框，而不論它自己是何種元素。
關於浮動的兩個特色：
浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float頁面佈局示例</title> <style> * { height: 0; padding: 0; } .c1 { height: 100px; width: 20%; background-color: red; float:left } .c2 { height: 100px; width: 80%; background-color: green; float: left; } a { float:left; width:100px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <a href="">我是a標籤</a> </body> </html>
清除浮動
clear屬性規定元素的哪一側不容許其餘浮動元素
值 描述
left 在左側不容許浮動元素
right 在右側不容許浮動模塊
both 在左右兩側均不容許浮動元素
none 默認值。容許浮動元素出如今兩側
inherit 規定應該從父元素繼承clear屬性的值
注意：clear屬性只會對自身起做用，而不會影響其它元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>清除浮動示例</title> <style> #d1 { border:1px solid black; } .c1, .c2 { float: left; height: 100px; width: 100px; } .c3 { /*height:100px;*/ } #d1:after { content:""; clear:left; display:block; } </style> </head> <body> <div id="d1"> <div class="c1">c1</div> <div class="c2">c2</div> <!--<div class="c3"></div>--> </div> </body> </html>
overflow溢出屬性
值 描述
visible 默認值。內容不會被修剪，會呈如今元素框以外
hidden 內容會被修剪，並且其它內容是不可見的
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容
inherit 規定應該從父元素繼承overflow屬性的值
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>overflow示例</title> <style> .c1 { width: 120px; height: 120px; border:1px solid black; /*overflow:hidden;*/ overflow: auto; } .header-img { width: 120px; height: 120px; border: 2px solid red; border-radius: 100%; overflow:hidden; } img { max-width:100%; } </style> </head> <body> <div class="c1"> 他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」 我看那邊月臺的柵欄外有幾個賣東西的等着顧客。 走到那邊月臺，須穿過鐵道，須跳下去又爬上去。 父親是一個胖子，走過去天然要費事些。 我原本要去的，他不願，只好讓他去。 我看見他戴着黑布小帽，穿着黑布大馬褂，深青布棉袍， 蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道， 要爬上那邊月臺，就不容易了。 他用兩手攀着上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。 </div> <div class="header-img"> <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""> </div> </body> </html>
float補充
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>float下午版</title> <style> #d1 { border:1px solid black; } .c1 { height: 50px; width: 50px; background-color: blue; border:1px solid red; float: right; } .c3 { height: 200px; background-color: red; } /*清除浮動的反作用*/ /*#d1:after {*/ /*content:"";*/ /*clear: both;*/ /*display: block;*/ /*}*/ .clearfix:after { content:""; clear: both; display: block; } </style> </head> <body> <div id="d1" class="clearfix"> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> <div class="c1"></div> </div> <div class="c3">我是正常的內容塊</div> </body> </html>
定位（position）
stiatic
默認值，無定位，不能當作絕對定位的參照物，並且設置標籤對象的left、top等值是不起做用的。
relative（相對定位）
相對定位是相對於該元素在文檔流中的原始位置，即以本身的原始位置爲參照物。即便設定了元素的相對定位1偏移值，元素仍是佔着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。
absolute（絕對定位）
定義：設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的以定位祖先元素定位，若是元素沒有以定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。元素原先在正常的文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。
另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊經過z-index屬性定義。
fixed（固定）
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性 定義。 注意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>定位示例</title> <style> * { margin: 0; padding: 0; } .c1, .c2, .c3, .c4, .c4-father{ height: 150px; width: 150px; } .c1 { background-color: red; } .c2 { background-color: green; position: relative; left: 400px; top: 150px; } .c3 { background-color: blue; } .c4 { background-color: deeppink; position: absolute; top: 150px; left: 400px; } .c4-father { background-color: grey; position: relative; left: 150px; } .fixed-test { position: fixed; right: 20px; bottom: 20px; background-color: grey; } </style> </head> <body> <div class="c1">c1</div> <div class="c2">c2</div> <!--<div>多噠噠噠噠噠噠多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</div>--> <div class="c3">c3</div> <div class="c4-father"> <div class="c4"></div> </div> <div class="fixed-test">返回頂部</div> </body> </html>
課上筆記
一、內容回顧
一、僞類和僞元素
一、link
二、visited
三、hover（重要）
四、active
五、focus（input標籤獲取光標時）
二、僞元素
一、first-letter
二、before（重要，在內部前面添加）
三、after（重要，在內部後面添加）
二、CSS屬性
一、字體
一、font-family
二、font-size
三、font-weight
二、文本屬性
一、text-align 對齊（重要）
二、text-decoration 裝飾（去除a標籤的下劃線（text-decoration:none））
三、text-indent 首行縮進
三、背景屬性
一、background-color 背景顏色
二、background-image 背景圖片（九宮格葫蘆娃）url() no-repeat 50% 50%
四、color
一、red
二、#FFOOOO
三、rgb(255,0,0) --> rgba(155,0,0,0.5)
五、邊框屬性 border
一、border-width（邊框寬度）
二、border-style（邊框樣式）
三、border-color（邊框顏色）
簡寫：border：1px solid red；
六、CSS盒子模型
一、content（內容）
二、padding（內填充）調整內容和邊框之間的距離時使用這個屬性
三、border（邊框）
四、margin（外邊框）多用於調整標籤之間的距離（注意兩個挨着的標籤margin取最大值）
注意：要習慣看瀏覽器console窗口的那個盒子模型
七、display（標籤的展示形式）
一、inline
二、block 菜單裏面的a標籤能夠設置爲block
三、inline-block
四、none（不讓標籤顯示，不佔位）
八、float（浮動）
一、多用於實現佈局效果
一、頂部的導航條
二、頁面左右分欄（博客頁面：左邊20%，右邊80%）
二、float
一、任何標籤均可以浮動，浮動以後就會變成塊級，a標籤float以後就能夠設置寬和高了
三、float取值
一、left
二、right
三、none
九、clear：清除浮動--> 清除浮動的反作用（內容飛出，父標籤撐不起來）
一、結合僞元素來實現
.clearfix:after {
content:"",
display:"block",
clear:both;
}
二、clear取值
一、left
二、right
三、both
十、overflow
一、標籤的內容放不下（溢出）
二、取值：
一、hidden --> 隱藏
二、scroll --> 出現滾動條
三、auto
四、scroll-x
五、scroll-y
例子：
圓形頭像的例子
一、overflow:hidden
二、border-radius:50% （圓角）
十一、定位position
一、static（默認）
二、relative（相對定位-->相對於原來的位置）
三、absolute（絕對定位-->相對於定位過的前輩標籤）
四、fixed（固定-->返回頂部按鈕）
補充：
脫離文檔流的三種方式
float
absolute
fixed
十二、opacity（不透明度）
一、取值0-1
二、和rgba()的區別：
一、opacity改變元素、字元素透明度效果
二、rgba()只改變背景顏色的透明度效果
1三、z-index
一、數值越大，也靠近你
二、只能做用於定位過的元素
三、自定義的模態框示例
二、CSS補充
三、做業（小米商城）
display補充
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>display補充示例</title> <style> ul>li { /*padding: 15px;*/ border-bottom: 1px solid grey; } li>a { display: block; height: 45px; } </style> </head> <body> <ul> <li><a href="">玉米商城</a></li> <li><a href="">大米</a></li> <li><a href="">小米</a></li> </ul> </body> </html>
脫離文檔流的狀況
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>脫離文檔流的狀況</title> <style> * { margin: 0; padding: 0; } .c1 { height: 100px; width: 100px; background-color: red; } .c2 { height: 150px; width: 150px; background-color: green; /*float: right;*/ /*position: relative;*/ /*left: 400px;*/ /*position: absolute;*/ /*left: 400px;*/ position: fixed; right: 100px; top: 100px; } .c3 { height: 200px; width: 200px; background-color: blue; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
透明度
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>透明度示例</title> <style> .c1, .c2 { height: 400px; width: 400px; color: red; } .c1 { background-color: black ; opacity: 0.5; } .c2 { background-color: rgba(0,0,0,0.2); } </style> </head> <body> <div class="c1">我是有c1類的div標籤</div> <div class="c2">我是有c2類的div標籤</div> </body> </html>
z-index
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>z-index示例</title> <style> * { margin:0; padding: 0; } .c1 { height: 150px; width: 150px; background-color: red; position: relative; z-index: 2; } .c2 { height: 200px; width: 200px; background-color: green; position: relative; top: -150px; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
青春版模態框
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>青春版模態框示例</title> <style> .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 999; } .modal { width: 600px; height: 400px; background-color: white; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -300px; z-index: 1000; } </style> </head> <body> <div class="cover"></div> <div class="modal"></div> </body> </html>
小米商城導航條
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>小米商城導航條示例</title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } /*去除a標籤的下劃線*/ /*ul a{*/ /*text-decoration: none;*/ } .nav-left li { float: left; padding-right: 20px; } .nav-right { float:right; } .nav { background-color: black; padding: 15px 0; } .clearfix:after { clear:both; content: ""; display:block; } .s9 { width: 80%; margin:0 auto; } </style> </head> <body> <div class="nav"> <div class="s9 clearfix"> <div class="nav-left"> <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> <li><a href="">豆漿汁</a></li> <li><a href="">牛奶</a></li> </ul> </div> <div class="nav-right"> <a href="">登陸</a> <a href="">註冊</a> <a href="">購物車</a> </div> </div> <!--<div style="clear:both"></div>--> </div> </body> </html>
清除浮動
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style> .c1 { height: 50px; width: 50px; float: left; border: 1px solid black; } .c2 { clear:left; } .c10 { height: 50px; width: 50px; float: right; border:1px solid red; } .c20 { clear:right; } .c3 { height: 200px; width: 200px; background-color: green; float:right; } </style> </head> <body> <div class="c1"></div> <div class="c1"></div> <div class="c1 c2"></div> <div class="c1"></div> <div class="c1"></div> <!--<div class="c3"></div>--> <div class="c10"></div> <div class="c10"></div> <div class="c10 c20"></div> <div class="c10"></div> <div class="c10"></div> </body> </html>
- 1. 前端基礎知識---HTML
- 2. 前端基礎知識-html
- 3. 前端基礎知識-css
- 4. 前端基礎知識---CSS
- 5. Python學習-基礎篇11 前端知識之HTML內容
- 6. 前端知識之HTML內容
- 7. [HTML & CSS] HTML和CSS基礎知識
- 8. html-前端內容初識
- 9. HTML+CSS+JS基礎知識
- 10. 【HTML】CSS基礎知識
- 更多相關文章...
- • Eclipse 內容輔助 - Eclipse 教程
- • XSD 混合內容 - XML Schema 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端基礎知識---HTML
- 2. 前端基礎知識-html
- 3. 前端基礎知識-css
- 4. 前端基礎知識---CSS
- 5. Python學習-基礎篇11 前端知識之HTML內容
- 6. 前端知識之HTML內容
- 7. [HTML & CSS] HTML和CSS基礎知識
- 8. html-前端內容初識
- 9. HTML+CSS+JS基礎知識
- 10. 【HTML】CSS基礎知識