随笔分类 -  css奇技淫巧

主要记录工作学习中学到的css不常见的使用技巧
摘要:巧用css属性white-space展示文本写在前面的话 大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉,这的确大大的使得文本的排版更加美观了,也怎加了区域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式。那该如何展示出文本的内在格式呢?无外乎把不该去掉的空格展示出来,把不该合并的换行让它换行起来。 那么 阅读全文
posted @ 2022-11-23 12:58 七分暖 阅读(1267) 评论(0) 推荐(2) 编辑
摘要:CSS实现文字对齐效果总结在前端页面的编写中,往往会遇到对文字排版的处理,本篇文章旨在对文字排版进行总结,如文字的对齐方式,是否首行缩进等。 阅读全文
posted @ 2022-05-06 15:00 七分暖 阅读(408) 评论(0) 推荐(0) 编辑
摘要:纯css实现圆柱体-超简单!写在前面的话: 在日常的工作中遇到一个需求,需要用圆柱体来表现每个项目的比例,首先想到的会事使用echarts中的柱状图来表现,但是为了一个圆柱体引用那么庞大的js库有点不合时宜的味道。其次是想到使用canvas画布工具里封装一个小插件供系统使用,可是要百度啥的,目前俺还不是很能熟练使用canvas 阅读全文
posted @ 2021-08-04 23:46 七分暖 阅读(2763) 评论(0) 推荐(2) 编辑
摘要:jq滚动条插件perfect-scrollbar悬浮时,背景颜色透明样式写在前面的话: perfect-scrollbar是一个基于jquery的相对完美的滚动条插件,不过在具体使用中由于插件默认样式与系统的样式存在较大的出入这是需要修改到插件的样式。 诸如:悬浮的时候滚动条背景不是太美观,那么去掉会不会更好一点呢。 以下是去掉之后的结果,的确比之前好了一点 最后附将该 阅读全文
posted @ 2021-07-08 17:34 七分暖 阅读(283) 评论(0) 推荐(0) 编辑
摘要:使用CSS3实现椭圆动画效果写在前面的话: 有这样一个需求,在大屏中要实现几个球用椭圆形状的布局进行展示,展示的同时还要沿着椭圆轨道进行运动。经过 百度结合自身的思考之后给出了以下demo。 正文: 首先我们先写结构 <html> <head> <meta charset="utf-8"> <title></title> </ 阅读全文
posted @ 2020-11-28 12:19 七分暖 阅读(2833) 评论(0) 推荐(0) 编辑
摘要:/* 记住密码 默认样式修改 begin */input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -web 阅读全文
posted @ 2020-09-25 17:34 七分暖 阅读(684) 评论(0) 推荐(0) 编辑
摘要:写在前面的话: 从后端开发转到前端开发已经有一年有余,总结一下写静态页面的相关心得: 正文: 1.间距最好固定一边不要 margin又padding 自己不好计算也不利于后期修改。 2.一些页面没必要出现滚动条的不要出现,使用min-with或者max-with 可以有助于自适应。 3.使用图片占用 阅读全文
posted @ 2020-09-20 17:15 七分暖 阅读(174) 评论(0) 推荐(0) 编辑
摘要:使用css实现垂直居中的方法总结写在前面的话: 在编写html页面的时候最常考虑的就是应该是类的命名吧,其次就是该使用怎样的布局方式使得页面的适应性比较高。居中在页面布局中是最常用的布局之一了,根据度娘和本人开发经验总结出以下三种可用性比较高的居中方案,如有补充请在评论区留言指正。话不多说开搞! 正文 1.第一种: 使用 posi 阅读全文
posted @ 2020-08-11 15:46 七分暖 阅读(203) 评论(0) 推荐(0) 编辑
摘要:CSS图片加载优化方案写在前面的话: 图片在页面元素中相对是比较占用带宽的存在,那么优化图片往往能肉眼可见的提高页面加载的速度,以下总结的四种关于优化图片加载的方案。 CSSSprite 减少对服务器请求 SVGSprite 体积小,矢量 Iconfont 体积小,矢量,集成度高 Base64 减少对服务器请求 一.CS 阅读全文
posted @ 2020-03-06 10:13 七分暖 阅读(2082) 评论(0) 推荐(0) 编辑
摘要:HTML布局梳理布局是一个很艺术的话题,即使是相同的HTML文档结构,但加上不同的css样式就会呈现出不同的效果。接下来就来总结一下html常用的布局。 一、布局的分类: 根据页面板块分类: 页面的板块主要是根据栏目的行、列组合起来的,这里的行列组合是根据网页显示效果确定的,而不是HTML结构,如:单行版式,三行版 阅读全文
posted @ 2020-02-24 11:18 七分暖 阅读(1114) 评论(0) 推荐(0) 编辑

回到顶部
点击右上角即可分享
微信分享提示