- 博客(33)
- 收藏
- 关注
RSS订阅原创 弹性盒模型
弹性盒模型给父级添加flexdisplay：flex；flex-wrap：wrap；换行弹性盒模型主轴，纵轴方向flex-direction：row-reverse；从右到左，元素主轴的方向默认值row，从左到右column 从上到下column-reverse 从下到上主轴方向的对齐方式justify-content：space-aroundspace-betwee...
2020-03-30 22:08:11
115
原创 3D动画和盒阴影及滤镜
3D开辟异次元空间transform-style：preserve-3d;视距，透视perspective: npx;盒阴影必须要有的h-shadow 水平阴影v-shadow 垂直阴影可以选择的blur 模糊距离spread 阴影尺寸color 阴影颜色inset 内阴影文字阴影必须要有的h-shadow 水平阴影v-shadow 垂直阴影...
2020-03-30 20:09:08
163
原创 transform样式
变化样式① 旋转（rotate）样式transform: rotate（角度值deg）② 位移（translate）样式transform: translate（X,Y）③ 缩放（scale）样式transform: scale（X,Y）④ 倾斜（skew）样式transform: skew（X,Y）变化原点transform-origin：复合写法：transfo...
2020-03-27 22:45:22
248
原创 动画样式
触发式动画常用触发动作1：鼠标悬浮 （ ：hover）2：选项选中（ ：checked）3：输入框点击（ ：active）触发式过度时间参数 transition-duration延迟执行 transition-delay过度动画时间函数 transition-timing-function：linear 匀速ease 慢-快-慢...
2020-03-26 22:13:47
99
原创 高级选择器和伪元素应用
高级选择器的种类伪类选择器之状态类：checked: hover: active: focus :link * 未访问链接* :visited *已访问链接* :ho...
2020-03-24 22:03:56
86
原创 表格元素与表格布局
table 元素在网页内容中创造一个表格tr 元素 ( 创造表格中一行 )在网页内容中创造表格的一行,只有行的话不会在网页内容中间展示任何效果,一个表格至少需要行和列同时出现td 元素 ( 创造表格中的列 )在网页内容中创造表格的一列,每一个tr(行)元素中间都要设置具体的列数,默认情况下,每一个tr的列数都是相同的th 元素 ( 创造表格中的表头 )在表格中间创造一...
2020-03-23 22:13:38
530
原创 表单元素
display: none和visibility: hiddendisplay: none 完全消失,不保留位置visibility:hidden 保留位置visible 默认值form元素(块元素)form action="" 数据提交method:form 表单的提交方式method:get 提交不安全,暴露在地址栏上method:post 安全性高...
2020-03-23 19:07:11
94
原创 定位样式和伪类样式hover
定位① 绝对定位position : absoluteA 设置绝对定位的元素会在原地飘;B 后飘起来的元素飘得更高②相对定位position : relative③固定定位position :伪类样式① :hover作用: 当鼠标放在 * :hover左侧选择器 *选中的元素时, 整个选择器代码才有效果:hover选择器左侧必须有选择器,右侧的选择器可以设置也可以不设...
2020-03-20 22:12:14
363
原创 浮动样式
浮动float : left 左浮动right 右浮动行内浮动float：leftright浮动样式重点①浮动元素之间不会覆盖彼此②具有和文本环绕相同的特性。一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列浮动样式高度塌陷①给父元素设置属性:overflow: hidden;display: inline-block;float: left...
2020-03-19 22:51:29
95
原创 CSS常用标签
块级标签特点①占整行②设置宽高包含其它任意元素（p除外）行内标签特点①内容多大就占多大②从左到右排布③不能设置高，高度由内容撑开只能包裹行内元素或文字（a除外）常用标签特殊的块级标签 p特殊的行内标签 aa 超链接hrefa href=“地址” target=“_blank 在新页面打开target=“_self ”在当前页面打开target=“ _new...
2020-03-19 14:33:37
107
原创 复习及权重
视频video src="" loop(循环播放) autoplay(是否在加载后即播放视频) controls(播放控键)选择器①交集选择器②并集选择器 ,逗号③后代选择器 空格④ID选择器 #晒破⑤子代选择器 > 大于号⑥相邻元素选择器 +⑦兄弟元素选择器 ~样式优先级权重...
2020-03-18 22:16:27
255
原创 圆角样式与渐变样式
圆角样式圆形设置border-radius: 左上 右上 右下 左下;左上 右上与左下 右下;左上与与右下 左下与右上;单例型写法：border-top-left-radius: 左上角小圆半径border-top-right-radius: 右上角小圆半径border-bottom-right-radius: 右下角小圆半径border-bot...
2020-03-18 14:30:11
94
原创 背景样式
背景样式背景颜色 background-color:背景图片 background-image: url(图片地址)背景平铺 background-repeat: repeat 平铺(默认)no-repeat 不平铺背景大小 background-size: contain 其中一个边触到边框就停止cover 在原始图片尺寸下,只有图片的高度拉伸至元素高度,方能覆盖...
2020-03-16 22:03:50
80
原创 默认显示类型与显示类型转换
显示类型块级元素显示类型display: block行内元素显示类型display: inline行内块级元素显示类型display: inline-block(可以同行显示,)解析空格给父及设置 font-size: 0然后给元素设置字体大小类型转换块级元素特征:block:(div /p /dl /form /h1~h6 /ol /ul)①独占一行②高度由里面的元素撑开...
2020-03-14 22:21:30
105
原创 行内盒模型
行内盒模型内容区①border: 生效②padding: 左右生效,上下不生效②margin: 左右生效,上下不生效,auto无效文字值常用①px②em文本基线①baseline 基线(位于小写字母的x的底线决定)②middle line中线③top line顶线④bottom line底线font-family 字体样式①有衬线 Serif②无衬线 San...
2020-03-13 21:58:00
83
原创 盒模型
标准盒模型内边距复合写法: padding:上 右 下 左;边框border:粗细 样式 颜色;样式: 直线 solid; 虚线 dashed; 点线 dotted; 双实线 double ;立体 groove ; 隐藏 hidden ; 向内 inset ;根据方向设置: border-top/left/right/bottom: 粗细 样式 颜色;根据属性设置: b...
2020-03-12 21:26:02
85
原创 CSS选择器
1.颜色的几种方式color: ①颜色单词 * ②#十六进制值(0-9 a b c d e f ) ③rgb(0-255, 0-255, 0-255)* 或 rgba(0-255, 0-255, 0-255, 0-1)2.复合型选择器①交集选择器标签和class名②并集选择器用英文状态的逗号分隔③后代选择器用空格隔开④子代选择器大于号 > 选中后面的子...
2020-03-11 21:27:56
65
原创 CSS样式
1.css引用方式一:行内样式 缺点 ①结构不鲜明②不易维护③代码不能复用方法二: 内部样式 在头部style标签中写样式 缺点①样式多就不好维护了②复用性不强方法三:外部样式 通过link标签链接css文件检验链接成功?按住ctrl键去点击文件2.选择器2.1 标签选择器 div;p;;h1~h6等2.2 id选择器 “#” ...
2020-03-10 22:43:09
59
原创 2020-03-09
块级标签h1~h6；p；div；文本格式化标签strong；b 加粗em；i 斜体ins；u 下划线del；s 删除线注：前面的是给浏览器看的，比后面的重要，但是前面和后面的在网页上效果是一样的图片展示标签img src=“路径”路径 相对路径：项目中使用网址：复制图片的地址绝对路径：从磁盘根目录出发alt=“图片加载失败的文字”title=“鼠标悬停提示”...
2020-03-09 22:29:11
89
原创 2020-03-02
适配问题：屏幕尺寸都是不一样的。m（手机）端内核：谷歌内核webkit解决方案：百分比布局===流式布局，非固定像素，内容向两侧填充视口通过设置viewport，用里面的centent值设置视口功能①设置视口宽度=当前设备宽度 width=device-width②不允许用户自动缩放：user-scalable=no（no/yes 0/1）③设置默认缩放比例：initial-...
2020-03-02 21:48:15
112
原创 2020-02-28
浮动样式 floatfloat：left 左浮动right 右浮动设置了浮动样式的元素不再遵守普通流规则，因此两个浮动元素可以同行显示。当父元素宽度不足以放下所有的浮动元素时，那么超出父元素边界的元素会自动换行显示浮动不会覆盖彼此行内元素浮动设置了浮动的行内元素的顶部不会超出所在行内的行框顶部，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列父元素高度塌陷1- 给父元素...
2020-02-28 14:11:12
91
原创 2020-02-28
渐变色background-image：线性渐变linear-gradient（颜色 0%,颜色 100%）变色方向：渐变色默认是用上往下，可以通过to后面的方向进行自定义，实现不同的效果，如:向下渐变linear-gradient（to bottom, 颜色 0%,颜色100%）也可以通过角度linear-gradient（0deg,颜色0%,颜色100%）径向渐变radial...
2020-02-28 13:25:43
73
原创 2020-02-28
圆角样式 border-radiusborder-radius：左上 右上 右下 左下;椭圆设计：border-radius的属性值可分为两段，由一个反斜杠隔开 反斜杠前面的为横轴值，反斜杠后的为纵轴值，椭圆的写法与圆角类似，反斜杠前后都是独立的，语法和简写都一样。 0px/0px 或0%/0%...
2020-02-28 12:55:31
68
原创 2020-02-26
3D效果transform-style：preserve-3d;perspective：px;（允许改变3d元素查看3d视图其【子元素】会获得透视效果只影响3d转换元素）练习opacity： ;（透明度0~1）linear-gradient（颜色 0%,颜色 100%） 渐变line-height：;行高text-align：center;左右居中...
2020-02-26 21:34:03
73
原创 2020-02-24
用animation-name和动画绑定animation-duration: （动画时长）animation-iteration-count: （动画次数 「 infinite 循环播放」）animation-timing-function: （时间函数）animation-delay: （动画延迟）animation-direction: （动画是否正反向切换执行...
2020-02-24 22:31:22
67
原创 2020-02-20
「扩大选中区域」<label for=" " </label「专职按钮」 button 不同的浏览器可能提交不同的按钮值「下拉列表」<select name="" id=""
2020-02-20 22:29:31
63
原创 2020-02-20
placeholder=" “（站位提示符）value=” " （提交后端）「复原按钮」［后端接收的是键值对 name （可以是文字） value］type=“checkbok” name=" " value=“on”「提交按钮」<input rype=“button” value=""（普通按钮）<input type=“submit”（默认提交按钮）「图片按钮...
2020-02-20 21:53:18
66
原创 2020-02-20
表单action=“提交的url地址”method= get 提交的内容会出现在地址栏上，不安全，存贮量小post 安全input type=“text” 文本框: 特性单行（默认）［用户名］input type=“password”［密码］maxlength=" "［控件允许输入的最多字符数］input type=“radio” ［单选按钮］【单选联动: 相同的 name】...
2020-02-20 21:09:41
68
原创 标准盒模型
什么是盒模型?盒模型(box moldel),是w3c规定一个浏览器如何渲染,显示一个元素,根据元素的种类分为块级元素盒模型和行内元素盒模型标准盒模型—width/height (content box 内容区)块级元素的width和height值在标准和模型下,定义了一个块级元素能够存放内容的区域大小,元素的内容从width和height的左上角原点开始排列内容—border ...
2020-02-07 18:27:19
1119
原创 css基本样式与元素选择器
什么是css?css是 cascading style sheets的缩写,是一种用来为html文档添加样式(字体,间距,位置,颜色,角度等显示的效果)的计算机语言;HTML是内容的展示,css是内容的装饰css的引用方式行内样式在开始标签的内部可以设置一个叫style的属性,属性的双引号内存放该元素代码的css样式...
2020-02-07 17:31:45
226
原创 html视频,音频,链接,列表的使用
视频展示标签src : 是sourse的缩写,表示需要显示的视频文件所在的位置controls=“controls” 这是视频文件的控制按钮区域音频展示标签audio :在网页上展示一个音频文件src=“视频地址” 表示需要显示的视频/音频文件所在的位置链接标签<a href=“网页地址” target="-blank(在新页面打开) / -self(默认打开,在...
2020-02-07 15:32:23
279
原创 2020-02-07
html分类双标签:开始标签和结束标签成双出现单标签 :只有开始标签** “ / ” 网页上如果某个标签的小于号后面有此符号的即为结束标签，没有此符号的则为开始标签**html标签关系嵌套关系 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab健的身位并列关系 如果是并列关系最好上下对齐常用标签标题标签 网页内容中间有部分内容重要程度明显高于其它区域:比如网页标题，网页...
2020-02-07 14:32:16
171
原创 2020-02-06
什么是标签 ？标签是由小于号+中间字符+大于号组成的代码（注代码是由英文组成）作用是给浏览器或搜索引擎看的网页基本标签----html lang=“en”lang是language的缩写，代表该网页用那种语言显示网页的所有内容，无论是给用户看的还是给浏览器看的，都放在html中head标签网页上在浏览器上显示出来的，并且还要在互联网这个大平台进行传输，必然就要将网页自身的...
2020-02-06 23:16:06
124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人