06 2021 档案

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 贾正直 阅读(134) 评论(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 贾正直 阅读(53) 评论(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 贾正直 阅读(106) 评论(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 贾正直 阅读(304) 评论(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)
vscode设置
摘要：保存时自动格式化代码 阅读全文
posted @ 2021-06-23 11:35 贾正直 阅读(54) 评论(0) 推荐(0)
iframe
摘要：Web前端之iframe详解 - 滥好人 - 博客园 (cnblogs.com) 阅读全文
posted @ 2021-06-22 16:22 贾正直 阅读(19) 评论(0) 推荐(0)
colgroup
摘要：<table border="1px" width="100%"> <!-- 设置每一列样式 --> <colgroup> <col style="background-color: green;"> <!-- 横跨两列设置背景 --> <col span="2" style="background 阅读全文
posted @ 2021-06-18 21:03 贾正直 阅读(175) 评论(0) 推荐(0)
picture
摘要：<picture> <!-- 屏幕宽度不超过600px显示2.jpg 不超过900px显示3.jpg 否则显示1.jpg --> <source srcset="2.jpg" media="(max-width: 600px)"> <source srcset="3.jpg" media="(max 阅读全文
posted @ 2021-06-18 20:21 贾正直 阅读(149) 评论(0) 推荐(0)
head子元素
摘要：<!-- 页面宽度大于600px才引入desktop样式表 --> <link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> <!-- 引入图标 --> <link rel="shortcut i 阅读全文
posted @ 2021-06-18 17:14 贾正直 阅读(34) 评论(0) 推荐(0)
form
摘要：<form action="video.html" method="get"> <div> <label for="name">用户名：</label> <input type="text" id="name" name="user_name" /> </div> <div> <label for= 阅读全文
posted @ 2021-06-18 16:38 贾正直 阅读(847) 评论(0) 推荐(0)
table
摘要：<body> <table id="table1"> <caption>hello table</caption> <thead> <tr> <!-- 跨列 --> <th colspan="2">The table header</th> </tr> </thead> <tbody> <tr> < 阅读全文
posted @ 2021-06-18 16:22 贾正直 阅读(175) 评论(0) 推荐(0)
html元素
摘要：块级元素 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements 给limakilo发邮件抄送limakilo2020主题为this is the subject <a href="mailto:limakilo@ 阅读全文
posted @ 2021-06-17 20:23 贾正直 阅读(45) 评论(0) 推荐(0)
vscode主题
摘要：更换预览主题 1 Atom One Dark Theme 2 Darcula Theme 3 tokyo night 4 tokyo night stom 5 tokyo night light 6 abyss 7 bear theme 阅读全文
posted @ 2021-06-16 20:38 贾正直 阅读(165) 评论(0) 推荐(0)
git命令
摘要：生成公钥 ssh-keygen.exe -C "limakilo@2020@163.com" 查看公钥 cat ~/.ssh/id_rsa.pub git小乌龟设置 ssh.exe命令 git查看提交记录 git reflog git回退到某个版本 git reset --hard 8500b51 阅读全文
posted @ 2021-06-16 19:51 贾正直 阅读(41) 评论(0) 推荐(0)
vscode快捷键及字体设置
摘要：代码格式化 Shift+Alt+F 设置字体大小 阅读全文
posted @ 2021-06-16 19:43 贾正直 阅读(743) 评论(0) 推荐(0)