第一阶段html5
Ninety`
这个作者很懒,什么都没留下…
展开
-
响应式布局、 用户界面、文本多列布局、响应式布局之grid网格布局18-19
day18自适应 :随着屏幕发生宽高 大小变化响应式布局响应式:随着屏幕发生宽高 大小变化 + 盒子布局发生变化需要技术点:媒体查询 + 流式布局(phone端)用户界面鼠标样式cursor盒子变大小属性resize:none不可变/both水平垂直尺寸可变/vertical垂直可变大小/horizatail水平方向可变大小文本多列布局排列多行文字 大量文字19讲:响应式布局之grid网格布局二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上)[外链图片转原创 2020-12-10 21:39:44 · 300 阅读 · 0 评论 -
视口布局16
day16视口布局vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh100vw : viewport width 视口宽度,浏览器可视区域的宽度100vh : viewport height 视口高度,浏览器可视区域的高度750px 100vw 1vw = 7.5px;375px 100vw 1vw = 3.75px以设计稿为准:假设还是750px设计稿 750px=100vw 1px=0.13333vw;预设字体基础值 100p原创 2020-12-10 21:33:09 · 88 阅读 · 0 评论 -
移动端布局、视口设置、h5媒体查询、流式布局、 rem布局、媒体查询+ rem单位、 js查询屏幕 + rem单位15
day15LESS变量类混入导入.css--->.css .less --->.less 导入@import "文件路径";嵌套父子 嵌套 .a>.b .a { .b { }}兄弟平行 .a +.b .a { }.b { }如果想加伪类 ;.a{ //&代指上一级选择器 &:hover { }}编译后效果:.a:hovr原创 2020-12-10 21:30:50 · 209 阅读 · 0 评论 -
弹性盒布局css3(伸缩盒布局)、 LESS语言、css的动态的扩展语言14
day14弹性盒布局css3(伸缩盒布局)传统布局的局限性清除浮动影响很难实现居中结构不灵活 不能随时添加盒子弹性盒布局你想摆哪些元素,就给它的父元素写display:flex;记得写一个私有属性+标准属性设置主轴方向:row /column设置主轴方向的排列方式设置交叉轴排列方式最好写换行属性子项宽度和高度flex:n;非常灵活 提供一套浏览器内置布局 特点:一维布局 固定的css属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(im原创 2020-12-10 21:20:50 · 182 阅读 · 0 评论 -
过渡、变形 transform、3d变形、关键帧动画13
day13动画: 过渡, 变形, 关键帧动画过渡从一个状态到另外一个状态 (两个状态的连接 最初,最终)的变化 ,并且时间的持续transition: 要过渡的属性 持续时间s/ms 运动的曲线 延时的时间s/ms;transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-colo原创 2020-12-10 20:56:42 · 389 阅读 · 0 评论 -
表单选择器、 结构伪类选择器、css3私有前缀、 新盒模型、 css3新增的背景属性、css3新增的盒子阴影12
day12css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀;选择器表单选择器:focus 聚焦选择器 选择的是当下被聚焦的表单元素input:focus {}:checked 勾选 选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字案例:修改单选框和复选框的默认样式基本原创 2020-12-10 20:27:48 · 104 阅读 · 0 评论 -
新增语义化布局标签、新增表单控件属性、音视频标签11
day11语义化标签解决语义化兼容性问题表单控件类型表单控件属性音视频标签css3新增选择器新增语义化布局标签header.footer,nav ,aside, article>section, figure (推荐在移动端使用)ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记 那我们让它认识即可手动去创建这些标记document.createElem原创 2020-12-10 20:14:25 · 93 阅读 · 0 评论 -
BFC规则、 经典的多列布局、图片优化技巧10
day10BFC规则1. 什么是BFC规则?Block Formatting Context 块级格式化上下文块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部2. 哪些属性可以触发BFC规则? 1. float不为none 2. position属性为absolute或fixed 3. oveflow不为visiable 4. html 根标签 3. BFC有哪些规则 1. BFC盒子内部的子标签按照垂直从上到下排 2.原创 2020-12-08 22:21:56 · 261 阅读 · 0 评论 -
表单控件、兼容性问题、常见问题(所有浏览器)09
day09表单结构作用:收集用户信息表单: 作用: 用来收集用户信息;也叫 表单框(表单域form)<form method=""></form> action: 传给后端的地址 method: 传给后端的方法 GET: 从后端获取数据,数据量比较小,安全性比较低,速度较快 POST: 向后端发送数据,数据量大,安全性高,速度较慢 name: 表单的标识表单控件:原创 2020-12-08 22:14:30 · 1076 阅读 · 0 评论 -
文件创建、文件命名规范、图片命名规范、鼠标样式属性、实现箭头、精灵图技术、文本溢出处理08
day08文件创建文件命名规范统一用小写的英文字母,数字和下划线的组合,不得包含汉字空格和特殊字符。原则: 1)方便理解,见名之意2)方面查找例如:首页—index产品列表—prolist产品详细页面—pro_detail新闻列表—newslist新闻详细页面—news_detail发展历史—history关于我们—aboutus联系我们—linkus,contactus信息反馈—feedback留言—leavewords图片命名规范图片的名称分为头尾两部分,用下划线隔原创 2020-12-08 22:02:41 · 279 阅读 · 0 评论 -
微信滑动门技术、 ps操作基础07
day07微信滑动门技术特殊背景图技术(背景图颜色单一,对称的,阴影,边框)原理:是一张宽度大小固定的图片铺到宽度不确定的盒子里,需要父子关系的两个盒子,内部盒子(子元素span)铺图片的右上角位置(background-position:100% 0%;),外侧盒子(父元素a)铺图片左上角位置(background-position:0% 0%;) <style> * { padding: 0; margin: 0;原创 2020-12-08 21:31:05 · 106 阅读 · 0 评论 -
浮动属性、 清除浮动带来的影响、 伪元素、浮动对于元素类型的影响05
day05布局第二大块 盒模型 行内块行内块并排缺点:中间有间距文本内容行数 多少不一样的时候 会出现对不齐现象浮动属性作用: 专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值 标准状态标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距浮动特点:浮动只有水平移动 在父盒子区域内部进行左右移动float:left 靠近父盒子左侧边界 right 靠近父盒子右侧边界浮原创 2020-12-07 22:30:38 · 244 阅读 · 0 评论 -
边框border、 外边距塌陷、背景属性、选择器优先级、 语义化标签04
day04盒模型 组成以及用法背景属性语义化理解选择器进阶 ,优先级计算外边距margin使用: 上外边距可以使盒子向下移动 左外边距可以使盒子向右移动 右下外边距不能使盒子发生移动 只能将这个盒子与其他盒子的距离拉开 外边距可以设置负值margin:10px;margin: 0 auto ;水平居中(1.块类型 2.明确可以计算的宽度)内边距padding使用:上下左右内边距全部有用 移动内容位置加了内边距必定会增大盒模型 做内减计算 减在有效内容宽高原创 2020-12-07 22:25:13 · 125 阅读 · 0 评论 -
浏览器及其内核、文本相关的标记、布局标签01
day01前端开发用前端技术实现用户界面前端技术:基础三大要素 html5 css3 javascript+js衍#用户界面:pc端+移动端app(页面+交互+数据渲染)发展史web1.0阶段 蒂姆·伯纳斯·李 [1] (Tim Berners-Lee) 界面:只能读 不能写web2.0阶段 布兰登·艾奇(Brendan Eich,1961年~) JS 有了交互 能读还能写 建设者web3.0阶段(大前端) 09年 Ryan Dahl浏览器及其内核浏览器+外壳+内核五大浏览器:原创 2020-12-07 22:12:21 · 180 阅读 · 0 评论 -
文本相关的css属性、字体属性 类型 家族、 单位尺寸、文字大小写、文本修饰属性、元素的分类与转换、布局核心---盒模型03
day03文本相关的css属性元素的分类与转换布局核心—》盒模型在线的css手册网址:http://css.cuishifeng.cn/text-decoration-line.html文本相关的css属性字体大小 颜色 字体粗细 字体斜体正体 字体类型 行高 (行间距) 水平对齐方式 垂直对齐方式 字符间距词间距 文本格式化输出 首字母操作 缩进 文本修饰字体属性font:字体是否是斜体 字体粗细 字体大小/行高 字体类型;字体原创 2020-12-07 22:09:23 · 109 阅读 · 0 评论 -
超链接、列表系列、表格结构、引入CSS、三个方法的区别、CSS选择器、CSS文本属性02
day02&&&1.超链接2.列表系列3.表格结构4.引入CSS5.三个方法的区别6.CSS选择器7.CSS文本属性超链接链接 anchor 锚点<a href='跳转的地址'>文本or img or div</a>属性:herf:跳转地址target:设置打开方式target:_self本页/_blank空白页,新页base标记<head> <meta charset="UTF-8">原创 2020-12-07 20:31:59 · 129 阅读 · 0 评论