
css
文章平均质量分 79
css学习
陌上烟雨寒
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
渐变条纹进度条的实现
简单来说就两个div,内层div用width体现进度,然后修改内层div背景色就可以改变进度条颜色了。看起来很花哨,但是实现的思路很简单,就是在白色的渐变条纹上,再叠加一层有透明度的渐变背景。如果有小伙伴想自己完全手写一个其实也很简单,可以下看一下,view-ui进度条组件的结构;因为项目本身引入了view-ui,所以就在view-ui的基础上修改样式实现了。上图我实现的效果,内层的进度条实现了渐变条纹背景;原创 2024-12-25 14:16:37 · 385 阅读 · 0 评论 -
css学习笔记-(自用)
视频总结CSS选择器1.标签选择器什么是标签选择器?作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性格式:标签名称{ 属性:值;}注意点:标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签标签选择器无论标签藏得多深都能选中只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)2.id选择器什么是id选择器?作用: 根据指定的id名称找到对应的标签, 然后设置属性格式:#i原创 2020-08-26 09:43:04 · 750 阅读 · 1 评论 -
css选择器总结
css选择器原创 2022-10-17 17:05:49 · 270 阅读 · 0 评论 -
弹性盒 flex
弹性盒主轴(main axis) :伸缩容器的主轴,伸缩项目主要沿着这条轴进行排列布局。小心,它不一定是水平的; 这主要取决于“justify-项content”属性(详细见下文)主轴起点(main-start) 和主轴终点( main-end)x:伸缩项目放置在伸缩容器内从主轴起点(main-start) 向主轴终点(main-start) 方向。主轴尺寸(mainsize):伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。伸缩项目主要的大小属性要么是宽度,要么是高度属性,由哪一个对着主轴方向原创 2020-06-07 16:10:48 · 186 阅读 · 0 评论 -
移动端布局 px,em,rem
PXpx 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。EMem 是基于基数(比如:1.5em)来计算出来的相对字体大小。em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。EM特点em的值并不是固定的;em会继承父级元素的字体大小。当父元素的基数改变时,em的大小也会发生改变代码: <style> .box { ..原创 2020-06-07 19:52:41 · 373 阅读 · 0 评论 -
CSS 编码技巧和Emmet 语法介绍
CSS 编码技巧DRY 全称:Don’t Repeat Yourself (摘自wikipedia),是指编程过程中不写重复代码,将能够公共的部分抽象出来,封装成工具类或者用“abstraction”类来抽象公有的东西,降低代码的耦合性,这样不仅提高代码的灵活性、健壮性以及可读性,也方便后期的维护或者修改。尽量减少代码重复在软件开发中,保持代码的 DRY 和可维护性是最大的挑战之一,而这句话对 CSS 也是适用的。在实践中,代码可维护性的最大要素是尽量减少改动时要编辑的地方。举例来说,如果在放大一个原创 2021-08-27 10:05:53 · 475 阅读 · 0 评论 -
css颜色的表示
2.10.3 颜色值颜色名(如 red)十六进制颜色( #RRGGBB 或#RGB)前两位:红色,中间两位:绿色,后两位:蓝色。纯红色是#ff0000,纯绿色是#00ff00,而纯蓝色是#0000ff。RGB 颜色值( R, G , B)rgb(r, g, b)RGB 百分比值( R%, G%, B%)HSL (色相, 饱和度%, 亮度%) HSL(0,0%,0%)红: 0 橙: 35 黄: 60 绿: 125 蓝: 230 靛: 280 紫: 305Alpha 通道R原创 2020-08-12 08:42:59 · 386 阅读 · 0 评论 -
css浏览器前缀兼容性写法
https://www.cnblogs.com/duyingxuan/p/6517933.html原创 2020-08-26 09:44:20 · 522 阅读 · 0 评论 -
弹性盒-圣杯布局
效果图:实现方式:下面代码中关于html,body{height:100%},看不太懂的可以参考 https://blog.youkuaiyun.com/javaloveiphone/article/details/51098972 <style> * { margin: 0; padding: 0; } body, html { height:原创 2020-06-07 17:11:47 · 169 阅读 · 0 评论 -
一个通用的网页布局,模仿Lodash 中文文档样式
不知道怎么突然看到这个网站就觉得它的布局很神奇,因为自己之前想要做一个这样的布局,废了九牛二虎之力才实现并且代码比较繁琐,所以好好学习借鉴了一下现在来介绍一下整个布局好的效果首先看到的效果是这样的,分为头部和中间,中间的部分随着窗口大小而自适应高度。左侧的菜单可以滚动,右边是文章,可以滚动浏览文章滚动到底部时可以看到footer第一步:上中下布局通过flex实现改变主轴方向,设置中间部分 flex:1 0 auto;给头部添加粘性布局,并设置一个高度60px第二部:中间部分使用fl原创 2021-05-08 10:10:53 · 216 阅读 · 1 评论