cgb2108-day08
文章目录
-
- 一,表单提交数据
-
- --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>大家好2p>
<p>大家好2p>
<p>大家好2p>
<span>大家好3span>
<span>大家好3span>
<span>大家好3span>
<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>
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女
td>
tr>
<tr>
<td>爱好:td>
<td>
<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
2, 内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性
3, 外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件
–2,入门案例
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 csstitle>
<style>
/* CSS语法:选择器{样式} */
div{
/* 选中div */
text-align: center;/* 文字居中 */
}
style>
head>
<body>
<h1 style="text-align:center;">我是h1h1>
<div>我是div1div>
<div>我是div2div>
body>
html>
–3,基础选择器
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 csstitle>
<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">我是div1div>
<div>我是div2div>
<span class="b">我是span1span>
<span>我是span2span>
<a class="a b">我是a1a>
<a id="c">我是a2a>
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">我是a1a>
<a href="#" class="x">我是a2a>
<a href="#" id="y">我是a3a>
<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>
<input type="radio" style="margin: 20px;"/>男
<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>
<link rel="stylesheet" href="1.css"/>
head>
<body>
<div>顾客联div>
<div class="a">请您留意取餐账单号div>
<div class="b">自取顾客联div>
<div>永和大王(北二环西路店)div>
<div>010-6211313div>
<div class="b">--结账单--div>
<div class="a">账单号:P000009div>
<div>账单类型：堂食div>
<div>人数：1div>
<div>收银员：张静div>
<div>开单时间：2018-04-17 07:24:29div>
<div>结账时间：2018-04-17 07:24:38div>
<hr />
<table>
<tr>
<th>数量th>
<th>品项th>
<th>金额th>
tr>
<tr>
<td>1td>
<td>油条豆浆套餐<br /> 1X--油条<br />1X--现磨豆浆(热/甜) td>
<td>7.00td>
tr>
table>
<hr />
<table>
<tr>
<td width="180px">支付宝花呗一元早餐td>
<td>3.00td>
tr>
<tr>
<td>合计td>
<td>4.00td>
tr>
<tr>
<td>支付宝td>
<td>1.00td>
tr>
<tr>
<td>支付宝补贴td>
<td>3.00td>
tr>
table>
<hr />
<div>打印时间：2018-04-17 07:24:38div>
<hr />
<div id="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。div>
<img src="2.png"/>
<div>官网：www.yonghe.com.cndiv>
<div>加盟热线：86-21-60769397 或 86-21-60769002div>
body>
html>
作业: 完成用户注册
