文章目錄
- 一,表單提交資料
- --1,代碼
- 二,CSS
- --1,概述
- --2,入門案例
- --3,基礎選擇器
- --4,高級選擇器
- 三,盒子模型
- --1,概述
- --2,練習
- 四,HTML CSS的綜合案例
- --1,制作小票
- 創建CSS檔案,存放css代碼
- 創建html檔案,引入css檔案
- 作業: 完成用戶注冊
一,表單提交資料
–1,代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 表單標簽</title>
</head>
<body>
<!-- 添加音頻 -->
<audio controls="controls">
<source src="jay.mp3"></source>
</audio>
<!-- 添加視頻 -->
<video controls="controls">
<source src="b.mp4"></source>
</video>
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>
<p>大家好2</p>
<p>大家好2</p>
<p>大家好2</p>
<span>大家好3</span>
<span>大家好3</span>
<span>大家好3</span>
<!--1.表單:本質就是表格,只有表單才能提交資料(把瀏覽器輸入的資料交給java程式處理)
form標簽專門用來提交資料:必須使用form標簽 + 必須有submit按鈕 + 必須配置name屬性
地址欄: http://127.0.0.1:8848/cgb2108/test3.html?user=jack
?用來拼接用戶輸入的資料,user=jack,其中user是給標簽配置的name屬性的值,jack是用戶從瀏覽器上輸入資料
面試題:提價資料的兩種方式: get方式 和 post方式
get方式:被拼接在地址欄,方便看,壞處是不安全,長度受限--不推薦
post方式:不方便看,好處是安全--推薦!!!
method屬性用來指定資料的提交方式,默認是get
action屬性用來指定資料將要交給哪個程式處理
-->
<form method="post" action="#">
<h1>注冊表單</h1>
<table bgcolor="lightgray" border="1px"
bordercolor="green" cellspacing="0"
width="500px">
<tr>
<td>用戶名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" name="pwd" />
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" name="repwd"/>
</td>
</tr>
<tr>
<td>昵稱:</td>
<td>
<input type="text" name="nick"/>
</td>
</tr>
<tr>
<td>郵箱:</td>
<td>
<input type="email" name="mail" />
</td>
</tr>
<tr>
<td>性別:</td>
<td> <!-- 問題1:提交的資料都是on,加value屬性,區分提交的資料-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>愛好:</td>
<td><!-- 問題1:提交的資料都是on,加value屬性,區分提交的資料-->
<input type="checkbox" name="hobby" value="lq"/>籃球
<input type="checkbox" name="hobby" value="zq"/>足球
<input type="checkbox" name="hobby" value="pqq"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city"> <!-- 定義下拉框-->
<option value="0">-請選擇-</option> <!-- 定義下拉選項-->
<option value="1">北京</option>
<option value="2">廣東</option>
</select>
</td>
</tr>
<tr>
<td>頭像:</td>
<td>
<input type="file" name="touxiang"/>
</td>
</tr>
<tr>
<td>驗證碼:</td>
<td>
<input type="text" />
<img src="a.png" />
<input type="button" value="點我換一張"/>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea></textarea> <!-- 文本域-->
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" />
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
二,CSS
–1,概述
全稱是 層疊樣式表 stylesheet ,作用是用來修飾HTML網頁.
語法: 選擇器{ 屬性名:屬性值 ; 屬性名:屬性值 ; 樣式3…}
學習重點: 選擇器 + 各種屬性
位置:
1, 行內CSS:只作用在當前行, 給當前元素使用style屬性來修飾樣式
html <h1 style="text-align:center;">我是h1</h1>
2, 內部CSS: 在HTML代碼里使用style標簽,包裹著CSS代碼.提高了CSS代碼的復用性
3, 外部CSS: 把HTML代碼和CSS代碼分離,在HTML中引入CSS檔案
–2,入門案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css</title>
<!-- style標簽是HTML提供的,寫css代碼 -->
<style>
/* CSS語法:選擇器{樣式} */
div{/* 選中div */
text-align: center;/* 文字居中 */
}
</style>
</head>
<body>
<!--style屬性用來設定樣式 屬性名:屬性值; -->
<h1 style="text-align:center;">我是h1</h1><!-- 設定文本居中 -->
<div>我是div1</div>
<div>我是div2</div>
</body>
</html>
–3,基礎選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 css</title>
<!-- 用HTML提供的style標簽包裹css代碼 -->
<style>
/* 1.標簽名選擇器:根據標簽的名字選中 */
div{/* 練習1:修飾div的樣式 */
color: red;/* 字的顏色 */
background-color: darkgray;/* 背景色 */
border-style:dashed;/* 邊框的樣式,虛線 */
border-color:blue;/* 邊框的顏色 */
}
span{/* 練習2:修飾span的樣式 */
font-size: 30px;/* 字號 字體 */
font-family: "黑體";/* 字體 */
}
/* 2.class選擇器:根據class屬性的值選中元素,class的值能相同
步驟:給元素加class屬性+通過.獲取元素
*/
.a{/* 練習3:修飾div1的樣式*/
font-size: 25px;/* 字號 */
}
.b{/* 練習4:修飾span1的樣式 */
opacity:0.4 ;/* 透明度 0.0~1.0,數值越小越透明 */
}
/* 3.id選擇器:根據id屬性的值選中元素,要求id的值不能相同
步驟:給元素添加id屬性 + 通過#獲取值
*/
#c{/* 練習5:修飾a2的樣式 */
border-style: solid; /* 邊框的樣式:實線*/
border-radius: 25px; /* 圓角 */
}
</style>
</head>
<body>
<div class="a">我是div1</div>
<div>我是div2</div>
<span class="b">我是span1</span>
<span>我是span2</span>
<a class="a b">我是a1</a> <!--同時擁有a b兩種樣式的修飾-->
<a id="c">我是a2</a>
</body>
</html>
–4,高級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 CSS高級選擇器</title>
<style>
/* 1.分組選擇器:把多種選擇器的結果,組成一組進行修飾,逗號隔開 */
a , input{ /* 利用標簽名選擇器,選中一組元素,修飾樣式 */
/* 邊框: 寬度 樣式 顏色; */
border:1px dashed red;
}
/* 利用基本選擇器,選中一組元素,修飾樣式 */
.x , #y , input{
font-size: 20px;
}
/* 2.屬性選擇器:按照標簽的屬性來選擇元素,標簽名[屬性名]*/
a[href]{ /* 選中擁有href屬性的a標簽*/
font-size: 50px;
}
input[type='text']{/* 選中type="text"的input設定背景色 */
background-color: green;
}
</style>
</head>
<body>
<a class="x">我是a1</a>
<a href="#" class="x">我是a2</a>
<a href="#" id="y">我是a3</a>
<input type="text" />
<input type="password" placeholder="請您輸入密碼..."/>
<input type="text" />
</body>
</html>
三,盒子模型
–1,概述
CSS認為HTML里的每個元素都是一個盒子.
外邊距margin: 盒子間的距離,可以設定左邊距,右,上,下
邊框border: 盒子的邊框,可以設定寬度/顏色/樣式
內邊距padding: 盒子里的內容和盒子的邊框的距離,可以設定左邊距,右,上,下
內容: 可以設定 width 和 height
–2,練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 外邊距: 單選框是一個盒子 男也是一個盒子 兩個盒子的距離margin -->
<input type="radio" style="margin: 20px;"/>男
<!-- 內邊距: 一個盒子里, 內容到邊框的距離padding -->
<input type="text" placeholder="你好" style="padding: 20px;"/>
</body>
</html>
四,HTML CSS的綜合案例
–1,制作小票
創建CSS檔案,存放css代碼
body{/* 統一網頁風格*/
width: 400px;/* 寬度 */
font-size: 15px;/* 字號 */
}
/* 修改字號 */
.a{/* class選擇器,選中網頁中class=a的元素 */
font-size: 30px;
}
/* 修飾文字居中 */
.b{
/* text-align: center; */
padding-left: 100px;/* 內邊距 */
}
/* 修飾水平線 */
hr{
border:1px dashed green; /* 寬度 虛線 綠色*/
}
/* 修飾文本縮進/首行縮進 */
#note{
text-indent:30px;
}
/* 修飾圖片居中 */
img{
padding-left: 80px;
}
創建html檔案,引入css檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 小票</title>
<!-- 1.松耦合,分離了HTML和css代碼,在網頁里引入css檔案 -->
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<div>顧客聯</div>
<div class="a">請您留意取餐賬單號</div>
<div class="b">自取顧客聯</div>
<div>永和大王(北二環西路店)</div>
<div>010-6211313</div>
<div class="b">--結賬單--</div>
<div class="a">賬單號:P000009</div>
<div>賬單型別：堂食</div>
<div>人數：1</div>
<div>收銀員：張靜</div>
<div>開單時間：2018-04-17 07:24:29</div>
<div>結賬時間：2018-04-17 07:24:38</div>
<hr />
<table>
<tr>
<th>數量</th>
<th>品項</th>
<th>金額</th>
</tr>
<tr>
<td>1</td>
<td>油條豆漿套餐<br /> 1X--油條<br />1X--現磨豆漿(熱/甜) </td>
<td>7.00</td>
</tr>
</table>
<hr />
<table>
<tr>
<td width="180px">支付寶花唄一元早餐</td>
<td>3.00</td>
</tr>
<tr>
<td>合計</td>
<td>4.00</td>
</tr>
<tr>
<td>支付寶</td>
<td>1.00</td>
</tr>
<tr>
<td>支付寶補貼</td>
<td>3.00</td>
</tr>
</table>
<hr />
<div>列印時間：2018-04-17 07:24:38</div>
<hr />
<div id="note">根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票，此二維碼30天有效，掃描時請保持小票平整，</div>
<img src="2.png"/>
<div>官網：www.yonghe.com.cn</div>
<div>加盟熱線：86-21-60769397 或 86-21-60769002</div>
</body>
</html>
作業: 完成用戶注冊
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/309555.html
標籤：其他
上一篇：雙向回圈鏈表增刪查改C語言實作