文章目錄
- 一,作業
- --1,美化學生管理系統
- 二,CSS選擇器
- --1,分組選擇器,屬性選擇器
- 三,盒子模型
- --1,概述
- --2,測驗
- 四,HTMLCSS綜合案例
- --1,小票
- 創建1.css檔案
- 改造html檔案,引入css檔案
- --2,用戶注冊
- 創建2.css檔案
- 創建html檔案,并引入2.css檔案
- 五,Git
- --1,概述
- --2,準備作業
一,作業
–1,美化學生管理系統
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>學生資訊管理系統MIS</title>
<style>
.a{
width: 300px;/* 寬度 高度 */
height: 30px;
}
#btn1{
/* 背景色 文字的顏色 寬度 高度 */
background-color: #0000FF;
border-color: #0000FF;
color: white;
width: 50px;
height: 30px;
font-size: 15px;
}
#btn2{
/* 背景色 文字的顏色 寬度 高度 */
background-color: hotpink;
border-color: hotpink;
color: white;
width: 50px;
height: 30px;
font-size: 15px;
}
</style>
</head>
<body>
<!-- 完成網頁的制作,總結:
1,標簽:form表單可以提交資料,table表格,tr行,td列,h1標題,input輸入框,
select下拉框,option下拉選項,button按鈕,br換行
2,屬性:method是form提交資料的方式,默認是get,資料在地址欄
action是form提交的資料交給哪個程式處理,#是沒人處理
name是提交資料時的key,placeholder是輸入框的提示,
checked是默認選中,value是提交的資料的值
-->
<form method="post" action="#">
<table>
<tr>
<td>
<h1>學生資訊管理系統MIS</h1>
</td>
</tr>
<tr>
<td>姓名:</td>
</tr>
<tr>
<td>
<input class="a" type="text" name="user" placeholder="輸入姓名.."/>
</td>
</tr>
<tr>
<td>年齡:</td>
</tr>
<tr>
<td>
<input class="a" type="number" name="age" placeholder="輸入年齡.."/>
</td>
</tr>
<tr>
<td>
性別:(單選框)
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>
愛好:(多框)
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<input type="checkbox" name="hobby" value="ps"/>爬山
<input type="checkbox" name="hobby" value="cg"/>唱歌
</td>
</tr>
<tr>
<td>
學歷:(下拉框)
<select name="edu">
<option value="1">本科</option>
<option value="2">專科</option>
<option value="3">小學</option>
</select>
</td>
</tr>
<tr>
<td>
入學日期:<br />
<input type="date" name="intime"/>
</td>
</tr>
<tr>
<td>
<input id="btn1" type="submit" value="保存"/>
<input id="btn2" type="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
二,CSS選擇器
–1,分組選擇器,屬性選擇器
分組選擇器:選擇器1,選擇器2,選擇器3{宣告樣式}
屬性選擇器:根據屬性選中元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 高級選擇器</title>
</head>
<body>
<style>
/* 1.分組選擇器:選擇器1,選擇器2,選擇器3{宣告樣式} */
div,#a,.b{ /* 通過多種選擇器選中多個元素 */
font-size: 30px;/* 字號 */
text-indent: 20px;/* 文本縮進 */
}
/* 2.屬性選擇器:根據屬性選中元素 */
[type]{/* 只要有type屬性的就會被選中 */
background-color: #0000FF;
}
[type='text']{/* 只要type屬性等于'text'的 */
background-color: #FF0000;
}
input[type="password"]{/*只要input,而且type屬性等于'password'的 */
background-color: #FF69B4;
}
</style>
<input type="text" placeholder="姓名"/>
<input type="password" placeholder="密碼"/>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<p id="a">我是p1</p>
<p class="b">我是p2</p>
<p class="b">我是p3</p>
<span>我是span1</span>
<span>我是span1</span>
<span>我是span1</span>
</body>
</html>
三,盒子模型
–1,概述
CSS把HTML里的元素看做是一個一個的盒子.
內邊距padding: 一個盒子里的現象,內容和邊框的距離
外邊距margin: 盒子和盒子間的距離
邊框border:是指盒子可以設定邊框
–2,測驗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 小票</title>
<style>
/* 統一網頁的風格 */
body{
width: 300px;/* 寬度 */
}
/* 加大字號 */
.a{
font-size: 30px;
}
/* 文字居中 */
.b{
/* text-align:center ; */
margin-left: 80px;/* 左 內邊距 */
}
/* 設定首行縮進 */
#readme{
text-indent: 30px;
}
/* 設定圖片居中 */
img{
margin-left: 20px;
}
/* 設定水平線: 寬度 虛線 紅色*/
hr{
border:1px dashed red;
}
</style>
</head>
<body>
<div>顧客聯</div>
<div class="a">請您留意取餐賬單號</div>
<div class="b">自取顧客聯</div>
<div>永和大王(北二環西路店)</div>
<div>010-62112313</div>
<div class="b">--結賬單--</div>
<div class="a">賬單號:P00000009</div>
<div>賬單型別:食堂</div>
<div>人數:1</div>
<div>收銀員:張靜</div>
<div>開單時間:2018-04-17 07:24:11</div>
<div>結賬時間:2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>數量</td>
<td>品項</td>
<td>金額</td>
</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 />
列印時間:2018-04-17 07:24:22
<hr />
<div id="readme">
根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票，此二維碼30天有效，掃描時請保持小票平整，
</div>
<div>
<img src="2.png"/>
</div>
<div>官網：www.yonghe.com.cn</div>
<div>加盟熱線：86-21-60769397 或 86-21-60769002</div>
</body>
</html>
四,HTMLCSS綜合案例
–1,小票
創建1.css檔案
/* 統一網頁的風格 */
body{
width: 300px;/* 寬度 */
}
/* 加大字號 */
.a{
font-size: 30px;
}
/* 文字居中 */
.b{
/* text-align:center ; */
margin-left: 80px;/* 左 內邊距 */
}
/* 設定首行縮進 */
#readme{
text-indent: 30px;
}
/* 設定圖片居中 */
img{
margin-left: 20px;
}
/* 設定水平線: 寬度 虛線 紅色*/
hr{
border:1px dashed red;
}
改造html檔案,引入css檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測驗 小票</title>
<!-- link把外部CSS檔案引入到這個網頁中
rel是指檔案的型別(stylesheet是固定值是樣式表)
href是指定檔案的位置
-->
<link rel="stylesheet" href="1.css"/>
</head>
<body>
<div>顧客聯</div>
<div class="a">請您留意取餐賬單號</div>
<div class="b">自取顧客聯</div>
<div>永和大王(北二環西路店)</div>
<div>010-62112313</div>
<div class="b">--結賬單--</div>
<div class="a">賬單號:P00000009</div>
<div>賬單型別:食堂</div>
<div>人數:1</div>
<div>收銀員:張靜</div>
<div>開單時間:2018-04-17 07:24:11</div>
<div>結賬時間:2018-04-17 07:24:22</div>
<hr />
<table>
<tr>
<td>數量</td>
<td>品項</td>
<td>金額</td>
</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 />
列印時間:2018-04-17 07:24:22
<hr />
<div id="readme">
根據相關稅法規定，電子發票的開票日期同網上申請電子發票的日期，如您需要當日的電子發票請務必在消費當日通過掃描下方二維碼，根據指引步驟開具您的增值稅電子普通發票，此二維碼30天有效，掃描時請保持小票平整，
</div>
<div>
<img src="2.png"/>
</div>
<div>官網：www.yonghe.com.cn</div>
<div>加盟熱線：86-21-60769397 或 86-21-60769002</div>
</body>
</html>
–2,用戶注冊
創建2.css檔案
/* 1.修飾input框 寬度高度 內邊距 外邊距 字號 */
.a{
width: 330px;
height: 40px;
}
/* 2.修飾提示文字 字號 顏色 縮進 */
.b{
font-size: 5px;
color: gray;
text-indent: 10px;
}
/* 3.立即注冊的按鈕 背景色 字的顏色 字號 邊框的顏色 居中*/
button{
background-color: red;
border-color: red;
color: white;
text-align: center;
width: 330px;
height: 50px;
font-size:25px ;
}
/* 4.居中的用戶注冊 */
h1{
/* text-align: center; */
margin-left: 100px;
}
創建html檔案,并引入2.css檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用戶注冊</title>
<!-- 引入外部的css檔案 -->
<link rel="stylesheet" href="2.css"/>
</head>
<body>
<form>
<table>
<tr>
<td>
<h1>用戶注冊</h1>
</td>
</tr>
<tr>
<td>
<input class="a" type="text" placeholder="用戶名" name="user"/>
</td>
</tr>
<tr>
<td class="b">支持中文、字母、數字、“-”、“_”的組合，4-20個字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="設定密碼" name="pwd"/>
</td>
</tr>
<tr>
<td class="b">建議使用數字、字母和符號兩種以上的組合，6-20個字符</td>
</tr>
<tr>
<td>
<input class="a" type="password" placeholder="確認密碼" name="repwd"/>
</td>
</tr>
<tr>
<td class="b">兩次密碼輸入不一致</td>
</tr>
<tr>
<td>
<input class="a" type="number" placeholder="驗證手機" name="tel"/>
或
<a href="#">驗證郵箱</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
我已閱讀并同意
<a href="#">《京淘用戶注冊協議》</a>
</td>
</tr>
<tr>
<td>
<button type="submit">立即注冊</button>
</td>
</tr>
</table>
</form>
</body>
</html>
五,Git
–1,概述
完成版本控制,可以實時上傳代碼到碼云服務器上.
日常操作:
1,上傳: add -> commit -> push
add : 把即將上傳的資源,從作業空間添加到本地索引
commit: 把已經添加了索引的檔案,從本地索引提交到本地倉庫
push: 把本地倉庫的 推送到 Gitee上
2,下載: clone/pull
clone: 把Gitee上的代碼下載到你的電腦里
–2,準備作業
安裝Git(下一步下一步就行了)
去碼云注冊賬號(記住賬號密碼,并激活郵箱)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/355380.html
標籤：其他