实现箭头
原理： 定位两个三角形 （边框）
<style>
.box {
width: 50px;
height: 50px;
/* background-color: pink; */
position: relative;
margin-left: 100px;
margin-top: 100px;
}
/* 定位 黑色 */
.arrow::before {
content: '';
position: absolute;
left: 0;
top: 1px;
border-width:20px 20px 0px 20px;
border-style:solid;
border-color:#000 transparent transparent transparent;
}
/* 白色 */
.arrow::after {
content: '';
position: absolute;
left: 0;
top: 0px;
border-width:20px 20px 0px 20px;
border-style:solid;
border-color:#fff transparent transparent transparent;
}
</style>
</head>
<body>
<div class="box arrow"></div>
精灵图技术（sprites雪碧）
前端图片优化技巧之一
精灵图：多张小图拼合成一张大图
精灵图技术原理：用背景属性插入精灵图 ，用background-position属性移动图片的位置，把想要显示的图片部分显示在大小固定的盒子里
优缺点：
优点：
- 减少http请求次数 ，提高代码加载的速度
- 易替换整体风格
缺点：需要测量
文本溢出处理
文本溢出处理
单行文本溢出
实现方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图：
多行文本溢出
实现方法1：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow:ellipsis;
效果如图：
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
- 兼容性差
实现方法2：
兼容性比较好 伪元素…加在盒子末尾
.box2 {
position: relative;
width: 150px;
/* 高度是行高的倍数 显示几行就是几倍数 */
line-height: 30px;
height: 90px;
border: 1px solid red;
overflow: hidden;
}
.box2:after {
content: '...';
position: absolute;
right: 0px;
bottom:0;
padding-left: 20px;
}
<h3>方法2</h3>
<div class="box2">
海边度假穿搭指南！一件泳衣赚足回头率
海边度假穿搭指南！一件泳衣赚足回头率
海边度假穿搭指南！一件泳衣赚足回头率
海边度假穿搭指南！一件泳衣赚足回头率
海边度假穿搭指南！一件泳衣赚足回头率
海边度假穿搭指南！一件泳衣赚足回头率
</div>
day09
表单结构
作用：收集用户信息
表单：
作用： 用来收集用户信息；也叫 表单框（表单域form）
<form method=""></form>
action: 传给后端的地址
method: 传给后端的方法
GET： 从后端获取数据，数据量比较小，安全性比较低，速度较快
POST： 向后端发送数据，数据量大，安全性高，速度较慢
name: 表单的标识
表单控件:
在表单里面，绝大部分的表单控件都是input标签，通过type属性的不同来区分的，表单控件要写在form标签的里面, 不是独占一行的
文本框
<input type="text">
name:控件字段名字
value:用户输入的值
密码框
<input type="password">
name:控件字段名字
value:用户输入的值
提交按钮
<input type="submit">
value: 按钮里面的文字
没有value属性，默认是‘提交’两个字
一旦点击submit，就会将表单里面的内容通过method的方法提交给action的地址
重置按钮
<input type="reset">
value: 按钮里面的文字
只能清空当前form表单里面的内容
单选框
<input type="radio">
name： 给单选框分组的（相同name的单选框是一组的）
checked: 默认选中
disabled: 禁用状态
value: 发送给后端的值
多选框（复选框）
<input type="checkbox">
name: 给多选框分组（相同name的多选框是一组的）
checked: 默认选中
disabled: 禁用状态
value: 发送给后端的值
下拉菜单
<select> <option value="">131</option> <option value="">132</option></select>
value: 发送给后端的值
selected: 默认选中
多行文本框（文本域）
<textarea rows="" cols=""></textarea>
rows: 一共能显示多少行
cols: 一行能显示多少字（英文字母）
普通按钮
<button></button><input type="button">
get与post
\1. get是从服务器上获取数据，post是向服务器传送数据。
\2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML，HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
\3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
\4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
\5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
