目录
一.更多的选择器
(一）更多的伪类选择器
1. first-child
2. first-of-type
选中第一个子元素
/* 选中a元素，并且a元素必须是第一个子元素 */
a:first-child{
color: red;/* 选中的是子元素中第一个a元素 */
a:first-of-type{
color: aqua;
}3. last-child
4. last-of-type
5. nth-child
6. nth-of-type
/* 必须是a元素，并且是第五个子元素 */
a:nth-child(5){
color: aqua;
}
/* 必须是a元素，并且是第偶数个子元素 */
a:nth-child(2n){
color: blue;
}even：关键字，等同于2n （偶数）
odd：关键字，等同于2n+1 （奇数）
/* 选中第3个a元素，其他不看 */
a:nth-of-type(3){
color: brown;
}（二）更多的伪元素选择器
1. first-letter
选中元素中第一个字母或者文字
```css
p::first-letter{
color:red;
font-size:2em;
}
```2. first-line
选中元素中第一行的文字
3. selection
选中被用户框选的元素
```css
p::selection{
color: cornflowerblue;
background-color: aquamarine;
}
```二、更多的样式
（一）透明度
1. opacity：它设置的是整个元素的透明，取值是0~1.
2. 在颜色位置设置alpha通道（rgba）
```css
color:rgba(0,0,0,0.5)
```（二）鼠标变化
```css
div{
cursor:pointer;
}
```如果是图片鼠标光标
图片后缀是png或者ico;
```css
div{
cursor:url("图片地址"),auto;
}
```
（三）盒子的隐藏
1. display:none,不生成盒子；
2. visibility：hidden，生成盒子，只是从视觉上移除了盒子，盒子仍然占据空间
（四）背景图
img元素是属于HTML的概念
背景图是属于css的概念
1. 当图片属于网页内容时，必须使用img元素
2. 当图片仅用于美化页面时，必须使用背景图
涉及的css属性
1. background-image (设置背景图)
默认情况下，若背景图小，则背景图会在横坐标和纵坐标中进行重复
2. background-repeat (背景图是否重复)
```css
body{
background-image: url("../笔记/维尼.jpg");
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
}
```3. background-size (背景图的尺寸)
```css
div{
width: 500px;
height: 400px;
border: 3px solid;
background-image: url("../笔记/维尼.jpg");
background-repeat: no-repeat;
background-size: contain;
background-size: cover;
background-size：400px 200px;
background-size:100%;
}
```- 预设值：contain（不改变图片比例，将图片完整放进区域中但区域不用一定填满）
- 预设值：cover（不改变图片比例，将图片一部分放进区域中且区域填满）
- 数值或百分比
4. background-position （背景图的位置）
- 预设值：left，right，top，bottom
- 数值或百分比：background-size：数 数 or 100%
表示与左边边框的距离 表示与上边边框的距离
- 雪碧图（精灵图）
5. background-attachment （背景图是否固定）
```css
body{
/* 背景图是相对于视口的 */
background-image: url("../笔记/维尼.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment:fixed;
}
```6. 背景图和背景颜色混用
```css
body{
background-image: url("../笔记/维尼.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
background-color:#a6af5e ;
}
```7. 速写background
```css
body{
background-image: url("../笔记/维尼.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
background-color:#a6af5e ;
}
```三、iframe元素
（框架页）
通常用于在网页中嵌入另一个网页
iframe:可替换元素
1. 通常是行盒
2. 通常显示的内容取决于元素的属性
3. css不能完全控制其中的样式
4. 具有行块盒的特点（可以设置宽高）
iframe{
width: 100%;
height: 500px;
}
<a href="https://www.baidu.com">百度</a>
<a href="https://douyu.com" target="myframe">斗鱼</a>
<a href="https://www.qq.com">QQ</a>
<!-- myframe使得我点击斗鱼链接可以在frame页面打开 不是跳转新页面也不是当前页面 -->
<iframe name="myframe" src="https://www.taobao.com" ></iframe>
四、表单元素
一系列元素（可替换元素），主要用于收集用户数据
(一）input元素
**文本输入（输入框）**
- type属性：表示输入框的类型
0.<input type="text"> 输入一个普通文本框
1. <input type="password"> 输入的东西会看不见
2. <input type="date"> 日期选择框
3. <input type="search"> 搜索框
4. <input type="range"> 滑块值
5. <input type="range" min="0" max="5"> 有顿感的滑块
6.<input type="color"> 颜色选择
7.<input type="number"> 数字选择
8.<input type="number" min="0" max="99" step=""> 数字改变为step的倍数
9.<input type="file"> 选择文件
10.(多选）爱好：
音乐：
<input type="checkbox">
电影：
<input type="checkbox">
阅读：
<input type="checkbox">
11.（单选）性别：
男：
<input name="hi" type="radio">
女：
<input name="hi" type="radio">
<!-- input:text -->
<input type="text" name="" id="">
- input可以制作按钮
```html
<input type="reset"> 重置按钮
<input type="button"> 普通按钮
<input type="submit"> 提交按钮
```- value属性：输入框的值
```html
<input type="text" value="请输入账号：">
```- placeholder属性：显示提示的文本，文本框没有内容时显示
```html
<input type="text" placeholder="请输入账号：">
```（二） select元素
下拉列表选择框
通常和option元素配合使用
```html
请选择城市：
<select>
<option>成都</option>
<option value="">背景</option>
<option selected>哈尔滨 </option>
</select>
``````html
<p>
<!--单选-->
请选择你最喜欢的主播：
<!-- select是下拉 -->
<select>
<!-- optgroup是分组--->
<!-- label是分组的名称 -->
<optgroup label="才艺表演">
<option>冯提莫</option>
</optgroup>
<optgroup label="游戏主播">
<option >WETED</option>
<option>大海解释</option>
<option >小本解说</option>
</optgroup>
</select>
</p>
<p>
<!-- 多选+multiple -->
请选择你喜欢的主播：
<select multiple>
<optgroup label="才艺表演">
<option value="">冯提莫</option>
<option value="">刀削刀</option>
<option value="">花生</option>
</optgroup>
<optgroup label="游戏主播">
<option value="">小本解说</option>
<option value="">大海解说</option>
<option value="">薄海纸鱼</option>
</optgroup>
</select>
</p>
```（三）textarea元素
**可替换元素**
文本域，多行文本框
```html
请填写简介：
<textarea cols="30" rows="10"></textarea>
<textarea style="width:500px;height:300px"></textarea>
```
（四） 按钮元素
button元素
type属性：reset 、submit、button 默认是提交(submit)按钮
```html
<button>这是一个按钮</button>
<button type="button">这是第二个按钮</button>
```button按钮可以加图片
```html
<button>
<img src=".//图片/维尼.jpg" alt="">
<p>Lorem, ipsum dolor.</p>
</button>
```（五）表单状态
- readonly属性：布尔属性，表示是否只读，不会改变表单显示样式
```html
<p>
<input type="text" value="aaaa" readonly>
</p>
```- disabled属性：布尔属性，表示是否禁用，会改变表单显示样式
```html
<p>
用户姓名：
<input disabled type="text" value="李婉如">
</p>
```（六） 配合表单元素的其他元素
（1）label元素
普通元素 通常配合单选和多选框
- 显示关联
可以通过for属性让label元素关联某一个表单元素，
for属性书写表单元素id的值
点击文字也可以选中按钮
```html
<p>
请选择性别：
<input id="radmale" name="gender" type="radio">
<label for="radmale">男</label>
<input id="radfemale" name="gender" type="radio">
<label for="radfemale">女</label>
</p>
```- 隐式关联
```html
<p>
<label>
<input name="gender" type="radio">
男
</label>
<label>
<input name="gender" type="radio">
女
</label>
</p>
```（2）datalist元素
数据列表
该元素本身不会显示到页面，通常用于和普通文本框关联配合使用
```html
<p>
请输入你常用的浏览器
<input list="useragent" type="text">
</p>
<datalist id="useragent">
<option value="Chrome">谷歌浏览器</option>
<option value="IE">IE浏览器</option>
<option value="Opera">欧朋浏览器</option>
<option value="Safari">谷歌浏览器</option>
</datalist>
```（3）form元素
**form元素对开发静态页面没有什么意义**
通常情况下，会将整个表单元素放置form元素的内部
作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。
```html
<form action="https://www.baidu.com" method="get">
<p>
账号：
<input name="loginid" type="text">
</p>
<p>
密码：
<input name="loginpwd" type="password">
</p>
<button type="submit">提交</button>
</form>
```
（4）fieldset元素
表单分组
```html
<div>
<h1>
修改用户信息
</h1>
<fieldset>
<legend>账号信息</legend>
<p>
用户账号：
<input type="text">
</p>
<p>
用户密码：
<input type="password">
</p>
</fieldset>
<fieldset>
<legend>用户基本信息</legend>
<p>
用户姓名：
<input type="text">
</p>
<p>
城市：
<select name="" id="">
<option value="">Lorem.</option>
<option value="">Assumenda.</option>
<option value="">Rem!</option>
<option value="">Quos!</option>
<option value="">Aut.</option>
</select>
</p>
</fieldset>
<button>提交修改</button>
</div>
```
2382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
