- 博客(22)
- 收藏
- 关注
RSS订阅原创 3D转换-翻转轮播
<!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-Compat...
2019-08-26 21:57:08
357
原创 3D转换-长方体
<!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-Compat...
2019-08-26 21:50:08
206
原创 3D转换-正方体
按顺序做上 后 下 前 左 右上 : x轴旋转90度 , z轴正向偏移100px后 : x轴旋转180度 , z轴正向偏移100px下 : x轴旋转270度 , z轴正向偏移100px前 : x轴旋转360度 , z轴正向偏移100px左 : x轴负向偏移100px , y轴旋转90度右 : x轴正向偏移100px , y轴旋转90度<!DOCTYPE html>&...
2019-08-26 21:48:22
268
原创 CSS-3D转换
3D转换2D和3D如何让某个元素呈3D展现转换属性Transform 方法2D和3D2D就是一个平面, 只有宽度和高度, 没有厚度3D就是一个立体, 有宽度和高度, 还有厚度默认情况下所有的元素都是呈2D展现的如何让某个元素呈3D展现和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可转换属...
2019-08-26 21:38:58
163
原创 动画-无限滚动
效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } ...
2019-08-26 17:23:31
205
原创 动画-云层效果
效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; ...
2019-08-26 17:17:51
343
原创 CSS-动画
动画模块三要素属性@keyframesanimationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-mode取值:动画属性连写格式简写 : ...
2019-08-26 16:57:57
53
原创 CSS-盒子阴影和文字阴影
盒子阴影和文字阴影盒子阴影格式注意点文字阴影格式注意点盒子阴影box-shadow 属性向框添加一个或多个阴影格式box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;(前两个必选)div { box-shadow: 10px 10px 10px 10px skyblue; box-shadow: 10px 10px 10px 10px skyblue i...
2019-08-26 16:36:05
285
原创 CSS-2D转换
2D 转换translate()rotate()scale()translate()通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标) 和 top（y 坐标） 位置参数/*从左侧移动 50 像素，从顶端移动 100 像素*/div { transform: translate(50px,100px);}rotate()元素顺时针旋转...
2019-08-24 16:23:50
332
原创 过渡-手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; ...
2019-08-24 12:28:51
91
原创 过渡-弹性效果
思路 : 一个大盒子中有很多小盒子,鼠标移入大盒子给小盒子添加margin属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type=...
2019-08-24 12:04:48
100
原创 CSS-过渡
过渡三要素有属性发生变化哪个属性需要执行过渡效果过渡效果持续时长注意当多个属性需要同时执行过渡效果时用逗号隔开即可transition-property: width, background-color;transition-duration: 5s, 5s;...
2019-08-23 22:02:29
114
原创 CSS-a标签的伪类选择器
a标签的伪类选择器a标签的伪类选择器是专门用来修改a标签不同状态的样式的格式:link 修改从未被访问过状态下的样式:visited 修改被访问过的状态下的样式:hover 修改鼠标悬停在a标签上状态下的样式:active 修改鼠标长按状态下的样式注意点a标签的伪类选择器可以单独出现也可以一起出现a标签的伪类选择器如果一起出现, 那么有严格的顺序要求 , 编写的顺序必须遵守爱恨...
2019-08-22 21:45:04
1312
原创 HTML-base标签
base标签base标签就是专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开注意 :base标签必须写在head标签的开始标签和结束标签之间如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定的来执行...
2019-08-22 21:37:35
147
原创 HTML-a标签
作用:就是用于控制页面与页面之间跳转的格式:<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>target属性a标签中有一个叫做target属性, 这个属性的作用就是专门用于控制如何跳转_self: 用于在当前选项卡中跳转, 也就是不新建界面跳转. 默认就是_self_blank: 用于在新的选项卡中跳转, 也就是新建界面跳转ti...
2019-08-22 21:34:25
121
原创 CSS-定位
定位流分类相对定位绝对定位固定定位静态定位(浏览器默认)相对定位相对定位就是相对于自己以前在标准流中的位置来移动 position: relative;相对定位注意点相对定位是不脱离标准流的, 会继续在标准流中占用一份空间在相对定位中同一个方向上的定位属性只能使用一个由于相对定位不脱离标准流, 所以在相对定位中是区分块级元素/行内元素/行内块级元素由于相对定位...
2019-08-22 21:01:38
62
原创 VS Code 常用插件
vscode-icon : 让vscode资源目录加上图标、必备HTML Snippets : 超级使用且初级的H5代码片段以及提示HTML CSS Support : 让HTML标签上写class智能提示当前项目所支持的样式Debugger for Chrome : 让vscode映射chrome的debug功能，静态页面都可以用vscode来打断点调试、配饰稍微复杂一点Auto ...
2019-08-21 19:16:19
107
原创 CSS-清除浮动
浮动元素高度问题在标准流中内容的高度可以撑起父元素的高度在浮动流中浮动的元素是不可以撑起父元素的高度的清除浮动方式给前面一个父元素设置高度注意 : 在开发中, 能不写高度就不写高度, 所以这种方式用得很少给后面的盒子添加clear属性clear属性取值:none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)left: 不要找前面的左浮动元素...
2019-08-20 18:55:39
81
原创 CSS-浮动
网页的布局方式?网页的布局方式其实就是浏览器是如何对网页中的元素进行排版标准流(文档流/普通流)排版方式其实浏览器默认的排版方式就是标准流的排版方式在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平...
2019-08-20 17:21:44
67
原创 CSS-盒模型
边框属性边框就是环绕在标签宽度和高度周围的线条边框属性的格式连写同时设置四条边的边框border: 边框的宽度 边框的样式 边框的颜色;分别设置四条边的边框border-top: 边框的宽度 边框的样式 边框的颜色;border-right: 边框的宽度 边框的样式 边框的颜色;border-bottom: 边框的宽度 边框的样式 边框的颜色;border-left: 边框...
2019-08-19 21:00:31
70
原创 CSS
文字相关属性文字样式font-style : normal / italic;文字粗细font-weight : lighter / normal / bold / bolder / 1~900(100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold)文字大小font-size文字字体中文必须用双引号引...
2019-08-17 21:53:44
64
原创 HTML
浏览器请求数据的过程按下回车时浏览器根据URL地址发送请求报文服务器接收请求报文,会对请求报文进行处理服务器将处理完的结果通过响应报文返回给浏览器浏览器解析返回的结果,将结果渲染到界面上什么是URL(统一资源定位器)1.在浏览器的地址栏中输入的地址其实就是URL2.URL格式127.0.0.1/index.html （浏览器会自动补全http:和：80）http...
2019-08-16 21:52:54
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人