HTML標籤與CSS樣式
阿新 • • 發佈：2018-11-09
文字標籤
h1-h6:標題
p:文欄位落標籤
b/strong:加粗
u:下劃線
s:劃去線
換行標籤: br-----(第一個沒有成對出現的標籤)
水平分隔符標籤: hr-----(第一個沒有成對出現的標籤)
預格式化文字標籤(保留文字的原有格式): pre標籤
上標和下標: sup， sub
塊引用標籤: blockquote
普通的文字: span — 行內標籤
普通文字的標籤:div------
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 style="color: green">標題1</h1> <p>hello</p> <hr> <p>world</p> hello <br> <br><br>world <h1 style="color: blueviolet">標題2</h1> <pre> 擊壤歌 先秦：佚名 日出而作，日入而息。 鑿井而飲，耕田而食。 帝力於我何有哉！ </pre> <span>hello</span><span>world</span> <div>hello</div><div>world</div> <blockquote style="color: blueviolet"> 擊壤歌 先秦：佚名 日出而作，日入而息。 鑿井而飲，耕田而食。 帝力於我何有哉！ </blockquote> x<sup>2</sup>+2x+3 = 5 <br/> 這個方程的解： x<sub>1</sub>=3 x<sub>2</sub>=5 </body> </html>
超連結標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--a標籤-->
<!--1. 跳轉到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一個瀏覽器視窗並開啟-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>
<!--2. 跳轉到當前頁面的指定位置（錨點）-->
<a href="#C1">第一個標題 </a>
<a href="#C2">第2個標題 </a>
<a href="#C3">第3個標題 </a>
<a href="#C4">第4個標題 </a>
<h1><a name="C1">第一個標題</a></h1>
2018 年，AI 行業持續走向技術落地和深入商業化的一年。
回顧上半年，科技巨頭們在橫向建設自己的 AI 技術平臺時，也更強調 AI 與每一垂直行業的深度融合，而 AI 創業公司除了頻繁重新整理行業高額融資外，也立足於自身優勢，在應用場景中步步為營、累積了不少客戶資源。當然，在熱烈的歡呼聲中，AI 泡沫論調依然在不時迴響，但毋庸置疑的是，那些真正利用 AI 技術來創造出商業價值的企業自然會沉澱下來。
優秀的商業落地產品/技術方案是判斷一個企業商業價值的重要依據。基於此，AI科技大本營（ID:rgznai100）希望找到在汽車、金融、教育、醫療、安防、零售、家居、文娛、工業等 9 大行業的最佳 AI 應用案例 TOP 20，記錄 AI 時代影響人類發展的變革性產品/解決方案。同時我們有理由相信，挖掘出的那些優秀先行者還會給不同 AI 行業領域帶來啟迪，進而推動整個 AI 行業的發展程序。
好產品/技術方案值得記錄，而不是被時代泡沫淹沒。
徵集內容詳情：
案例範圍
徵集 AI 技術在汽車、金融、零售、醫療、教育、安防、家居、文娛、工業等 9 大行業的應用案例（具體內容示例見下文）。
最佳案例評選標準
技術性、創新性、前瞻性
案例分享者特別獎勵
1.50+ 以上媒體平臺的聯合宣傳，各行業上榜的最佳應用案例還可能獲得 AI科技大本營（ID:rgznai100）的專訪報道，在極大提升企業技術品牌影響力的同時，有助於企業從 CSDN 社群吸納優秀的技術人才；
2.選出 20+ 最佳應用案例納入由 CSDN 釋出的《2018-2019 中國人工智慧產業路線圖》，以及由 CSDN 頒發的“2018 中國人工智慧最佳應用案例獎”；
3.入選 2018 最佳人工智慧應用案例 TOP 20 的企業，將優先推薦加入由 CSDN 和 AICAMP 舉辦的 AI 開發者大會智慧應用分論壇做應用案例技術分享，並享有全程會議通道；
4.參與 2018 最佳人工智慧應用案例 TOP 20 的企業將優先邀請 AI科技大本營線公開課的講座或線上下技術沙龍上做分享。
活動時間
2018 年 9-10 月：案例徵集階段
2018 年 11 月：TOP 20 案例公佈及頒獎
聯絡人郵箱： 
圖片標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 插入影象並設定大小
src指定圖片的位置， 可以是url地址， 也可以是本地的圖片;
alt: 如果圖片不能正常載入， 則顯示alt裡面的文字;
-->
<!--<img src="https://csdnimg.cn/cdn/content-toolbar/zq-logo.jpg" alt="這是csdn的logo圖片">-->
<!--<img src="img01.jpg" alt="img01.jpg">-->
<!--<img src="img01.jpg" alt="img01.jpg" width="460px" height="96px">-->
<!--2. 設定影象的對齊方式(html中已棄用， 通過css樣式實現功能)-->
AI會議即將開始: <img align="top" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI會議即將開始: <img align="middle" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
AI會議即將開始: <img align="bottom" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<!--3. 將影象浮動到文字的左側和右側-->
<br/>
<br/>
<br/>
<br/>
<br/>
AI會議即將開始: <img align="left" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
AI會議即將開始: <img align="right" src="img01.jpg" alt="img01.jpg" width="460px" height="96px">
<!--4. 影象連結 a標籤和img標籤-->
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="http://www.westos.org"> 西部開源技術中心</a>
<a href="http://www.csdn.net"> <img src="img01.jpg"></a>
</body>
</html>
序列化標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1. 無序標籤之ul和li-->
<h2>無序標籤</h2>
<!--去掉ul裡面的所有li標籤裡面的樣式-->
<!--案例1： 實現水平導航欄
list-style-type: none ---- 去掉圓點
display: inline-block ---- 變為行內元素， 並且可以設定高度和寬度
width: -----可以使用300px表示， 也可以用百分比來表示； 20%
-->
<ul style="list-style-type: none">
<li style="display: inline-block; width: 20%; background: azure;">
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li style="display: inline-block; width: 20%; background: azure;">CSS</li>
<li style="display: inline-block; width:20%; background: azure;">JS</li>
<li style="display: inline-block; width: 20%; background: azure;">python</li>
</ul>
<!--案例2： 實現豎直導航欄-->
<ul style="list-style-type: none">
<li style="display: block; width: 20%; background: azure;"></li>
<li style="display: block; width: 20%; background: azure;">CSS</li>
<li style="display: block; width:20%; background: azure;">JS</li>
<li style="display: block; width: 20%; background: azure;">python</li>
</ul>
<!--2. 有序標籤之ol和li-->
<!--type可以指定有序列表符號的型別
text-decoration: none; ---去掉原有標籤的文字裝飾
color: black： 設定字型顏色為黑色
-->
<ol type="A">
<li>
<a href="http://www.baidu.com" style="text-decoration: none; color: black">
html </a>
</li>
<li><a href="#"> CSS </a></li>
<li><a href="#"> JS </a></li>
<li><a href="#"> Python </a></li>
</ol>
<!--3. 巢狀標籤之dl, dt和dd-->
<dl>
<dt>HTML</dt>
<dd>li</dd>
<dd>span</dd>
<dd>div</dd>
<dd>hr</dd>
<dd>sub</dd>
<dt>CSS</dt>
<dd>text-decoration</dd>
<dd>color</dd>
</dl>
</body>
</html>
表格標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
1. table代表一個表格
2. caption
3. td:
4. tr: row
5. cellpadding="3" -----設定表格的內邊距
6. cellspacing="5" ----設定表格的外邊距
-->
<table style="width: 80%;" border="1px" cellpadding="5px" cellspacing="0px">
<caption>表格的標題</caption>
<tr style="text-align: center">
<!--第一行是表格的表頭， 讓自動加粗-->
<th>主機名</th>
<th>IP地址</th>
</tr>
<tr style="text-align: center">
<td>server1</td>
<td>172.25.254.250</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.250</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.250</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.250</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.250</td>
</tr>
</table>
<table style="width: 80%; text-align: center;" cellpadding="3" border="1px"
cellspacing="5">
<caption>課程表</caption>
<tr>
<!--tr:一行內容-->
<!--td: 一列內容-->
<th>週一</th>
<th>周2</th>
<th>周3</th>
<th>周4</th>
<th>周5</th>
</tr>
<tr>
<td>週一</td>
<td>周2</td>
<td>周3</td>
<td>周4</td>
<td>周5</td>
</tr>
<tr>
<td>週一</td>
<td>周2</td>
<td>周3</td>
<td>周4</td>
<td>周5</td>
</tr>
<tr>
<td>週一</td>
<td>周2</td>
<td>周3</td>
<td>周4</td>
<td>周5</td>
</tr>
</table>
</body>
</html>
合併列單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>主機名</td>
<!--<td>IP</td>-->
<!--<td>IP</td>-->
<!--<td>IP</td>-->
<td colspan="3">IP</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>server1</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
</table>
</body>
</html>
合併行單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>主機名</td>
<td>server1</td>
<td>server2</td>
<td>server3</td>
</tr>
<tr>
<td rowspan="3">IP</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
<tr>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
<td>172.25.254.2</td>
</tr>
</table>
</body>
</html>
表格巢狀標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>
<img src="img01.jpg">
</td>
<td>
<ul>
<li>html</li>
<li>html</li>
<li>html</li>
</ul>
</td>
</tr>
<tr>
<td>
<pre>
fkjrefre
trgtrhryt
</pre>
</td>
<td>
<strong>hdhefreg</strong>
</td>
</tr>
</table>
</body>
</html>
表單標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<!– 1. form表單標籤 –>-->
<!--<h1>個人資訊</h1>-->
<!--<form method="get">-->
<!--<!–文字域–>-->
<!--<span>使用者名稱: </span><input type="text"><br/>-->
<!--<!–密碼域–>-->
<!--<span>密碼:</span><input type="password">-->
<!--<br/>-->
<!--<!–文字域–>-->
<!--<span>個人簡介:</span><textarea>-->
<!--</textarea><br/>-->
<!--<!–提交檔案–>-->
<!--<span>個人簡歷：</span><input type="file"><br/>-->
<!--<!–日期–>-->
<!--<span>出生日期:</span><input type="date">-->
<!--<!–提交按鈕–>-->
<!--<input type="submit" value="登陸">-->
<!--<input type="reset" value="重置">-->
<!--</form>-->
<h2>詳細資訊</h2>
<!--單選按鈕-->
<span>性別:</span>
<!--name和value是為了將使用者選擇的資訊傳遞給伺服器， gender=1-->
<span style="font-size: small">男</span><input type="radio" name="gender" value="1">
<span style="font-size: small">女</span><input type="radio" name="gender" value="2">
<br/>
<!--多選按鈕-->
<span>你喜歡的書籍:</span>
<ul>
<li><input type="checkbox" name="java"><span>java</span></li>
<li><input type="checkbox" name="python1"><span>python1</span></li>
<li><input type="checkbox"><span>python2</span></li>
<li><input type="checkbox"><span>python3</span></li>
</ul>
<!--下拉列表-->
<select>
<option>--選擇省份--</option>
<option>陝西</option>
<option>山西</option>
<option>河南</option>
<option>河北</option>
</select>
<!--圍繞資料的標籤-->
<fieldset>
<legend>個人簡介</legend>
<h1>使用者登陸</h1>
<hr/>
使用者名稱: <input type="text"><br/>
<input type="submit" value="登陸">
</fieldset>
</body>
</html>
個人資訊表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 align="center">個人資訊</h1>
<table width="50%" border="1px" cellpadding="5" cellspacing="0"
style=" margin: 0 auto; background: snow">
<tr>
<td style="background: #c0ffff">姓名</td>
<td><input style="width: 95%; " type="text"></td>
<td>性別</td>
<td>
<select style="width: 95%">
<option>男</option>
<option>女</option>
</select>
</td>
</tr>
<tr>
<td>手機號碼</td>
<td><input style="width: 95%; " type="tel"></td>
<td>電子郵箱</td>
<td><input style="width: 95%; " type="email"></td>
</tr>
<tr>
<td>教育程度</td>
<td><input style="width: 95%; " type="text"></td>
<td>工作職位</td>
<td><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td>工作城市</td>
<td><input style="width: 95%; " type="text"></td>
<td>期望工資</td>
<td><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td>自我介紹</td>
<td colspan="3"><input type="text" style="width: 98%"></td>
</tr>
<tr>
<td>特長</td>
<td colspan="3"><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td>地址</td>
<td colspan="3"><input style="width: 95%; " type="text"></td>
</tr>
<tr>
<td colspan="4"><br/></td>
</tr>
<tr>
<td colspan="4" align="right">
<input type="submit" value="新增">
<input type="reset" value="關閉">
</td>
</tr>
</table>
</body>
</html>
CSS和div和span的理解
-
div相關的技術:
- div是一個html標籤, 一個塊級元素(單獨顯示一行), 單獨使用沒有任何意義, 必須結合CSS來使用, 主要用於頁面的佈局;
- span是一個html標籤, 一個內聯元素(顯示一行), 它單獨使用沒有任何意義, 必須結合css使用, 主要對括起來的內容進行樣式的修飾;
-
CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常儲存在樣式表中
把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在 CSS 檔案中
多個樣式定義可層疊為一 -
總結:
-
學習的行內標籤和 塊級元素分別有哪些?
行內標籤:span, strong, a, img, input, textarea
塊級元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td -
兩者的區別與特性；
1).塊級元素獨佔一行空間， 行內元素只佔據自身寬度的空間;
2).塊級元素是可以包含塊級元素和行內元素; 行內元素只能包含文字資訊和行內元素;
3). 塊級元素可以設定寬和高， 行內元素設定的寬和高失效； -
如何讓塊級元素居中? 如何讓行內元素居中?
1); 塊級元素居中： margin: 0 auto
2> 行內元素居中: text-aligin:center
-
編寫CSS樣式_類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--CSS的標籤選擇器-->
<style>
div{
width:100px;
height: 100px;
border-radius:25px;
border: 1px solid blueviolet;
text-align: center;
margin: 0 auto;
padding-top: 20px;
text-shadow: 5px 5px 5px gray;
}
/*選擇div標籤中類名為important的進行設定下面的樣式*/
.important {
width: 20px;
height: 20px;
font-size: large;
}
</style>
</head>
<body>
<div class="important">1</div>
<div>2</div>
<div class="important">3</div>
<div>4</div>
<div class="important">5</div>
</body>
</html>
編寫CSS樣式_標籤選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--CSS的標籤選擇器-->
<style>
div{
width:100px;
height: 100px;
border-radius:25px;
border: 1px solid blueviolet;
text-align: center;
margin: 0 auto;
padding-top: 20px;
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<!--<span style=" border: 1px solid red; text-align:center">hello</span>-->
<!--<br/>-->
<!--<span style="width: 200px; height: 200px; border: 1px solid chartreuse">world</span>-->
<!--<div style="width: 100px; height: 100px; border-radius:25px;border: 1px solid blueviolet;-->
<!--box-shadow: 1px 1px 3px #888888;">hello</div>-->
<!--<div style="width: 100px; height: 100px; border: 1px solid aquamarine">world</div>-->
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--CSS的標籤選擇器-->
<style>
#westos{
width:100px;
height: 100px;
border-radius:25px;
border: 1px solid blueviolet;
text-align: center;
margin: 0 auto;
padding-top: 20px;
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<div>1</div>
<div id="westos">2</div>
<div>3</div>
</body>
</html>
CSS練習 導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:80%;
margin: 0 auto ;
padding: 0;
}
ul {
list-style-type: none
}
li {
display: inline-block;
width: 20%;
background: snow;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
</body>
</html>
CSS練習分頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
}
li {
text-decoration: none;
display: inline-block;
width: 10%;
padding-top: 5px;
padding-bottom: 5px;
background: snow;
color: #333333;
text-align: center;
font-size: large;
text-transform: capitalize;
}
li:hover {
background: green;
color: snow;
}
a:hover {
color: snow;
}
.active{
background: gray;
}
#pageintor{
width: 80%;
margin: 0 auto;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div id="pageintor">
<ul>
<li><a href="#">上一頁</a></li>
<li class="active"><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="#">...</a></li>
<li><a href="#">28</a></li>
<li><a href="#">下一頁</a></li>
</ul>
</div>
</body>
</html>
層級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li a {
color: red;
}
input[type='submit']{
background: palevioletred;
width: 200px;
}
</style>
</head>
<body>
<ol>
<li><a href="#" > 新聞1</a></li>
<li><a href="#"> 新聞2</a></li>
<li><a href="#"> 新聞3</a></li>
</ol>
<ul>
<li><a href="#"> 新聞1</a></li>
<li><a href="#"> 新聞2</a></li>
<li><a href="#"> 新聞3</a></li>
</ul>
<form>
姓名: <input type="text"><br/>
密碼: <input type="password"><br/>
<input type="submit" value="註冊">
</form>
</body>
</html>
CSS的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
background: red;
}
</style>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--引入方式:
1). 行內引入: <a style="行內引入的樣式">
2). 內部引入: 寫在head標籤裡面的style標籤裡面的樣式;
3). 外部引入: 將css樣式獨立成一個檔案， 通過<link rel="stylesheet" href="css/main.css">與當前html檔案連結在一起.
三種引入方式的優先順序: 就近原則
-->
<div>
<ul>
<li style="background: blue">
<a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
</li>
<li>CSS</li>
<li>JS</li>
<li>python</li>
</ul>
</div>
</body>
</html>
簡易版唯品會登陸介面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header {
width: 100%;
height: 100px;
/*border: 1px solid red;*/
}
.header-logo {
width: 125px;
height: 80px;
/*border: 1px solid blue;*/
text-align: center;
padding-top: 20px;
margin-left: 20%;
}
.header-logo a {
font-size: xx-large;
color: #f10180;
text-decoration: none;
}
.body {
background-image: url("vip_background.jpg");
width: 100%;
height: 1000px;
}
#login {
width: 360px;
height: 360px;
/*border: 1px solid red;*/
float: right;
margin-right: 60px;
margin-top: 60px;
background: white;
}
#login h3 {
text-align: center;
}
#login h3:hover {
color:#f10180; ;
}
hr{
color: lightgray;
}
.a{
width: 80%;
padding-top: 10px;
padding-left: 3px;
margin-top: 5px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="#">唯品會</a>
</div>
</div>
<div class="body">
<div id="login">
<h3>賬戶登陸</h3>
<hr/>
<form action="#" method="get">
<input class="a" type="text" placeholder="使用者名稱/郵箱/電話"><br/>
<input class="a" type="password" placeholder="密碼"><br/>
<input type="radio" name="choice" value="1"><span>記住使用者名稱</span><br/>
<input type="submit" value="登陸">
</form>
</div>
</div>
</body>
</html>
唯品會註冊介面 -簡易版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header {
width: 100%;
height: 100px;
/*border: 1px solid red;*/
}
.header-logo {
width: 125px;
height: 80px;
/*border: 1px solid blue;*/
text-align: center;
padding-top: 20px;
margin-left: 20%;
}
.header-logo a {
font-size: xx-large;
color: #f10180;
text-decoration: none;
}
.body {
background-image: url("vip_background.jpg");
width: 100%;
height: 1000px;
}
#login {
width: 360px;
height: 360px;
/*border: 1px solid red;*/
float: right;
margin-right: 60px;
margin-top: 60px;
background: white;
}
#login h3 {
text-align: left;
}
#login h3:hover {
color:#f10180; ;
}
hr{
color: lightgray;
}
.a{
width: 80%;
padding-top: 10px;
padding-left: 3px;
margin-top: 5px;
margin-left: 15px;
}
.b{
width: 40%;
padding-top: 10px;
padding-left: 3px;
margin-top: 5px;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="header">
<div class="header-logo">
<a href="#">唯品會</a>
</div>
</div>
<div class="body">
<div id="login">
<h3>會員註冊</h3>
<hr/>
<form action="#" method="get">
<input class="a" type="text" placeholder="請輸入手機號碼"><br/>
<input class="b" type="text" placeholder="請輸入驗證碼"> <input type="submit" value="獲取驗證碼"> <br/>
<input class="a" type="password" placeholder="密碼由6-20位字母,數字和符號組成"><br>
<input class="a" type="password" placeholder="請再次輸入上面的密碼"><br>
<input type="checkbox" name="choice" value="1"><span>我已閱讀並接受以下條款：《唯品會服務條款》《隱私條款》《唯品支付使用者服務協議》《唯品信用服務協議》</span><br/>
<input type="submit" value="立即註冊">
</form>
</div>
</div>
HTML CSS總結
html , css , js
1. html
1). 文字標籤: h1-h6, p, pre,b, i, u, s
2). 連結標籤: a
3). 圖片標籤: img
4). 表格標籤:
<table></table>
<caption> ---- 表格的標題
<th> ------ 表頭， 預設會加粗
<td> ----列
<tr> ---- 行
5). 表單標籤:
<form> ---- 表單標籤
<input> ---- 輸入框標籤
- 普通文字 --- type="text"
- 密碼文字 ---- type='password'
- 單選框
- 多選框
- 下拉列表
代表一個空格
2. css
- css的幾種選擇器(選擇給哪些內容新增樣式)
標籤選擇器:
div{
}
類選擇器:
- 如何定義這個選擇器? <span class="類名(一定是英文的)">
- 如何對定義好的選擇器設定樣式? .類名{ 設定字型 設定背景顏色}
id選擇器:
- <span id="id名(一定是英文的, 並且是唯一的)">
- #id名{}
層級選擇器:
- ul li a {
color: red;
}
屬性選擇器:
input[type='submit']{
background: palevioletred;
width: 200px;
}
2. 引入方式
1). 行內引入: <a style="行內引入的樣式">
2). 內部引入: 寫在head標籤裡面的style標籤裡面的樣式;
3). 外部引入: 將css樣式獨立成一個檔案， 通過<link rel="stylesheet" href="css/main.css">與當前html檔案連結在一起.
三種引入方式的優先順序: 就近原則