1.精灵图;图片整合技术 称之为css精灵图或者是雪碧图
1.将导航背景图片,按钮背景图片按照规律进行合并成一张背景图片,即多张图片合成一张被禁图片,来实现背景图的定位
作用:通过整合图片可以减少图片的体积;
通过图片整合来减少对服务器的请求次数,从而提高加载速度
每次都向服务器请求图片,有多少张,请求多少次。使用精灵图之后可请求一次即可
2.隐藏内容两个方法:display:none 和visibility:hidden
区别:display:none 不占位隐藏 摸不着;
visibility:hidden 占着位置 看不见但是摸得着
表单进阶:
1.单选框 type=“radio”
案例:
<div>
<input type="radio" name="aa">非常满意
</div>
<div>
<input type="radio" name="aa">很满意
</div>
radio出现单选框 记住name作用是让这一组只能选择一个
2.下拉菜单select 和option
select name="" id="">
<option value="">辽宁</option>
<option value="">河北</option>
<option value="">河南</option>
select支持的属性:size、multiple
size 支持同时显示几个 例如<select size="3">
multiple 支持多选
3.文本域 (支持多行输入)textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
cols输入列数 row行数 一般不设置,如果真的要设置高度用css设置
<textarea name="" id="" placeholder="请输入" >提前设置好的value</textarea>
placeholder 预输入 提示文字;
注意:空格或者回车问题
.textarea{
width: 500px;
height: 500px;
resize: vertical;
}
resize重新设置大小
默认值both 什么方向都可以拉升
vertical只可垂直方向可以拉伸
horizon只可水平方向拉伸
none 什么方向都不可以拉伸
4.字段集fieldset
<fieldset>
<legend>选择性别</legend>
<input type="radio">男
<br>
<input type="radio">女
</fieldset>
legend 是左上角悬浮的字 可以进行说明
5.表单剩余特性
表格增强属性
<form action="">
<input type="属性" name="属性名"> /*不加属性名的话 提交不了 */
<input type="submit">
</form>
form默认是post方式提交
属性:
颜色color : <input type="color" name="color">
邮箱email :<input type="email" name="email">
url网址(完整地址):<input type="url">
电话号码:<input type="tel">
滑块效果:<input type="range" name="range" min="100" max="200" value="100" step="10">可以设置范围 value设置初始值 step步长
数字类型:<input type="number" min="5" max="10" step="2" value="5" name="age">
搜索:<input type="search"><!-- 增加个快速删除效果 -->
日历选择:<input type="date">
月份:<input type="month">