【Java EE】Day08 HTML&CSS
阿新 • • 發佈:2021-06-12
一、表單
1、概述
- 採集資料,與伺服器互動包括 form表單,需要提交則必須設定name屬性,action方式主要包
- get:引數會在位址列顯示(請求行),長度有限
- post:引數被封裝在請求體,引數大小無限制
- 檢視提交的資料:F12
2、常用標籤--Input
- type屬性值:button checkbox hidden password radio reset submit text
- text:
- 文字框 ,預設
- placehold:提示資訊
- ratio單選框
- 實現單選,則多個單選框的name屬性值必須相同,並提供value屬性表示提交的值
- checked指定預設值
- tel:電話號碼欄位
- 只用於手機
- 其他:hidden隱藏域、image影象
- H5的input屬性
- 取色器color
- 自選日期date
- 日期時間date-time-local
- 郵箱email自動校驗
- 數字number自動校驗
3、表單項標籤select和文字域textarea
- select:下拉列表
- 子選項option,指定列表項
- selected
- textarea:文字域
- cols:指定列數
- rows:指定行數
二、CSS層疊樣式表
1、概述
- Cascading Style Sheet
- 層疊:多個樣式可以作用在同一個元素
2、好處
- 較<font color='red'>降低耦合度
- 將內容和樣式控制分離
3、使用
- 內聯樣式
- 標籤內使用style屬性指定css
- 不推薦,並未降低耦合度
- 內部樣式
- head內定義style標籤
- 標籤內部:div{ }
- 外部樣式
- 單獨css資原始檔
- head內定義link標籤:<link rel="stylesheet" href="css/a.css" />
- 其他寫法
<style> @import "css/a.css"; </style>
4、CSS語法
- 格式:選擇器{屬性名1:屬性值1;……}
- 選擇器
- 具有相似特徵的元素
- 如div、p等
5、選擇器
- 基礎選擇器
- id選擇器:#id屬性值{}
- 元素選擇器(優先順序低):元素名{}
- 類選擇器:.class值{}
- 擴充套件選擇器
- 選擇所有:*{}
- 並集選擇器:A,B{}
- 子選擇器:A B{}(選擇A下的B)
- 父選擇器:A>B{}(選擇B上的A)
- 屬性選擇器:元素名[屬性名="屬性值"]{}
- 偽類選擇器:元素:狀態{}
- 常見狀態:link:初始化、visited:訪問過、active:正被訪問、hover:滑鼠懸浮
6、屬性
- 字型/文字
- font-size:字型大小
- color:文字顏色
- text-align:文字對齊方式
- line-height:文字行高
- 背景
- background:複合屬性
- 邊框
- border
- 複合屬性,4條線分開設定
- 尺寸:
- width:寬度
- height:高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字型屬性</title> <style> p{ color:#ff0000; font-size: 30px; text-align: center; line-height: 100px; /* border 邊框 */ border:1px solid red; } div{ border:1px solid red; /* 尺寸 */ width:200px; height:200px; background: url("img/logo.jpg") no-repeat center; } </style> </head> <body> <p>傳智播客</p> <div> 黑馬程式設計師 </div> </body> </html>
7、盒子模型
- 控制頁面的佈局
- 屬性:
- 外邊距:margin
- 內邊距:padding
- 會影響盒子大小
- 解決:box-sizing:border-box;
- 浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字型屬性</title> <style> div{ border:1px solid red; width:100px; /* 浮動起來,可以位於第一行 */ } .div1{ width:100px; height:100px; /*margin-left: 50px;*/ /*margin-top:50px;*/ } .div2{ width:200px; height:200px; /*設定內邊距*/ padding:50px; /*這樣的話,外部盒子會變大 解決方案:設定盒子的屬性,讓width和height就是盒子最終的大小 */ box-sizing:border-box; } .div3{ float:left; } .div4{ float:left; } .div5{ float:right; } </style> </head> <body> <div class="div2"> <!--裡面的盒子為主體,居中顯示則需要設定外邊距--> <div class="div1"> </div> </div> <div class="div3">aaaaa</div> <div class="div4">bbbbb</div> <div class="div5">ccccc</div> </body> </html>
三、案例:使用CSS美化註冊頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <style> *{ margin:0px; padding:0px; box-sizing:border-box; } body{ background:url("image/register_bg.png") no-repeat center; } .rg_layout{ width:900px; height:500px; border:8px solid #eeeeee; /*takecolor取色器工具*/ background-color:white; /*讓div水平居中*/ margin: auto;/*水平居中*/ margin-top: 15px;/*外邊距*/ } .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{ /*border:1px solid red;*/ float:left; width: 450px; } .rg_right{ /*border:1px solid red;*/ float:right; margin:15px; } .rg_right p{ 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, #tel, #checkcode, #birthday, #name{ width: 251px; height:32px; border:1px solid grey; /*設定邊框為圓角*/ border-radius:5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; /*設定垂直居中*/ vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: yellow; border: 1px solid yellow; } </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"> <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 src="img/verify_code.jpg" id="img_check"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="註冊" id="btn_sub"></td> </tr> </table> </div> </div> <div class="rg_right"> <p>已有帳號?<a href="#">立即登入</a> </p> </div> </div> </body> </html>