- 博客(18)
- 收藏
- 关注
RSS订阅原创 19.响应式布局
响应式布局 和媒体查询响应式一个网站可以兼容多个终端 优点：①面对不同的分辨率时，设备的灵活性较强② 能够解决多个设备上适应的问题③ 中小型企业一个网站可以兼容多个终端 缺点：① 为了兼容多个设备，工作量较大，效率不高② 代码 冗余，有很多隐藏无意义的元素，加载速率不是很快 原理：通过CSS3新增的媒体查询，通过匹配不同的宽度，显示不同的样式...
2020-04-03 17:09:56
129
原创 18.阿里图标、iframe标签应用
18.阿里图标和iframe标签应用阿里图标的使用方式https://www.iconfont.cn/①登录 ②点击自己所需要的log ③第三步:鼠标放在任意logo上，点击弹出来的购物车logo选项④可多次选择logo ⑤点击购物车logo ⑥点击下载码 ⑦保存文件阿里巴巴矢量图标库第一种应用方式 兼容性好但不支持多色第一步：拷贝项目下面生成的 @font-face第二步：定义使...
2020-04-03 17:09:12
276
原创 015 3D动画和盒阴影及滤镜样式
**015 3D动画和盒阴影及滤镜样式**创造3D物体,或是展示一个物体在三维空间中的运动, 基础条件是创造一个3维坐标系transform-style: preserve-3d; perspective 只能给父级 允许改变3D元素查看3D视图其【子元素】会获得透视效果 只影响3D转换元素perspective: 1000px;值可以自己设置 <s...
2020-03-14 21:10:43
171
原创 17、flexbox弹性盒模型
flexbox弹性盒模型给父级添加flexdisplay: flex;换行 flex-wrap: wrap;flex-direction: ; 元素主轴的方向，默认值row，从左到右row-reverse 从右到左column从上到下column-reverse 从下到上flex-direction:column-reverse主轴方向对齐方...
2020-03-14 21:08:49
118
原创 14-transform样式详解
14-transform样式详解1、旋转 transform: rotate列如：scale(x/y)缩放transform: scale(2,3);括号里面是倍数transform: scaleX(2)transform: scaleY(3)缩放值：1、>1放大 2、1>x>0缩小 3/0>x>-1把元素倒置缩小 ...
2020-02-26 19:09:59
685
原创 13动画样式详解
动画样式详解1、触发式动画transition-duration: 1s（;动画执行的时长 1s=1000ms）transition-delay:2s（ 延迟动画执行）过渡动画时间参数 ：默认值ease 慢-快-慢 慢速开始 ease-in 慢速结束 ease-out 慢速开始和结束 ease-in-...
2020-02-25 15:42:49
180
原创 11-表格元素与表格布局详解
11-表格元素与表格布局详解table 表格的属性td 列（行里边框单元格）tr 行th 标题 字体加粗居中thead：表头区域tbody：表身区域caption元素，创造表格的名字caption元素（创造表格的标题） <table border="1"> <caption>标题栏</caption&...
2020-02-24 14:02:43
222
原创 12-高级选择器和伪元素应用
12-高级选择器和伪元素应用高级选择器的种类伪类选择器之状态类checked:hover:active:focus伪类选择器之结构类:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n)伪类选择器之属性类[ att ][ att = value ][ att...
2020-02-24 12:03:16
131
原创 10-表单元素详解
**10-表单元素详解**1、什么是表单网页注册登录界面、信息调查问卷、搜索引擎的输出框2、常用表单元素form元素（划分存储标签元素的块元素form标签：浏览器在网页上专门用来划分出一个用来存储表单元素的区域form是块元素form标签的action属性内部是一个连接，指向的是提交表单时向哪个服务器地址发送表单数据。form标签的method属性内部存储着，该...
2020-02-24 11:50:53
1081
原创 定位样式详解
**定位样式详解**定位：相对定位、position:relative;、 绝对定位**position：absolute;*、 固定定位 position: fixed; 绝对定位参照浏览器、相对定位参照父级、父子相绝：如果父级相对定位，那么子级参照父级相对定位而不是浏览器定位样式的核心原理默认元素普通流布局普通流规则：浏览器在默认情况下规定一个块元素在父元素...
2020-02-20 14:13:01
570
原创 浮动样式详解
**浮动样式详解**浮动样式的由来？最开始图文布局的文本环绕效果延伸发展块级区域横向布局默认元素普通流布局普通流规则：浏览器在默认情况下规定一个块元素在父元素内的排列规则：从上往下排列从左开始排列一个块元素占一行浮动样式的核心原理1、float: left;(左浮动) 右浮动（float: right;）只有左浮动和右浮动浮动没有继承，给谁浮动就...
2020-02-20 13:59:44
411
原创 圆角样式与渐变色样式
**圆角样式与渐变色样式** 1**、什么是圆角样式border-radius** 圆角样式（border-radius），是W3C制定出来使默认显示为矩形的块元素展示一个弧形边缘的样式 2、圆角样式border-radius的样式值格式 圆角样式如同margin一样，可以单独对每个边角的小圆设置一个不一样的半径值，这样我们就可以利用圆角样式设计出各式各样...
2020-02-16 20:19:56
527
原创 背景样式详解
06-背景样式详解 一、 背景单例型样式之背景颜色（background-color） 背景颜色（background-color）的值常用有三类设置方式（默认颜色为transparent， 可以近似理解为透明）：rgb: 字符含义 r→red（红） g→green（绿） b: blue（蓝）取值范围:...
2020-02-14 12:30:03
507
原创 默认显示类型与显示类型转换
默认显示类型与显示类型转换 一、什么是显示样式？ 显示样式（display），是W3C规定浏览器采取哪种盒模型规则来显示一个元素，常用显示样式的值有：block（块级盒模型）inline（行内盒模型）inline-block（行内块级盒模型）二、块级标签 ：block行内标签：inline行内块级：inlie-blockdisplay:in...
2020-02-13 23:21:18
197
原创 CSS行内盒模型及文字样式详解
CSS行内盒模型及文字样式详解 什么是行内盒模型？行内盒模型（inline box model），是W3C规定一个浏览器如何渲染、显示、排版文字的一整套规则 行内盒模型：上下padding无效， 上下 margin无效 行内盒模型内容区：内容区:由font-size（文字大小样式）决定大小 、 文字大小的值常用有两类： ① px...
2020-02-11 18:37:53
355
1
原创 CSS盒模型概念及企业应用规则
CSS盒模型概念及企业应用规则1、什么是盒模型；盒模型（英文即Box model）但，图片、表单元素一律看作是文本，它们并不是盒子。，比如说，一张图片里并不能放东西，它自己就是自己的内容。 标准盒模型的概念分析： 1、有五个属性：外边距（margin）、内边距（padding）、边框（border） 内容（content） width/height（conte...
2020-02-11 18:36:22
82
原创 CSS基本样式与元素选择器
CSS基本样式与元素选择器 所有html文件夹都要有 css images JS css的引用方式 行内样式：天青色等烟雨，而我在等你 color：可以设置文本颜色 2内部样式表：在头部添加style标签的方式（在练习时使用） 只能在当前页面使用 3外部样式表(找到自己的项目文件夹？再在外面创建一个css样式)：在头部通过link...
2020-02-11 18:35:20
146
原创 基本标签
基本标签常用的基本标签：body标签内部功能标签分类 块级区域：按权重分类 ：有权重 <h1><h1>至<h6></h6> :无权重： <div></div> 按层级关系分类：有序列表 ...
2020-02-05 23:21:27
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人