6.13一天知识总结
2024-05-24 02:22:55
1.过渡
<!DOCTYPE html>
<html>
<head><title>知识总结</title><meta charset="utf-8"><style type="text/css">div{width:100px;height:100px;background:red;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:1s;}div:hover{width:200px;}
</style>
</head>
<body>
<div></div>
</body>
</html>2动画
<!DOCTYPE html>
<html>
<head><title>知识总结</title><meta charset="utf-8"><style type="text/css">div{width:100px;height:100px;background:red;position:relative;animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;}@keyframes myfirst
{0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}
}</style>
</head>
<body>
<div></div>
</body>
</html>3多列
<!DOCTYPE html>
<html>
<head><title>知识总结</title><meta charset="utf-8"><style type="text/css">div{column-count: 6;column-fill: balance;column-gap: 40px;column-rule:2px outset blue;}</style>
</head>
<body>
<div>1.老公老公mua，左边一个mua，右边一个mua，嘴巴一个mua，老公老公抱抱，我要公主抱抱，飞起来的抱抱，转圈圈的抱抱! 2.像一棵海草海草 海草海草 随波飘摇 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它骇浪惊涛。 3.你问我为什么没对象？有才华的长得丑，长得帅的挣钱少，挣钱多的不顾家，太顾家的没出息，有出息的不浪漫，会浪漫的靠不住，实在是没法找！ 4.云云：师父我坚持不住啦 小涵：我心里一直有个梦 想去嵩山少林学武功 就像电影里帅气的超人 行侠仗义 飞檐走壁。 小扣： 师父你为何可以行如流水枪扎一线棍扫一片(你却)挥挥衣袖对我说(赶紧练功去) 小淑：练功必须顶大太阳(哼)晚上还要借月亮光(哈)一日不练十日空(哼哈) 小乐：习武先习德(哼)学艺先学礼(哈)我也心中牢记(哼哈哼) 倪虹洁：英雄台下十年功为台上一分钟 5.小哥哥，小哥哥，我给你一样东西好不好呀 这是长得好看的。 小哥哥，小哥哥，我给你个大嘴巴子好不好呀 这是长的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 1.老公老公mua，左边一个mua，右边一个mua，嘴巴一个mua，老公老公抱抱，我要公主抱抱，飞起来的抱抱，转圈圈的抱抱! 2.像一棵海草海草 海草海草 随波飘摇 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它骇浪惊涛。 3.你问我为什么没对象？有才华的长得丑，长得帅的挣钱少，挣钱多的不顾家，太顾家的没出息，有出息的不浪漫，会浪漫的靠不住，实在是没法找！ 4.云云：师父我坚持不住啦 小涵：我心里一直有个梦 想去嵩山少林学武功 就像电影里帅气的超人 行侠仗义 飞檐走壁。 小扣： 师父你为何可以行如流水枪扎一线棍扫一片(你却)挥挥衣袖对我说(赶紧练功去) 小淑：练功必须顶大太阳(哼)晚上还要借月亮光(哈)一日不练十日空(哼哈) 小乐：习武先习德(哼)学艺先学礼(哈)我也心中牢记(哼哈哼) 倪虹洁：英雄台下十年功为台上一分钟 5.小哥哥，小哥哥，我给你一样东西好不好呀 这是长得好看的。 小哥哥，小哥哥，我给你个大嘴巴子好不好呀 这是长的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 1.老公老公mua，左边一个mua，右边一个mua，嘴巴一个mua，老公老公抱抱，我要公主抱抱，飞起来的抱抱，转圈圈的抱抱! 2.像一棵海草海草 海草海草 随波飘摇 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它骇浪惊涛。 3.你问我为什么没对象？有才华的长得丑，长得帅的挣钱少，挣钱多的不顾家，太顾家的没出息，有出息的不浪漫，会浪漫的靠不住，实在是没法找！ 4.云云：师父我坚持不住啦 小涵：我心里一直有个梦 想去嵩山少林学武功 就像电影里帅气的超人 行侠仗义 飞檐走壁。 小扣： 师父你为何可以行如流水枪扎一线棍扫一片(你却)挥挥衣袖对我说(赶紧练功去) 小淑：练功必须顶大太阳(哼)晚上还要借月亮光(哈)一日不练十日空(哼哈) 小乐：习武先习德(哼)学艺先学礼(哈)我也心中牢记(哼哈哼) 倪虹洁：英雄台下十年功为台上一分钟 5.小哥哥，小哥哥，我给你一样东西好不好呀 这是长得好看的。 小哥哥，小哥哥，我给你个大嘴巴子好不好呀 这是长的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 </div>
</body>
</html>屏幕
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 80px;height: 80px;background: red;/* 1.resize:both 2.overflow: auto */resize: both;overflow: auto; outline: 2px solid black;outline-offset: 15px;}</style>
</head>
<body><div></div>
</body>
</html>图片边角
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {/* 左上角的x 左上角的Y值*/ border-radius: 20px 100px 20px 100px / 20px 100px 20px 100px;}</style>
</head>
<body><img src="./images/1.jpg" alt="">
</body>
</html>图片自适应 滤镜
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {max-width: 100%;height: auto;filter: blur(10px) grayscale(50%)}</style>
</head>
<body><img src="./images/4.jpg" alt=""><button>发红包</button>
</body>
</html>按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>button {height: 50px;background-color: #4CAF50;border: none;border-radius: 4px;color: white;cursor: pointer;/* 0px 0px 0px x y */}button:hover {transition: 0.3s;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); }</style>
</head>
<body><button>鼠标悬停后显示阴影</button>
</body>
</html>选择器
<div class="div" id="div"><div><span class="logo"></span></div><span></span><!-- text、button、password、submit、radio、checkbox、file、image --><input type="text"><input type="password"></div>标签选择div{}
类选择.div
id选择器#div
子代选择器.div>span{}
后代选择器.div span{}
并集 交集，，属性 伪类 伪元素
标签内style：1000 id选择器：100 类选择器：10 标签选择器：1
盒子内容居中
1.position left right top bottom margin2. display: table-cellvertical-align: middletext-align: center弹性盒子 flex
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>弹性盒子模型</title><style>.box {width: 500px;height: 400px;border: 2px solid blue;/* 就是将元素变成弹性盒子元素 */display: flex;flex-direction: row;/* 在主轴方向对齐方式 */justify-content: space-evenly;/* 侧轴方向的对齐方式 */align-items: flex-start;}.item {height: 60px;background: red;}.item1 {flex: 1;background: blue;}.item2 {flex: 2;background: yellow;}.item4 {flex: 3;background: green;}.item3 {flex: 4;align-self: center;}</style>
</head>
<body><div class="box"><div class="item item1"></div><div class="item item2"></div><div class="item item3"></div><div class="item item4"></div></div>
</body>
</html>多媒体查询
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* >= 750px div 300 <= 750px div 200<= 300px div 100*//* <=300 */@media screen and (max-width: 300px) {div {width: 100px;height: 200px;background: red;}}/* 300< screen <=750 */@media screen and (min-width: 300px) {div {width: 200px;height: 200px;background: blue;}}/* >750 */@media screen and (min-width: 750px) {div {width: 300px;height: 200px;background: green;}}</style>
</head>
<body><div></div>
</body>
</html>6.13一天知识总结相关推荐
- 官方抓虫，PyTorch 新版本修复 13 项 Bug
整理 | 寇雪芹 头图 | 下载于视觉中国 出品 | AI科技大本营(ID:rgznai100) 近日,PyTorch 发布了新版本 PyTorch 1.8.1,相比3月4日从 PyTorch 1.7 ...
- 技术动态 | 事理图谱，下一代知识图谱
本文转载自公众号:DataHorizon. 人工智能与认知智能 当前人工智能时代下,机器与人类之间的博弈一直在进行着.如图1所示,从1926年达特茅斯会议的召开标志人工智能诞生到深度学习模型在若干人工 ...
- 技术论坛 | CCF YOCSEF上海即将在 CNCC 举办“知识图谱遇见社交媒体”专题论坛
中国计算机学会青年计算机科技论坛 CCF YoungComputer Scientists & Engineers Forum CCF YOCSEF上海 CNCC2017大会技术论坛 主题: ...
- 如何提高自己的知识水平？
这篇是知乎的回答原文,在知乎有大概一万五千的赞,但是不知为何总是被人举报然后被封,后来也就没管了.因为一直都有不少人来信跟我要,所以转移发到公众号来.我没有授权任何人转载,如果你在其它公众号遇到类似的 ...
- 事理图谱-下一代知识图谱
一.人工智能与认知智能 当前人工智能时代下,机器与人类之间的博弈一直在进行着.如图1所示,从1926年达特茅斯会议的召开标志人工智能诞生到深度学习模型在若干人工智能领域大规模应用的如今,人工智能已经走 ...
- 手把手 | 事理图谱，下一代知识图谱
大数据文摘投稿作品 作者:刘焕勇.薛云志 当前人工智能时代下,机器与人类之间的博弈一直在进行着.如图1所示,从1926年达特茅斯会议的召开标志人工智能诞生到深度学习模型在若干人工智能领域大规模应用的如 ...
- 【医疗人工智能】DKDR：一种用于疾病诊断的知识图谱和深度强化学习方法
Article 作者:Yuanyuan Jia, Zhiren Tan, Junxing Zhang 文献题目:DKDR: An Approach of Knowledge Graph and Dee ...
- 数学表达式: 从恐惧到单挑 (13. m 叉树)
13. mmm 叉树 我们来定义 mmm 叉树, 并将二叉树作为其特例来分析. 13.1 预备知识: 字符串 字母表记作 Σ\SigmaΣ, 源码: \Sigma; 英文字母表 Σ={a,b,-,z} ...
- DAMA数据管理知识体系-数据治理工程师（CDGA）
DAMA数据管理知识体系 写在前面 本专栏为数据治理专栏,里面的内容主要是本人参加数据治理考试(CDGA)前做的笔记,包括一些考题或者易错点.其中加粗的文字为考试中常考的. 什么是CDGA? CDGA ...
最新文章
- VScode的撤销操作的快捷键
- usaco The Tamworth Two 两只塔姆沃斯牛
- 下载python后怎样打开-下载python后如何启动
- 《JavaScript数据可视化编程》——1.4 用离散图表绘制x/y值
- [css] 举例说明background-repeat的新属性值：round和space的作用是什么？
- 微信开发原理 公众平台开发模式的数据交互方式
- pytorch中上采样的实现
- 【操作系统】第1章 操作系统概论
- android studio创建项目一直,Android Studio在创建/导入项目的时候，一直处于building “XXX”gradle project info的解决办法...
- flutter 点击旋转动画_flutter RotationTransition实现旋转动画
- excel 通用进销存(由excel+VBA+MSSQL制作)
- OpenLayers实例：打开ArcGIS Rest服务
- itextpdf使用总结
- matlab中matconvnet,matlabR2016中配置matconvnet编译时出错
- 20190919-6 四则运算试题生成
- CollabNet Subversion Edge 版本库访问规则 svn
- 南怀瑾：秘方集（治高血压、失眠、肺病、肠胃病、近视、伏淫欲还精补脑、保健长寿）
- 你的格局决定你的结局
- 解析：Are We Really Making Much Progress?A Worrying Analysis of Recent Neural Recommendation Approaches
- IPTV系统中EPG模块的设计与实现
热门文章
- 目前最全的IT技术问答、社区、科技服务网站合集
- Voltus任命全球投资者关系负责人
- amd服务器主板文件,AMD服务器主板全攻略--Opteron篇
- 大道至简——RISC-V架构之魂（上）
- mysql函数LOCATE、POSITION和INSTR
- mh采样算法推导_科学网—MCMC中的Metropolis Hastings抽样法 - 张金龙的博文
- QT命令行编译时出现'mingw32-make'不是内部或外部命令，也不是可运行的程序或批处理文件
- matlab 调整矩阵形状,在MATLAB中调整3D矩阵(图像)的大小
- Matplotlib数据可视化之堆叠图、饼图（plt.stackplot\plt.pie）
- win10/neovim中文输入法切换