
css
彭世瑜
要成为程序员的男人,个人主页:www.pengshiyu.com
-
原创 css:自定义浏览器中滚动条的样式
参数说明::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。:.2020-12-15 09:50:1949
0
-
原创 前端笔记:css3动画transition和animation
css3动画分类:帧动画过渡动画CSS3动画属性:transitionanimation常用属性transform动画库:swipervue-transitionsvganimate.csstransition过渡语法transition: property duration timing-function delay;属性名称property过渡时间duration时间函数timing-function延迟时间delay2、注意:displ2020-11-02 09:42:5970
0
-
原创 VSCode中使用Scss/Sass
下载扩展Live Sass Compiler点击VSCode下方的Watch Sass2020-10-31 21:50:15214
0
-
原创 display:box、display:flex实现多行文本垂直居中
统一的样式文字水平居中text-align: center;.box{ height: 200px; width: 200px; background-color: #DDDDDD; text-align: center; margin: 20px; padding: 0 20px;}1、单行文本垂直居中设置行高line-height ...2019-11-07 11:46:001191
0
-
原创 CSS去重叠边框
1.table去重叠边框table{ border-collapse:collapse;}2.非table去重叠边框只需要设置div的margin值为边框值的相反数就行div{ border:1px solid #333; margin-right:-1px; margin-bottom:-1px;}参考CSS去重叠边框...2019-10-30 16:23:05290
0
-
原创 Flex弹性盒子布局实现骰子6点
1、基础样式h2{ text-align: center;}.main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between;}.container{ display: flex; width: 320px; heigh...2019-09-28 11:29:141372
0
-
原创 简单理解float浮动
原本意义:实现文字环绕效果BFC Block formatting context块级格式化上下文具有包裹性属性display:inline-block/table-cellposition:absolute/fixed/stickyverflow:hidden/scroll破坏容器被破坏, 父元素高度塌陷display:noneposition:absolute/fixed/...2019-09-23 23:44:0594
0
-
原创 Less-CSS预处理语言快速入门
Less css预处理语言特性:变量、继承、运算、函数http://lesscss.cn/编译器1、koalahttp://koala-app.com/index-zh.htmlhttps://github.com/oklai/koala2、sublime插件less # 语法高亮less2css # 保存自动生成同名的css文件需要安装node环境+node...2019-08-10 17:06:48104
0
-
原创 前端:显示右上角hot字样
<style>.hot { vertical-align: super; color: red;}</style><span class="hot">hot</span>2018-09-14 16:08:171360
0
-
原创 css文件能加载但是没有生效
使用nginx+django部署项目的时候,为了提高加载速度,我将css,js,image等静态资源在nginx中配置了路径本地测试没有问题,代码提交线上就出问题了,出现了这么个情况:css文件能加载但是没有生效经过查找资料,大概从以下两个方面入手检查:1、考虑css文件引用是否正确2、考虑服务器nginx配置静态文件是否正确打开浏览器console,出现这么一句话Resource...2018-09-18 16:33:435578
3
-
原创 前端学习:css基本知识
css 层叠样式表作用: - 颜色 - 位置注释 /* 这是注释 */形式 - 内嵌样式 标签style - 内联样式 head style - 外联样式 单独文件选择器 - id选择器 # - class选择器 . - 标签选择器 - 层级选择器 空格隔开父-子 - 组合选择器 逗号隔开同级元素 ...2018-02-08 21:25:37190
0