19.界面样式就是更改一些哦用户操作样式，以便提高用户体验。例如：更改用户鼠标样式，表单的轮廓，阻止表单域拖拽等等。
(1)鼠标样式的更改：在想要改变的标签里边添加style=”cursor:属性值”属性，例如：
<li style="cursor: default;">小白</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: move;">移动</li>
<li style="cursor: text;">文本</li>
<li style="cursor: not-allowed;">禁止</li>
文字对应的属性值就是。
(2)取消表单轮廓和防止拖拽文本域：取消表单轮廓就是在相应的标签里添加ouline属性：
/* 取消表单轮廓 */
input{
outline: none;
}
防止拖拽文本域，在文本域标签里添加resize标签，例如：
/* 防止拖拽文本域resize */
textarea{
resize: none;
}
(3) .vertical-align属性应用:经常应用于设置图片或者表单（行内块元素）和文字垂直对齐：属性值的作用如下：
例如：
<style>
img{
vertical-align: bottom;
}
</style>
<body>
<img src="222.png" alt="">高高兴兴上学
</body>
效果图：
(4)图片底侧空白缝隙解决方案：每张图片默认的下边会出现一行空白，例如：
解决方案：主要应用给图片添加vertical-align：middel | top | bottom等。（提倡使用）
添加过后的效果：
(5)溢出文字省略号显示：例如：
<style>
div {
margin: 50px auto;
width: 80px;
height: 80px;
background-color: turquoise;
/* 自动换行，默认的值 */
/* white-space: normal; */
/* 强行一行内显示文本 */
white-space:nowrap;
/* 溢出的文字隐藏 */
overflow: hidden;
/* 超出的文字用省略号显示 */
text-overflow: ellipsis;
}
</style>
<body>
<div>好好学习天天向上</div>
</body>
效果图：
(6)常见的布局技巧：margin的负值应用（边框重叠的清除）：
一般情况：
ul li{
float: left;
list-style: none;
/* margin-left: -2px; */
width: 200px;
height: 100px;
border: 2px solid red;
line-height: 100px;
text-align: center;
}
<ul>
<li>大哥</li>
<li>大哥</li>
<li>大哥</li>
<li>大哥</li>
<li>大哥</li>
</ul>
效果图为
边框会出现重叠的效果。
如果把margin的值为负值，得到的效果为：
ul li{
float: left;
list-style: none;
margin-left: -2px;
width: 200px;
height: 100px;
border: 2px solid red;
line-height: 100px;
text-align: center;
}
效果图为：
(7)三角形的其他应用：直角三角形的应用：
div{
width: 0;
height: 0;
/* 上边框调大 */
border-top: solid 40px transparent;
border-left: royalblue solid 0px;
border-right: teal solid 20px;
/* 左下边框都为0 */
border-bottom: springgreen solid 0px;
}
效果图：
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
