![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
h5c3
陀陀吖
有朋自远方来,不亦乐乎。
展开
-
001html5新增常用标签
<body><!-- 新增标签 --><header></header> <!-- 文档头部 --><nav></nav> <!-- 链接导航栏 --><footer></footer> <!-- 页尾 --><article&g...原创 2019-03-31 22:38:36 · 166 阅读 · 0 评论 -
017多背景+背景半透明
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多背景</title> <style> div{ width: 500px; height: 500px; /*background:url(ico...原创 2019-04-13 20:09:34 · 128 阅读 · 0 评论 -
016 背景渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> /*现在很少用到渐变,;浏览器问题,了解一下*/ div{ width: 300px; height: 100px; /...原创 2019-04-13 20:07:03 · 80 阅读 · 0 评论 -
015背景缩放+浏览器前缀
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景缩放</title> <style> div{ width: 400px; height: 400px; background-color: pink;...原创 2019-04-13 20:05:45 · 95 阅读 · 0 评论 -
014 flex伸缩布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>flex</title> <style> /*flex:1、默认方向 从左到右(主轴) 2、从上到下(侧轴)*/ section{ width: 80%;...原创 2019-04-13 20:04:50 · 125 阅读 · 0 评论 -
013动画animation
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动画</title> <style> div{ width: 100px; height: 100px; background-color: ...原创 2019-04-13 20:03:28 · 100 阅读 · 0 评论 -
012旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转</title> <style> /*transform用法总结: 1、位置移动:transform: translate(100px,100px); ...原创 2019-04-13 20:00:55 · 96 阅读 · 0 评论 -
011变形之位移与缩放transform
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>京东侧边</title> <style> *{ padding: 0; margin:0; } .subnav{ margin:100px auto;...原创 2019-04-13 19:55:48 · 226 阅读 · 0 评论 -
011京东侧边
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>京东侧边</title> <style> *{ padding: 0; margin:0; } .subnav{ margin:100px auto;...原创 2019-04-14 21:45:45 · 115 阅读 · 0 评论 -
010京东过渡效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <style> div{ width: 244px; /*宽度要比立面的img的宽度小*/ height: 122px; ...原创 2019-03-31 22:53:14 · 99 阅读 · 0 评论 -
009体会过渡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <style> div{ width: 100px; height: 100px; background-color: pink; ...原创 2019-03-31 22:52:40 · 56 阅读 · 0 评论 -
008文字与小盒子或者图片对齐
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字对齐</title> <style> div{ width: 400px; height: 100px; border: 1px solid r...原创 2019-03-31 22:50:23 · 298 阅读 · 0 评论 -
007鼠标经过显示三角
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>s三角</title> <style> @font-face { /*声明字体,引用字体*/ font-family: "icomoon"; ...原创 2019-03-31 22:49:44 · 205 阅读 · 0 评论 -
006小米图片案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米案例</title> <style> div{ width: 254px; height: 132px; position: relative;...原创 2019-03-31 22:49:04 · 80 阅读 · 0 评论 -
005css3盒子模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3盒子模型</title> <style> .one{ width: 200px; height: 200px; background-col...原创 2019-03-31 22:48:21 · 70 阅读 · 0 评论 -
004 css3伪元素选择器after、before
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3伪元素</title> <style> /*找到p段落的第一个字*/ p::first-letter{ color: red; } /*找...原创 2019-03-31 22:47:42 · 128 阅读 · 0 评论 -
003css3结构伪类选择器和属性选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css3结构伪类选择器和属性选择器</title><style>li:hover{}/*1、结构选择器*/ li:first-child{ color: red;...原创 2019-03-31 22:44:51 · 87 阅读 · 0 评论 -
002(html5)插入音频视频
<body><!-- 插入音频 <--><!-- autoplay :自动播放; controls:控制播放; loop:循环播放 <--><audio src="张靓颖 - 这么近那么远.mp3" autoplay controls loop></audio> <audio autoplay contr...原创 2019-03-31 22:41:50 · 84 阅读 · 0 评论 -
018 3D
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3D</title> <style> /*优雅降级和渐变增强 都是说浏览器低版本和高版本兼容 取决于用户需求*/ /*x 左边是负的,右边是正的 y 上...原创 2019-04-13 20:11:58 · 96 阅读 · 0 评论