CSS
css
一键写代码
这个作者很懒,什么都没留下…
展开
-
多种隐藏滚动条但是依然可以滚动实现方式
需求描述:经常会遇到,不显示滚动条,但是鼠标滚轮上去可以滚动,或是在移动端,不显示滚动条,手指可以滑动内容。方法一: iscroll插件方法二:通过固定宽度样式将滚动条给隐藏起来。chrom 和ie 正常使用。<div class="outer-container"> <div class="inner-container"> ...... </div></div>// css.outer-container{ .原创 2021-05-27 10:50:56 · 7730 阅读 · 0 评论 -
css实现点击元素,改变背景色
可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus譬如实现一个div鼠标点击时改变背景色,<div class="my-demo">可以摸我</div>添加样式:.my-demo:active { background-color: red;}:focus选择器用于选取获得焦点的元素。仅接收键盘事件或其他用户输入的元素允许 focus的 选择器。注意::active,元素被点击时变色,但颜色在点击后消失;:focus, 元素原创 2020-05-12 17:18:21 · 24512 阅读 · 0 评论 -
css遇到的坑:一行文字内容没有填满,就跑去下一行去了。看着很不舒服。怎么办?
问题的问题在我的外层div设置pading值,或是pading-right值后,内部的文字内容换行样式看起来很奇葩。类似这样的,一行文字内容没有填满,就自动换行了。解决办法1:padding-right的值捣鬼。外壳的div属性,不要设置pading-right的值,或是设置为0就可以了。这个办法不是很好,不推荐。不喜欢,不舒服,不爽啊。解决办法2:word-break: break-...原创 2020-04-25 10:48:42 · 6807 阅读 · 2 评论 -
移动端1px解决方案
1、使用伪类 + transform<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-...原创 2020-04-07 17:47:54 · 209 阅读 · 0 评论 -
常见的网页布局解决方案
后台管理系统布局一、顶部固定,左侧导航栏,右侧main区域左侧导航栏内容超出,出现滚动条,右侧内容,背景色全屏铺满,内容超出,出现滚动条。a.左侧可以绝对定位,main区域通过margin-left来隔开,高度通过vh单位来实现。b.侧边栏可以浮动代码参考:<!DOCTYPE html><html lang="en"><head> <...原创 2020-03-18 15:24:33 · 210 阅读 · 0 评论 -
解决在sass中使用calc不能包含变量的问题
在sass中使用calc,如果calc中包含一个变量,不会产生效果$sideBarWidth = 200px;.navbar {width: calc(100% - $sideBarWidth);}如何解决呢? 要想在calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable}).navbar {width: calc(100% - #{$sideBarWid...原创 2019-12-23 10:53:56 · 1776 阅读 · 0 评论 -
在vue-cli3项目中使用vuetify
1、先按cli3.0初始化一个项目vue create 项目名创建完成后。2、vue add vuetify这个命令来添加vuetify这个插件。这个时候,引入vuetify相关的东西这些全部都已经完成了,不用再安装相关的包。直接npm run serve运行就可以看到带有vuetify样式的效果页面了。...原创 2019-12-19 22:06:21 · 2122 阅读 · 0 评论 -
前端动画插件
10款好用的前端动画插件: https://www.jianshu.com/p/1e4267912e1b原创 2019-12-05 12:00:57 · 314 阅读 · 0 评论 -
vue项目中实现文字滚动(跑马灯)效果——公告滚动播放
项目需求:系统公告,要从右忘左循环播放的牛皮广告效果。实现:方案一:使用定时器和CSS3的过渡属性来实现。<template> <div class="notice-card-wrapper"> <div id="message-wrap" ref="out" class="message"> <div id=...原创 2019-11-14 10:07:37 · 13894 阅读 · 0 评论 -
SCSS快速入门学习笔记
1、变量$nav-color: #F90;nav { $width: 100px; width: $width; color: $nav-color;}//编译后nav { width: 100px; color: #F90;}2、嵌套#content { article { h1 { color: #333 } } aside { b...原创 2019-09-26 19:17:20 · 210 阅读 · 0 评论 -
div中的img元素水平垂直居中
HTML结构<div><img src="xxx.jpg" alt=" "></img></div>1、将div设置为display为table-cell,水平居中设置text-align为center,垂直居中设置为vertical-align为middle<style type="text/css">*{margin: 0;...原创 2019-09-25 10:19:49 · 843 阅读 · 1 评论