表单标签、选择器进阶、背景属性
表单标签
注册和登录
目的:收集用户信息,能够输入内容
-
input标签
-
text
- 文本输入类型
-
<input type="text" name="username">
-
password
- 密码类型
-
<input type="password" name="password">
-
radio
- 单选按钮
- 同一组单选框 name 必须相同
-
<input type="radio" name="sex" value="boy">男 <input type="radio" name="sex" value="girl">女
-
checkbox
- 复选框
-
<input type="checkbox" name="course" value="HTML">HTML <input type="checkbox" name="course" value="CSS">CSS
-
button
- 普通按钮
-
<input type="button" value="按钮">
-
submit
- 提交按钮
-
<input type="submit" value="提交">
-
reset
- 重置按钮
-
<input type="reset" value="重置">
-
file
- 文件上传
-
<input type="file" name="file">
-
image
- 图像形式的提交按钮
-
<input type="image" src="submit.jpg" alt="submit">
-
hidden
- 隐藏域
-
<input type="hidden" value="111" name="hidden">
-
-
select
-
下拉框
-
<select name="area"> <option value="HTML">html</option> <option value="JS">js</option> <option value="CSS">css</option> </select>
-
-
textarea
- 文本域
-
<!-- 设置css属性 resize:none; 防止改变大小 --> <textarea name="info" cols="30" rows="10" style="resize: none;"></textarea>
-
label
-
<!-- label的for属性要对应相应表单的id --> <input type="radio" name="sex" value="boy" id="boy"><label for="boy">男</label> <input type="radio" name="sex" value="gril" id="gril"><label for="gril">女</label>
-
常用表单的属性
action
- action属性定义提交表单时执行的动作。通常表单会提交到web服务器网页,如果省略会被提交到当前页面
-
<!-- action 如果为空,是提交到当前页面,还可以提交到其他页面 --> <form action="./demo.html"> <input type="text" name="username"> <input type="submit"> </form>
-
method
-
get
- 从服务器获取数据, 数据量小, 不安全的
- get是默认方法
-
post
- 向服务器传递数据,相对安全
- 数据量大
-
<form action="" method="POST"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit"> </form>
-
checked
-
应用到单选框,复选框,表示默认选中
-
<input type="checkbox" checked> <input type="checkbox" name="hobby" value="game" checked>
-
-
selected
- 下拉框
-
<!-- selected 默认选中,用于下拉框 size 显示下拉框显示的个数,默认为1 --> <select name="area" size="2"> <option value="HTML">html</option> <option value="JS" selected>js</option> <option value="CSS">css</option> </select>
-
value
-
<input type="text" name="name" value="html5">
-
-
readonly 只读,可以提交
-
<input type="text" name="name" value="html5" readonly>
-
-
disabled 禁用,用于输入框不可以提交,还可以禁用按钮
-
<input type="text" name="name" value="html5" disabled>
-
-
maxlength 限定输入的最大长度
-
<input type="text" name="username" maxlength="6">
-
-
size 显示下拉框显示的个数
-
<!-- size 显示下拉框显示的个数,默认为1 --> <select name="area" size="2"> <option value="HTML">html</option> <option value="JS" selected>js</option> <option value="CSS">css</option> </select>
-
-
style=“resize: none;” 设置为不能改变文本域大小
-
<!-- resize: none 设置为不能改变尺寸 --> <textarea name="" cols="30" rows="10" style="resize: none;"></textarea>
-
-
placeholder 输入框提示
-
<input type="text" maxlength="11" name="phone" placeholder="请输入手机号">
-
选择器进阶
-
群组选择器
-
h1, h2, h3 { background-color: red; }
- 选择器之间用逗号分隔
-
-
交集选择器
-
div.red { background-color: yellow; } <div class="box1">1</div> <span class="box1">3</span>
- 由两个以上单一选择器组成
-
-
子代选择器
-
ul li > a { color: red; }
- 子代选择器 ,子 指的是 亲儿子 大于号分割 此时的a 一定是 li 的亲 儿子
-
-
后代选择器
-
ul li a { color: red; }
- ul里面所有的a标签
-
-
伪类链接选择器
- a:link 正常,未访问过的链接
- a:visited 访问过后
- a:hover 鼠标悬停
- a:active 鼠标点击那一刻
盒模型的概念
- 概念:css盒模型本质是一个盒子,封装周围的html标签,它包括:外边距,边框,填充(内边距)和实际内容
- 内容 content
- width: 设置宽度
- height: 设置高度 auto 10px 2em 50%
- 内边距(填充区域)padding :
- 单边内边距:padding-top padding-bottom padding-left padding-right
- 简写
- 一个值:表示四个方向的内边距值。
- 两个值:分别表示上下,左右的内边距值
- 三个值:分别表示上,左右,下的内边距值
- 四个值:分别表示上,右,下,左的内边距值
- 边框 border
- border-width
- border-style
- none 定义无边框
- dotted 定义点状边框
- dashed 定义虚线边框
- solid 定义实现边框
- double 定义双线。双线的高度等于border-width的值
- border-color
- 边框简写方式:border: 1px solid red;
- 外边距 margin :
- 单边外边距 : margin-top margin-bottom margin-left margin-right
- 简写:
- 一个值:表示四个方向的外边距值。
- 两个值:分别表示上下,左右的外边距值
- 三个值:分别表示上,左右,下的外边距值
- 四个值:分别表示上,右,下,左的外边距值
- 外边距传递和塌陷
- 给父级设置边框或内边距
- 给父级设置 overflow属性的属性值不为默认的visible,实际上是触发BFC
- max-width和min-width:
- 用来设置元素的最大宽度和最小宽度
- max-height和min-height:
- 用来设置元素的最大高度和最小高度
边框运用
-
四个三角形拼成的正方形
-
.box4 { width: 100px; height: 100px; border-width: 50px; border-style: solid; border-color: red yellow green blue; }
-
-
三个三角形拼成的正方形
-
.box3 { width: 0; height: 0; border-width: 100px 200px 100px 0px; border-style: solid; border-color: red yellow green; }
-
-
两个三角形拼成的正方形
-
.box2{ width: 0; height: 0; border-width: 200px 200px 0 0; border-style: solid; border-color: red yellow green; }
-
-
一个三角形
-
.box1{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color: red transparent transparent transparent; }
-
背景属性
- background-color : red
- background-image: url(./img/bg.jpg)
- background-repeat: no-repeat
- no-repeat 不平铺
- repeat 默认,平铺
- background-size: 50% 50%
- 100px 100px 数值
- 50% 50% 百分比
- background-position: 50% 50%
- 100px 100px 数值
- 50% 50% 百分比
- top right 英文单词
- 默认在左上角显示,当只设置一个值时,另一个默认为auto。
- background:red url(./img/bg.jpg) no-repeat top