HTML標籤,CSS：頁面美化佈局
阿新 • • 發佈：2020-09-14
HTML標籤
HTML標籤 ：表單標籤
表單： * 概念：用於採集使用者輸入的資料的。用於和伺服器進行互動。 * form：用於定義表單的。可以定義一個範圍，範圍代表採集使用者資料的範圍 * 屬性： * action：指定提交資料的URL * method:指定提交方式 * 分類：一共7種，2種比較常用 * get： 1. 請求引數會在位址列中顯示。會封裝到請求行中(HTTP協議後講解)。 2. 請求引數大小是有限制的。 3. 不太安全。 * post： 2. 請求引數不會再位址列中顯示。會封裝在請求體中(HTTP協議後講解) 2. 請求引數的大小沒有限制。 3. 較為安全。 * 表單項中的資料要想被提交：必須指定其name屬性 <form action="url" method="get/post">  *表單項標籤： *input:可以通過type屬性值，改變元素的展示 *type屬性： *text: 文字框 *password: 密碼 *radio: 單選框 *checkbox: 複選框 *file: 檔案複選框 *hidden: 隱藏框 *按鈕： *submit:提交按鈕 *button:普通按鈕 *image: 圖片提交按鈕 *src屬性指定圖片的路徑 *select: 下拉列表 *textarea:文字域 * cols：指定列數，每一行有多少個字元 * rows：預設多少行。
CSS：頁面美化和佈局控制
一。CSS的使用：CSS與html結合方式 1. 內聯樣式 * 在標籤內使用style屬性指定css程式碼 * 如：<div style="color:red;">hello css</div> * <div style="font:15px>你好 css</div> 2. 內部樣式 * 在head標籤內，定義style標籤，style標籤的標籤體內容就是css程式碼 * 如： <style> div{ color:blue; } </style> <div>hello css</div> 3. 外部樣式 1. 定義css資原始檔。 2. 在head標籤內，定義link標籤，引入外部的資原始檔 * 如： * a.css檔案： div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div> 二.CSS語法 格式： 選擇器{ 屬性名1：屬性值1， 屬性名2：屬性值2 ...} 三. 選擇器：篩選具有相似特徵的元素 * 分類： 1. 基礎選擇器 1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一 * 語法：#id屬性值{} 2. 元素選擇器：選擇具有相同標籤名稱的元素 * 語法： 標籤名稱{} * 注意：id選擇器優先順序高於元素選擇器 3. 類選擇器：選擇具有相同的class屬性值的元素。 * 語法：.class屬性值{} * 注意：類選擇器選擇器優先順序高於元素選擇器 四.. 屬性 1. 字型、文字 * font-size：字型大小 * color：文字顏色 * text-align：對其方式 * line-height：行高 2. 背景 * background： 3. 邊框 * border：設定邊框，符合屬性 4. 尺寸 * width：寬度 * height：高度 5. 盒子模型：控制佈局 * margin：外邊距 * padding：內邊距 * 預設情況下內邊距會影響整個盒子的大小 * box-sizing: border-box; 設定盒子的屬性，讓width和height就是最終盒子的大小 * float：浮動 * left * right 此處輸入程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*讓div水平居中*/ margin: auto; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ color:#A6A6A6; font-size: 20px; } .rg_center{ float: left; /* border: 1px solid red;*/ } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a { color:pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /*設定邊框圓角*/ border-radius: 5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新使用者註冊</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定義表單 form--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">使用者名稱</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入使用者名稱"></td> </tr> <tr> <td class="td_left"><label for="password">密碼</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手機號</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td> </tr> <tr> <td class="td_left"><label>性別</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >驗證碼</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="註冊"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有賬號?<a href="#">立即登入</a></p> </div> </div> </body> </html>