前端--CSS
关注
分享
扫一扫
文章平均质量分 62
以CSS学习路线为线索，完善前端CSS内容，提升网页样式美观
fanfan_fxh
这个作者很懒，什么都没留下…
展开
-
如何通过CSS自定义改变单选框样式＜input type=“radio“＞
通过CSS自定义改变radio样式效果图：代码如下：复制即可使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini原创 2021-03-01 15:59:42 · 372 阅读 · 0 评论 -
CSS规范--CSS属性书写顺序和CSS初始化
CSS模块——多彩诗句（通过CSS复合选择器实现）一、问题描述二、总结三、标准代码四、我的代码一、问题描述请使用所学前端知识，通过HTML+CSS完成以下效果图展示。文本素材：沁园春·长沙【毛泽东】独立寒秋， 湘江北去，橘子洲头。看万山红遍，层林尽染， 漫江碧透，百舸争流。鹰击长空，鱼翔浅底，万类霜天竞自由。怅寥廓，问苍茫大地，谁主沉浮？携来百侣曾游，忆往昔峥嵘岁月稠。恰同学少年，风华正茂；书生意气，挥斥方遒。指点江山，激扬文字，粪土当年万户侯。曾记否，到中流击水，浪遏 飞舟转载 2021-01-30 14:05:40 · 256 阅读 · 0 评论 -
CSS position定位之static
CSS position定位详解一、static一、static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。忽略 top, bottom, left, right 或者 z-index 声明，解释如下：absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。fixed：生成绝对定位原创 2020-11-24 17:48:23 · 5512 阅读 · 1 评论 -
CSS position 定位之 Flex
CSS position 定位之 Flex一、Flex是什么Flex是Flexible Box的缩写，意为“弹性盒子” /*块内元素*/display：flex;/*行内元素*/display:inline-flex; 二、基本概念容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做.原创 2020-12-04 15:02:22 · 4116 阅读 · 0 评论 -
CSS position定位之relative和absolute
CSS position定位之static 一、relative 属性值relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。它必须搭配top、bottom、left、right这四个属性使用，用来指定偏移的方向和距离。必须注意的是在文本流中的位置依然存在。当父级、TRBL、padding组合作用时，relative元素具有以下属性：1). 如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样原创 2020-12-04 14:36:06 · 859 阅读 · 0 评论 -
CSS预处理器（框架）：Sass、less、Stylus
前言问题的引出。页面写完CSS，后期维护时一些css存在，但是标签的class=“”中已经删除的情况。这个css样式已经被废弃掉了。而解决这种情况，就要用到css框架。先来熟悉一下框架。一、CSS 预处理器是什么CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题。例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。二、语法/* style.scss 或者原创 2020-12-18 11:37:20 · 558 阅读 · 1 评论