纯CSS实现立方体旋转
摘要：代码1： <!DOCTYPE html> <html> <head> <title></title> <style> .rect-wrap { position: relative; perspective: 2000px; } .container { width: 400px; height:
阅读全文
posted @ 2020-02-26 14:51
随笔分类 - html+css
css3总结(三)立方体、动画、web字体、字体图标、弹性布局、多列布局、伸缩盒子
摘要：目录： 1.立方体2.动画3.设置动画的一些属性4.案例：无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例：伸缩盒子的flex属性的应用案例（菜单个数不限）10.伸缩盒子的align-items属性 设置侧轴对齐方式11.案例：伸缩盒子，宽高自适应 1、立方体 <--返回目录 *t
阅读全文
posted @ 2020-02-24 01:31
css3总结(二)背景色渐变、background、边框图片、过渡、2d变换、3d变换
摘要：目录： 1、背景的线性渐变2、径向渐变 从中间到外围渐变3、background4、提升移动端响应区域的大小5、边框图片6、过渡7、2d转换 2d移动8、2d转换 缩放9、2d转换 旋转10、2d转换 斜切11、旋转中心设置transform-origin12、案例：扑克牌旋转13、同时添加多个tr
阅读全文
posted @ 2020-02-24 00:13
css3总结(一)属性选择器、伪类、伪元素、盒模型、边框圆角、文本阴影、边框阴影
摘要：目录： 1、属性选择器2、兄弟伪类3、相对于父元素的结构伪类4、伪类样式target5、伪元素选择器before after6、::first-letter ::first-line ::selection的使用7、opacity设置透明度及RGBA的使用8、文本阴影text-shadow9、盒模型
阅读全文
posted @ 2020-02-23 17:02
自定义视频播放器（功能包括：播放/暂停，全屏，跳播）
摘要：最终效果： 1、demo结构 fontawesome字体下载：http://fontawesome.dashgame.com/ loading.gif：百度loading.gif选择一张下载 2、index.html 功能包括：播放/暂停，全屏，跳播 <!DOCTYPE html> <html> <
阅读全文
posted @ 2020-02-23 13:26
html5总结
摘要：目录： 1、什么是html52、HTML5-语义化标签及兼容性处理3、HTML5-表单新增的type属性4、H5新增的其他属性5、表单新增元素datalist6、HTML5-新增的表单事件7、进度条8、音频和视频9、DOM扩展10、网络监听事件11、全屏接口的使用12、FileReader的使用13
阅读全文
posted @ 2020-02-22 11:54
css基础（二）
摘要：目录： 1、浮动布局2、文字环绕3、案例1：使用<ul> <li>标签制作导航4、案例2：使用<ul> <li>标签制作导航（li添加背景图片）5、清除浮动6、css初始化 7、overflow属性8、定位9、定位的盒子居中显示10、标签包含规范11、规避拖标流12、图片和文字垂直居中对齐13、cs
阅读全文
posted @ 2019-12-29 16:31
css基础（一）
摘要：目录： 1.css概述2. html引入css的3种方式3.css三种基本选择器4.css四种复合选择器5.文本font相关的属性6.字体font-family的表达方式7.标签分类(显示方式)8.元素之间的转换9.css三大特性10.链接伪类11.背景属性12.背景属性demo13.行高line-
阅读全文
posted @ 2019-12-29 11:31
html基础
摘要：目录： html_01 1.认识前端和网页 2.认识html 3.标签 4.图片表签 5.相对路径和绝对路径 6.超链接 7.锚点(锚链接) 8.html的特殊字符 9.列表10.多媒体标签11.滚动标签12.案例1 多媒体和滚动标签的使用 html_02 1.<meta>标签2.<link>标签
阅读全文
posted @ 2019-12-29 11:23
