- 博客(28)
- 收藏
- 关注
RSS订阅原创 视频video
MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+- WebM 支持的浏览器chrome、Firefox、Opera。- ogg 支持的浏览器chrome、Firefox、Opera。- width属性、height属性：视频播放器的宽度和高度。- poster属性：预览图片,视频正在下载时显示的图像。- autoplay属性：自动播放，必须静音后在播放。- controls属性：视频播放控件。- src属性：视频文件的路径。- loop属性：循环播放。
2023-02-27 08:12:53
150
原创 视频video
MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+- WebM 支持的浏览器chrome、Firefox、Opera。- ogg 支持的浏览器chrome、Firefox、Opera。- width属性、height属性：视频播放器的宽度和高度。- poster属性：预览图片,视频正在下载时显示的图像。- autoplay属性：自动播放，必须静音后在播放。- controls属性：视频播放控件。- src属性：视频文件的路径。- loop属性：循环播放。
2023-02-27 08:11:18
190
原创 CSS Grid(网格) 布局
flexbox” 是一维的布局，是因为一个 “flexbox container” 一次只能处理一个维度上的元素布局，一行或者一列。CSS Grid 网格布局可以将网格元素放置在与这些行和列相关的位置上，进而快速、便捷的对页面结构进行布局，提高工作效率。容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。行和列的交叉区域，称为"单元格"（cell）
2023-02-27 08:08:31
109
原创 阿里矢量图标(字体图标)
6.引入iconfont.css文件或者iconfont.js文件。网址：https://www.iconfont.cn/第二步：挑选相应图标并获取字体编码，应用于页面。4.选择下载代码，下载完成后解压文件。2.搜索想要的图标且加到购物车。5.把下载的文件放到你的项目中。3.点击右上角的购物车。1.登录阿里矢量图标网站。#### 1.使用步骤。
2023-02-27 08:06:41
79
原创 ## css3过渡动画——transition属性
注意：必须设置transition-duration属性，否则执行时间为0，不会产生过渡效果。- 动画执行时间：默认0s，s|ms(毫秒) 1s=1000ms。2.ease 默认值 慢速度开始--速度变快--慢速度结束。3.ease-in 慢速度开始的过渡效果，也就是以低速度开始。4.ease-out 慢速度结束的过渡效果，也就是以低速结束。- css样式：参与过渡的css属性名称|all表示所有属性。5.ease-in-out 以慢速度开始和结束的过渡效果。
2023-02-27 08:06:06
94
原创 移动端web开发
一种是基于高端机的浏览器运行的WebApp（基于WEB形式的应用程序）随着互联网技术的快速发展，加之智能设备的迅速普及,传统网站都已经逐渐向移动端转移和扩展,移动端web开发技术的掌握也显得尤为重要。移动端Web主要指运行在移动端（手机、ipad）的web页面, 因为具备HTML5特性也叫H5页面、Web App等。2.能调用系统的 api 优点是性能更好，实现的一些非常酷的交互效果,但是发布 app 流程繁琐，而且不跨平台。1、开发成本非常大一般使用的开发语言为JAVA、C++、Objective-C。
2023-02-27 08:05:52
245
原创 移动端浏览器及内核
对于苹果手机而言：由于系统封闭，不允许除苹果系统自带的浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均在Safari内核的基础上进行开发；移动端浏览器：百度浏览器，火狐浏览器，谷歌浏览器，uc浏览器，360浏览器，qq浏览器，苹果浏览器，猎豹浏览器，搜狗浏览器，2345浏览器等等。国内用户首选使用移动浏览器的占比中：uc浏览器，qq浏览器，360浏览器，为用户手机浏览器平台首先前三位。终端分为三个：pc iPad 移动端。
2023-02-27 08:05:03
378
原创 引入字体图标第二种方式
添加新的图标下载文件后，把原来的文件替换掉，再把iconfont.css和iconfont.js文件链接替换一下即可。如果添加新的图标，可以把这些图标添加到已有的项目文件，这样原来的图标和这次新添加的图标就可以在新的一个文件里了。如果添加新的图标，需要再新下载一个文件，且这个文件的图标与上个文件的图标不能在一个文件中，是两个独立的文件。3.解压文件，把文件放到代码中(此时下载的这个文件包括上次选的图标，也包括这次选的新的图标)1.把新的图标选好之后，点击添加项目，选择你要添加的项目。
2023-02-27 08:04:48
136
原创 calc()函数
calc()函数支持 "+", "-", "*", "/" 运算；- 任何长度值都可以使用calc()函数进行计算；- calc()函数使用标准的数学运算优先级规则；- 运算符前后都需要保留一个空格。运算符前后都需要保留一个空格。用于动态计算长度值，值灵活。- css3新增功能。
2023-02-26 12:31:35
49
原创 flex 属性
定义弹性盒项目基准值（即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值）flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）- 注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高。flex-grow属性：子元素的放大比例（子项宽度和
2023-02-26 12:30:56
45
原创 align-content属性
两端对齐，中间自动分配。折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式（去掉了中间的间隙）- align-content: center;要设置： flex-wrap: wrap;注意：弹性盒项目为多行时有效。
2023-02-26 12:28:52
154
原创 align-self属性
如果弹性子元素没有高度或高度为auto，将占满整个容器的高度。（侧轴）交叉轴起点对齐。调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）* align-self: flex-end;（侧轴）交叉轴终点对齐。（侧轴）交叉轴中点对齐。此属性和弹性容器的 align-items 属性作用相同。
2023-02-26 12:28:01
920
原创 flex-wrap
换行，第一行显示在下方。注意：父元素有固定高度且高度大于子元素高之和换行中间有缝隙。 父元素高度有内容撑开换行没有缝隙。换行，第一行显示在上方。
2023-02-26 12:26:53
307
原创 什么是弹性盒子？
将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间。> 弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；- 原理：为父元素设置flex属性，控制子元素的位置及排列方式。- 弹性盒模型的内容包括：弹性容器、弹性子元素——项目。- - 操作方便，布局简单，移动端使用广泛。- 在盒模型中较为灵活。
2023-02-26 12:26:07
46
原创 align-items属性
默认值，如果弹性子元素没有高度或高度为auto，将占满整个容器的高度。子元素在第一行文字的基线对齐。子元素在侧轴顶端对齐。子元素在侧轴末端对齐。子元素在侧轴中间对齐。弹性子元素在（侧轴）交叉轴上的对齐方式。
2023-02-26 12:26:00
1036
原创 justify-content 属性
子元素之前、之间、之后都留有空白空间，且空间自行分配,项目之间的间隔比项目与边框的间隔大一倍。两端对齐，子元素和子元素之间有空白空间,项目之间的间隔都相等。- space-evenly:弹性项目平均分布在该行上,相邻项目的间隔，项目与容器之间空间相等。设置主轴的对齐方式,弹性子元素在主轴方向上的对齐方式,
2023-02-26 12:25:27
144
原创 径向渐变 radial-gradient
backgrond: repeating-radial-gradient(渐变形状/圆心, 颜色1 范围1, 颜色2 范围2, ...);backgrond: radial-gradient(渐变形状, 颜色1 范围1, 颜色2 范围2, ...);语法：background:radial-gradient(形状 at 水平位置 垂直位置,颜色1，颜色2)渐变形状：椭圆（ellipse,默认值）、圆形（circle）- px（表示距左上角的0，0的坐标位置）径向渐变 ： 一个点到四周的渐变。
2023-02-26 12:23:53
170
原创 线性渐变 linear-gradient
background:repeating-linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);background: linear-gradient(方向, 颜色1 范围1, 颜色2 范围2,...);方向：数值（单位deg)、关键词（left|right top|bottom)颜色：关键词、十六进制色值、rgb(r,g,b)、rgba(r,g,b,a)- to right top 方向朝向右上角。- to top left 方向朝向左上角。1、使用起始位置关键字。
2023-02-26 12:23:03
145
原创 盒子阴影主要属性介绍
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。可选 单位： px。box-shadow: x轴偏移量 y轴偏移量 模糊值 阴影大小 阴影颜色 内阴影inset|外阴影（outset默认）h-shadow：阴影的水平偏移量。v-shadow：阴影的垂直偏移量。blur：阴影模糊度，不能取负数。可选 单位： px。inset：表示添加内阴影，默认为外阴影。当 spread 为0时，阴影大小与元素大小相同。
2023-02-24 19:20:58
507
原创 html5里废弃的一些标签
● noframes标签向浏览器显示无法处理框架的提示文本。● 标签定义 frameset 中的一个特定的窗口（框架）● 定义文档中所有文本的默认颜色、大小和字体。● strike 标签可定义加删除线文本定义。● 规定 Java applet 的文件名。● 标签规定文本的字体、字体尺寸、字体颜色。● 标签控制文本的居中显示。● 标签定义目录列表。
2023-02-24 19:19:18
66
原创 html5新特性
HTML5通过引入Geolocation的API可以通过GPS或网络信息实现用户的定位功能，定位更加准确、灵活。* canvas 元素使用JavaScript 在网页上绘制图像。- 新增了多媒体相关的video和audio元素。- 本地存储：提供两种客户端存储数据的方法。* sessionStorage存储。* localStorage存储。- 新增表单相关新元素、新属性。- 新增canvas元素。- 对本地存储的更好支持。
2023-02-24 19:17:35
28
原创 类名命名参考
search_output 搜索输出和搜索结果相似。left right center 居左、中、右。search_results 搜索结果。site_info_legal 法律声明。site_info_credits 信誉。search_input 搜索输入框。tool, toolbar 工具条。msg message 提示信息。search_bar 搜索条。friendlink友情链接。site_info 网站信息。site_map 网站地图。branding 商标。
2023-02-24 19:14:52
40
原创 书写代码时注意事项
常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名，如 top_left、top_nav;- 常用命名方法二：首字母大写，驼峰式命名，如：topNav。1. 添加注释：应该为大区块样式添加注释 ，小区块适量注释。- 合理使用id选择器（页面中唯 一的元素，如头部，底部）- 如：div#test { } p.box {}- CSS命名时要加前缀如：.zg_top{}- 避免使用中文拼音，尽量使用简易的单词组合。- 避免使用标签限定id或者类选择器。4. 保持代码缩进与格式。
2023-02-24 19:13:32
98
原创 项目文件夹
（如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）- public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式）- HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html。- 首页通常命名为index.css, 其他页面依实际模块或功能需求命名。- html、css、img、js 文件均归档至项目名称目录中。- 公用样式通常命名为reset.css（常用的浏览器样式）- css 文件以英文命名。
2023-02-24 19:12:14
23
原创 Cutterman插件
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。安装完成后重启PS, 从菜单栏 -> 窗口 -> 【扩展功能】-> 【cutterman】打开。安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展里头打开。
2023-02-24 19:11:54
123
原创 CSS 精灵技术
CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。1. 通常要限定容器大小。
2023-02-24 19:09:01
32
原创 定位与浮动的区别对比
相同点：宽高默认由内容撑开，生成块级框（可以设置width和height及所有盒模型属性等）使用position脱离文档流的元素，其他盒子完全无视它，包括元素内部的文本、图片、表单标签。- 不同点：浮动脱离文档流，不脱离文本流，定位元素既脱离文档流，又脱离文本流。浮动元素：盒子内的文本、图片、表单标签依然会为这个元素让出位置，环绕在周围。使用float脱离文档流时，其他盒子会无视这个元素，但其他。
2023-02-24 19:08:50
131
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人