css高阶技巧(2)

目录

三角形的应用

css用户界面样式

文本框轮廓线去除

禁止拖拽文本域(resize)

vertical-align属性应用

图片底部空白缝隙解决方案     

如何让溢出的文字以省略号的形式显示

常见的布局技巧

写在最后


 

三角形的应用

这个小技巧的使用在京东淘宝之类的平台都会使用到哦。

958c48f262d543abaebe13f34a9d930e.png

 

css用户界面样式

鼠标样式(cursor)

1.常用的五个鼠标样式:

e43b0aca94884f5b914b1a86a217c4fa.png

鼠标样式

                 03bb117ac83c42bc9e0fc1758a498bd3.png

文本框轮廓线去除

给表单添加outline: 0;或者outline: none;样式之后,就可以去掉默认的蓝色边框。

禁止拖拽文本域(resize)

                827fc4fcc6804d9492d72d98ae4d5e1e.png

vertical-align属性应用

常见属性:

a4d094da788d45f3932a5f85dc654f92.png

语法:vertical- align:baseline|top|middle|bottom

图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直剧中对齐了。

                a6cd14089d334b68980e892d262acb86.png

 

图片底部空白缝隙解决方案     

                66e674a9f10e42e0b1a7b86742f015e3.png

如何让溢出的文字以省略号的形式显示

满足条件:

  1. 强制一行内显示文本(white-space:nowarp;)默认的是normal自动换行

  2. 超出部分隐藏(overflow:hidden;)

  3. 文字用省略号代替超出的部分(text-overflow:ellipsis;)

1f79bb8526034050b3079fb4d49b52a9.png

1447a57f7ef14e91b8cd929849be5582.png

这样就可以以省略号的形式展现出来了。

注:多行文本溢出(多数适用于webkit浏览器或者是移动端浏览器,ie浏览器无效)

需要严格控制盒子的大小。

b21d91e710f04e2eb37af7d95f00364f.png

<style>
    div{text-overflow: ellipsis;
        /*弹性伸缩盒子模型显示 */
        display:-webkit-box;
        /*限制在一个块元素显示的文本的行数*/
        -webkit-line-clamp:2;
        /*设置或检索伸缩盒对象的子元素的排列方式 ↓垂直居中的怕列方式*/
        -webkit-box-orient: vertical ;
}
</style>

 

常见的布局技巧

  1. margin负值的运用

  2. 文字围绕浮动元素

  3. 行内块的巧妙运用

  4. css三角强化

css3 calc函数:

1.c40a10e27a234f0093ce2c941d8432aa.png

 

css3 不常用的图片的模糊处理:

611a29572815475eabfd663709a94246.png

写在最后

如果这篇文章对你有帮助那么就点一个大大的赞吧!

 f57178034b584b42aa4997869a4b9511.gif

 

✨原 创 不 易 , 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不 易,还希望各位大佬支持一下
点赞👍:您的赞赏是我前进的动力!
收藏⭐:您的支持我是创作的源泉!
评论✍:您的建议是我改进的良药!

山鱼🦈的个人社区:

欢迎大家加入我的个人社区—— 山鱼社区 💖💖如果对你有帮助的话希望三连下👍⭐✍支持一下博主🌊

 

 

 

 

 

 

  • 44
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 35
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 35
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aic山鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值