css3與h5第一天
阿新 • • 發佈：2018-11-06
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> header{ width: 1200px; height: 50px; background-color: #e20c3a; margin: 0 auto; } nav{ width: 1200px; height: 50px; background-color: pink; margin: 0 auto; } footer{ width: 1200px; height: 50px; background-color: yellow; margin: 0 auto; } fieldset{ width: 300px; height: 200px; /*background-color: yellow;*/ margin: 0 auto; } .input{ margin-top: 40px; margin-bottom: 40px; margin-left: 10px; } [title=input]{ margin-left: 27px; } legend{ margin: 0 auto; } </style> </head> <body> <header></header> <nav></nav> <footer></footer> <input type="text"value="請輸入明星" list="star"> //list屬性值與datalist id對應 <datalist id="star"> <option value="周潤發">周潤發</option> <option value="劉海">劉海</option> <option value="周星馳">周星馳</option> <option value="劉德華">劉德華</option> <option value="成龍">成龍</option> <option value="劉歡">劉歡</option> <option value="胡歌">胡歌</option> </datalist> <fieldset> //fiedset檔案設定 <legend>使用者登入</legend> //標題在先中間 使用者名稱:<input type="text" class="input"><br/> 密碼:<input type="password" title="input"><br/> </fieldset> </body> </html>
新增屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--//佔位符 當用戶輸入的時候 裡面的文字消失 刪除所有文字，自動返回--> <input type="text" placeholder="請輸入使用者名稱"><br/> <input type="text" placeholder="請輸入使用者名稱"><br/> <!--//規定當頁面載入時 input 元素應該自動獲得焦點--> <input type="text" autofocus><br/> <!--//多檔案上傳--> <input type="file" multiple><br/> <!--//規定表單是否應該啟用自動完成功能 有2個值，一個是on 一個是off on 代表記錄已經輸入的值 1.autocomplete 首先需要提交按鈕 <br/>2.這個表單您必須給他名字--> <input type="text" autocomplete="off"><br/> <input type="submit"> <!--//必填--> <input type="text" required><br/> <!--//規定啟用（使元素獲得焦點）元素的快捷鍵 採用 alt + s的形式--> <input type="text" accesskey="s"> </body> </html>
結構偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div:nth-child(1){*/ /*background-color: #e20c3a;*/ /*}*/ div:nth-child(2n){ background-color: #e20c3a; } div:nth-child(2n-1){ background-color: pink; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </body> </html>
表單type的屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
margin: 0 auto;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<td>您的郵箱</td>
<td><input type="email"></td>
<td>不可修改</td>
</tr>
<tr>
<td>您的電話</td>
<td><input type="tel"></td>
<td>不可修改</td>
</tr>
<tr>
<td>您的網址</td>
<td><input type="url"></td>
<td>不可修改</td>
</tr>
<tr>
<td>您的座機</td>
<td><input type="number"></td>
<td>不可修改</td>
</tr>
<tr>
<td>搜尋</td>
<td><input type="search"></td>
<td>不可修改</td>
</tr>
<tr>
<td>滑動</td>
<td><input type="range"></td>
<td>不可修改</td>
</tr>
<tr>
<td>小時分鐘</td>
<td><input type="time"></td>
<td>不可修改</td>
</tr>
<tr>
<td>年月日</td>
<td><input type="date"></td>
<td>不可修改</td>
</tr>
<tr>
<td>時間</td>
<td><input type="datetime"></td>
<td>不可修改</td>
</tr>
<tr>
<td>月年</td>
<td><input type="month"></td>
<td>不可修改</td>
</tr>
<tr>
<td>年周</td>
<td><input type="week"></td>
<td>不可修改</td>
</tr>
<tr>
<td><input type="submit"></td>
<td><input type="reset"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>視訊音訊（source為了相容問題）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio controls loop>
<!--// ogg ie不支援-->
<source src="mp3/1.ogg">
</audio>
<video autoplay controls loop width = "1000">
<source src="movie/movie01.mp4">
</video>
</body>
</html>