随笔分类 -  css

vw开发
摘要：<style> /* vw等于屏幕视口宽度的1% */ div { background-color: aqua; /* 表示20%的视口宽度 */ width: 20vw; height: 20vw; } </style> </head> <body> <div class="test"></di 阅读全文
posted @ 2021-06-27 17:19 贾正直 阅读(45) 评论(0) 推荐(0)
栅格系统
摘要：<body> <div class="container"> <div class="row"> <div class="col-lg-3 col-xs-6">1</div> <div class="col-lg-3 col-xs-6">2</div> <div class="col-lg-3 co 阅读全文
posted @ 2021-06-27 16:46 贾正直 阅读(163) 评论(0) 推荐(0)
bootstrap入门
摘要：下载文件 起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com) 引入css <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css"> 引用 阅读全文
posted @ 2021-06-27 12:51 贾正直 阅读(41) 评论(0) 推荐(0)
less入门
摘要：@green:green; @size100:100px; // 安装easy less插件保存less会生成同名css文件 // 计算时有多个单位以第一个单位为主 // 计算空格 // 写为元素加& div{ background-color: @green; font-size: @size10 阅读全文
posted @ 2021-06-27 12:00 贾正直 阅读(38) 评论(0) 推荐(0)
css条件引入
摘要：屏幕上页面宽度小于500px时将jd.css引入页面中 <link rel="stylesheet" href="jd.css" media="screen and (max-width:500px)"> 阅读全文
posted @ 2021-06-27 11:01 贾正直 阅读(136) 评论(0) 推荐(0)
rem布局方式
摘要：<!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-06-27 10:53 贾正直 阅读(45) 评论(0) 推荐(0)
flex子元素属性
摘要：<style> div { display: flex; width: 100%; height: 500px; } span { width: 200px; height: 200px; background-color: aquamarine; } span:nth-child(2) { /* 阅读全文
posted @ 2021-06-27 09:33 贾正直 阅读(141) 评论(0) 推荐(0)
flex布局入门
摘要：<!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-06-27 09:07 贾正直 阅读(38) 评论(0) 推荐(0)
移动端开发流式布局
摘要：<style> section { margin: 0 auto; width: 100%; height: 500px; min-width: 600px; max-width: 1200px; } div:first-child { float: left; width: 50%; height 阅读全文
posted @ 2021-06-26 19:57 贾正直 阅读(48) 评论(0) 推荐(0)
css动画
摘要：<style> /* 定义名称为zhuan的动画 */ @keyframes zhuan { 0% { transform: translate(0, 0); } /* 水平移动 */ 30% { transform: translate(600px, 0); } /* 放大x，y 2倍*/ 50% 阅读全文
posted @ 2021-06-26 08:55 贾正直 阅读(54) 评论(0) 推荐(0)
css过渡效果
摘要：/* 为宽度设置过渡时间2s，延迟1s */ transition: width 2s ease 1s; 阅读全文
posted @ 2021-06-25 09:06 贾正直 阅读(99) 评论(0) 推荐(0)
icomoon图标引入
摘要：网址 IcoMoon App - Icon Font, SVG, PDF & PNG Generator 文件夹结构 复制style.css文件部分代码到目标html<style>中 @font-face { font-family: 'icomoon'; src: url('fonts/icomo 阅读全文
posted @ 2021-06-24 23:33 贾正直 阅读(107) 评论(0) 推荐(0)
京东初始化css
摘要：em, i { font-style: normal } * { margin: 0; padding: 0 } li { list-style: none } /* 图片后字体垂直于中部位置*/ img { border: 0; vertical-align: middle } /* 鼠标为指针样 阅读全文
posted @ 2021-06-24 21:51 贾正直 阅读(306) 评论(0) 推荐(0)
元素阴影
摘要：/* inset内部阴影,默认外部 */ box-shadow: 10px 10px 10px 10px greenyellow inset; 阅读全文
posted @ 2021-06-24 17:17 贾正直 阅读(52) 评论(0) 推荐(0)
css选择器权重
摘要： 阅读全文
posted @ 2021-06-24 08:18 贾正直 阅读(21) 评论(0) 推荐(0)