css
浮生666
只为代码更简洁,向更好,更快的方向发展。
展开
-
vue手写轮播图
代码如下:<!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, initial-scale=1.0"> <title>Docu原创 2021-11-05 17:06:08 · 805 阅读 · 0 评论 -
pc端中间内容1200,宽度减少,主题内容左右留白,横向滚动展示主体内容如何实现?
效果如下图:代码如下:<!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, initial-scale=1.0"> <title&原创 2021-11-05 10:57:09 · 280 阅读 · 0 评论 -
vue rem自适应布局如何实现?
找到main.js,最下方加上如下代码即可实现(页面中写代码时把设计稿除以100即可,例如:100px就是1rem):;(function(win) { var tid; function refreshRem() { let designSize = 1920; // 设计图尺寸,如果是移动端改为750 let html = document.documentElement; let wW = html.clientWidth;// 窗口宽度 let r原创 2021-09-26 19:53:41 · 444 阅读 · 0 评论 -
vue 项目中 sass 如何复用?
前言:vue项目中,我们在使用scss编写代码的时候,有些时候可能会有很多样式代码是重复的,这个时候我们可以把公共的部分提取出来,文件结构如下图:步骤1:在assets目录下新建css目录,存放css资源,在css目录下新建styles.scss 文件,编写代码如下:@mixin publicCss($width,$height){ //publicCss是css方法; $width和$height是入参变量,动态变化 .childBox { > div {原创 2021-09-23 17:01:28 · 709 阅读 · 0 评论 -
display: inline-flex的妙用以及和display: flex 的区别是什么?
有时候我们使用了display: flex属性后,子元素横向排列,你可能会发现如下图现象:父级元素不设置宽度,背景宽度默认100%,如果这时想让父级元素随着子元素宽度自适应,怎么处理?接下来,上代码:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> .wrap { display: flex;原创 2021-09-17 14:00:17 · 7067 阅读 · 0 评论 -
svg图标如何修改大小?
//css中写入如下代码,更改宽高即可 .svg-icon { width: 2em; height: 2em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }原创 2021-09-13 14:14:48 · 10601 阅读 · 0 评论