一:动画
-
transition
transition: all 1s linear; -
兄弟元素用
+连接.box:hover+.box1 -
多个元素用
,h1,p
二：蒙版,模态框
举例：
<style>
.box{
width: 300px;
height: 300px;
position: relative;
background-image: url('../img/12.jpg');
background-size: 100% 100%;
height: 300px;
/* 超出部分隐藏 */
overflow: hidden;
}
.box1{
position: absolute;
background-color: rgba(110,123,123, 0.8);
width: 300px;
height: 100px;
bottom: 0;
}
.box:hover>.box1{
/* display: none; */
bottom: -100px;
/* 动画 */
transition: all 1s linear;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
三：表格（table）
-
table:定义一个表格，表格元素最外层的元素。
-
th：表头加粗
-
tr：表示一行
-
td：表示一个单元格
- ：表示表格的标题
-
thead tbody tfoot 表示表格的头部，中部和尾部，一般可以省略（但是在设置css中必须写）
-
表格属性
/* 设置边框 */ border: 1px solid; /* 边框塌陷 */ border-collapse: collapse; -
举例表格：
<style> table,td,th{ /* 设置边框 */ border: 1px solid; /* 边框塌陷 */ border-collapse: collapse; } table>tbody>tr>td{ font-size: 30px; } </style> <table> <caption>表格标题</caption> <!-- 头部 --> <!-- <thead> --> <tr> <th>性别</th> <th>年龄</th> <th>性别</th> </tr> <!-- </thead> --> <!-- 身体 --> <!-- <tbody> --> <tr> <td>小瓜</td> <td>18</td> <td>男</td> </tr> <!-- </tbody> --> <!-- 脚部 --> <!-- <tfoot> --> <!-- </tfoot> --> </table> -
<td rowspan="2">纵向合并</td>合并哪个就把多余的哪个删了 -
<td colspan="2">横向合并</td>
四：表单（from）
-
表单的属性
- action：数据提交的地址
- method：提交的方法（get和post）
- name：表单的名字
-
文本框
用户输入的必须写name，用户选择的必须写name和value
-
文本框的属性
<input type="text" name="" id="" disabled value="禁用">-
type:类型
<!-- type:文本框类型 text：文本 password:密码 email:邮件 tel:电话 color:颜色 date：日期 range：滑块 file:提交文件 button:普通按钮 submit：提交按钮 radio：单选框 chexkbox：复选框 reset：重置按钮 hidden:隐藏表单 -->帐号：<input type="text" placeholder="请输入...."> <!-- <br> 换行 --> <br> 密码：<input type="password" placeholder="请输入...." maxlength="6"> <!-- maxlength:限制最大长度 --> <!-- 新增表单控件 --> <!-- 电话 --> <input type="tel" name="" id="" placeholder="电话...."> <!-- 邮件 --> <input type="email" name="" id="" placeholder="邮件..."> <!-- 颜色 --> <input type="color" name="" id=""> <!-- 日期 --> <input type="date" name="" id=""> <!-- 滑块 --> <input type="range" name="" id=""> <!-- 提交文件 --> <input type="file"> <!-- 缩进：text-indent: 5px; /* 规定边框的样式 */ outline-style: none; --> -
placeholder:提示信息
-
value:获取的值
-
maxlength:限制最大长度
-
disabled ：禁用属性，只能看点不动
<input type="text" name="" id="" disabled value="禁用"> -
-
-
单选框
<!-- 单选框 快捷键input:radio 通过相同的name实现单选 --> <!-- 通过label标签绑定id来实现点击文字也可以选中 --> 性别： <label for="man">男</label> <input type="radio" name="sex" id="man"> <label for="female">女</label> <input type="radio" name="sex" id="female"> -
多选框
<!-- 多选框 --> <!-- 标志性属性（特殊属性） 属性名与属性值相同 --> <!-- checked：默认选中 --> 王者荣耀 <input type="checkbox" name="" id="" checked> 和平金鹰 <input type="checkbox" name="" id=""> 第五人格 <input type="checkbox" name="" id=""> 英雄联盟 <input type="checkbox" name="" id=""> -
下拉列表
<!-- 下拉列表 默认选中：selected multiple：加上多选，不加单选 --> <!-- 下拉列表的分组：<optgroup></optgroup> --> 地址： <select name="" id=""> <optgroup label="吃辣"> <option value="chengdu">成都</option> <option value="chengdu">成都</option> </optgroup> <optgroup label="不吃辣"> <option value="chengdu" selected>成都</option> <option value="chengdu">成都</option> </optgroup> </select> -
多行文本框
<!-- 多行文本框 cols:横 rows:纵 resize: none:固定多行文本 --> 多行文本框：<br> <textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea> -
按钮类型
<!-- 单纯按钮 --> <input type="button" value="按钮"> <!-- 提交按钮 --> <input type="submit" value="提交按钮"> <!-- 具有提交的功能 --> <button>按钮</button> <!-- 重置按钮 只能清除用户自己写的东西，不能清除value的值 重置按钮的作用：返回默认值 --> <input type="reset" value="重置"> -
get和post的区别
get：提交的数据会在地址栏里显示，（但是必须在input标签里面写name才会在）
post：不会显示在地址栏里。
151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
