随笔分类 -  CSS

echart 详细
摘要：加载图表 //基于准备好的dom，初始化echarts实例 const echarts_dom: any = ref(); var myChart: any; let echartNull: any = null; if (myChart != null && myChart != "" && my 阅读全文
posted @ 2023-12-01 16:11 JaneLifeVlog 阅读(53) 评论(0) 推荐(0)
点击tab跳转时 顺滑切换
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2022-02-18 17:58 JaneLifeVlog 阅读(83) 评论(0) 推荐(0)
css 背景 弧度效果--卡片样式
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文
posted @ 2021-11-23 10:50 JaneLifeVlog 阅读(1080) 评论(0) 推荐(0)
二级导航
摘要：html <style> .header{height: 100px;background-color: var(--header-bg);} .head_logo {width: 200px;height: auto;} .fixed_top{position: fixed;top: 0;righ 阅读全文
posted @ 2021-01-26 10:53 JaneLifeVlog 阅读(153) 评论(0) 推荐(0)
暗黑模式 颜色色板生成
摘要：网址：https://ant.design/docs/spec/dark-cn 阅读全文
posted @ 2021-01-05 10:48 JaneLifeVlog 阅读(389) 评论(0) 推荐(0)
CSS -- media响应式布局
摘要：用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面 @media (min-width: 1024px){ /*>=1024的设备*/ body{font-size: 18px} } @media (min-width: 1100px) { / 阅读全文
posted @ 2020-12-11 11:01 JaneLifeVlog 阅读(126) 评论(0) 推荐(0)
CSS -- grid布局
摘要：设为网格布局以后，容器子元素（项目）的 float、 display: inline-block、 display: table-cell、 vertical-align和column-等设置都将失效。 基本布局 display: grid; 行内布局（此时容器为行内元素） display: inl 阅读全文
posted @ 2020-12-10 16:43 JaneLifeVlog 阅读(92) 评论(0) 推荐(0)
模糊 css
摘要：文字 color: transparent; text-shadow: #111 0 0 5px; 图片 filter: blur(10px); 阅读全文
posted @ 2020-12-07 09:52 JaneLifeVlog 阅读(58) 评论(0) 推荐(0)
前端规范文档
摘要：HTML规范 1.给 a 标签加上title属性 2.a 标签的href属性必须写上链接地址，暂无的加上 javascript:; 3.非本专题的页面间跳转，采用打开新窗口模式：target="_blank" 属性值 1.元素属性值使用双引号语法 <input type="radio" name=" 阅读全文
posted @ 2020-11-25 09:51 JaneLifeVlog 阅读(253) 评论(0) 推荐(0)
css变量
摘要：全局使用 <p class="test_aa">全局使用的文字</p> css：:root{--red_color:red;} .test_aa{color:var(--red_color)} 局部使用 <p class="test_bb">局部使用的文字</p> css：.test_bb{--re 阅读全文
posted @ 2020-11-12 15:00 JaneLifeVlog 阅读(64) 评论(0) 推荐(0)
轮播图
摘要：<div id="flash"> <a href="javascript:void(0)" id="prev"><img src="../images/left_icon.png" alt=""></a> <a href="javascript:void(0)" id="next"><img src 阅读全文
posted @ 2020-11-10 17:06 JaneLifeVlog 阅读(45) 评论(0) 推荐(0)
移动端适配
摘要：1px边框的问题 伪类 + transform：基于media查询判断不同的设备像素比对线条进行缩放 .border_1px:before{ content: ''; position: absolute; top: 0; height: 1px; width: 100%; background-c 阅读全文
posted @ 2020-11-05 16:00 JaneLifeVlog 阅读(87) 评论(0) 推荐(0)
css进阶(一)
摘要：<style> .lists {display: flex;justify-content: center;} .box {width: 100px;height: 100px;transition: all 0.3s;} .box ~ .box {margin-left: 15px;} .box 阅读全文
posted @ 2020-11-02 15:24 JaneLifeVlog 阅读(46) 评论(0) 推荐(0)
IOS 安卓的兼容问题
摘要：meta用法 实例： <!-- 声明编码格式 --> <meta charset="utf-8"> <!-- 自适应手机屏幕适配：页面宽度为设备屏幕宽度width=device-width、用户是否可以调整缩放比例user-scalable=no 初始的缩放比例initial-scale=1.0、最 阅读全文
posted @ 2020-11-02 15:03 JaneLifeVlog
移动端初始化样式表
摘要：body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, 阅读全文
posted @ 2020-11-02 15:01 JaneLifeVlog 阅读(306) 评论(0) 推荐(0)