目录
一、CSS三角的使用
1.CSS三角意义:
网页中常见的一些三角形使用CSS直接画出来就可以,不必做成图片或者字体图标。
2.CSS三角的具体使用场景:
对话框指向箭头、下拉提示框、消息提示框......
3.CSS三角的原理:
当一个盒子的宽和高都为0,但它却拥有边框,就会出现下面这种情况 ↓(附代码)
因此我们可以推知:想要获得三角形只需要把剩下三个边框都设置为透明颜色即可
( ps:可以把边框设为不同粗细,会出现不同形状的三角形 ↓ )
4.CSS三角的具体实现(附代码):
注意不要忘记 “ 子绝父相 ” 的定位 !!
5.用CSS三角实现右对话框:
(1)基本原理:把三角形装进大盒子里,用定位关系组合在一起。
(2)具体实现:
(3)效果展示:
二、 用户界面 —— 鼠标样式 cursor
1.鼠标样式的标签:
2.鼠标样式的实现:
3.各种鼠标样式的效果:
default :默认小白
pointer :小手
move :移动
text :文本
not-allowed :禁止
三、用户界面 —— 取消表单轮廓
1. 原理:
给表单添加 outline:0;或者 outline:none;样式之后,就可以去掉默认的蓝色边框。
2.具体实现:
3.效果展示:
未去掉边框 ↓ (好吧我的默认边框是黑色的)
去掉边框后 ↓
四、用户界面 —— 防止拖拽文本域 resize
1. 应用场景:
文本域直接设置之后是可以随意拖动的,但是实际开发中,我们文本域右下角是不可以拖拽的。
2.具体实现:
3.注意事项:
(1)文本域也有默认的边框,实际运用中也要取消表单轮廓
(2)注意要把文本域 textarea 写在一行上,因为如果代码分行写,即使其中没有内容,实际文本域里也会出现大块空白区域(如图 ↓ )
(3)如果想在光标前面留出少许空格,可以用 padding
五、vertical-align 实现行内块和文字垂直对齐
1.应用场景:
经常用于设置图片或者表单(行内块元素)和文字垂直对齐。
2.官方解释:
vertical-align 用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。
3.语法:
vertical-align :baseline | top | middle | bottom
4.不同属性标签:
5.不同位置的线的定义:
6.图片与文字垂直居中对齐的具体实现:
六、解决图片底侧空白缝隙的方案
1.出现原因:
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐。
2.主要解决方法:
(1)给图片添加 vertical-align : middle | top | bottom 等(提倡使用)
(2)把图片转换为块级元素 display : block
(不推荐使用,因为块级元素独占一行,容易影响页面布局 ↓ )
七、单行文字溢出用省略号显示
1.默认模式:
默认是文字显示不开就自动换行(代码表示是 white-space: normal;)
2.具体实现三步骤:
(1)首先强制文字在一行内显示
(2)把溢出的文字部分隐藏
(3)把文字溢出的部分用省略号代替
八、多行文字溢出用省略号显示
1.前提:
此方法有较大兼容性问题,适合于 webKit 浏览器或移动端(移动端大部分是 webKit 内核),所以在有一些浏览器无法使用。
2.具体实现:
3.注意事项:
以上面的代码为例,想让整个框内的文字只显示2行之后是省略号,只需要改变盒子的高度即可。
4.建议:
更推荐让后台人员来做这个效果哈哈哈哈哈哈哈哈哈哈,因为后台人员可以设置显示多少个字,操作更简单。