![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 93
不一样的花朵
只要学不死,就往死里学.别人可以在智商上面压制自己,但是绝对不能在学习时间上面压制自己.
展开
-
前端成神之路-WebAPIs07
07 - Web APIs学习目标:能够写出移动端触屏事件能够写出常见的移动端特效能够使用移动端开发插件开发移动端特效能够使用移动端开发框架开发移动端特效能够写出 sessionStorage 数据的存储以及获取能够写出 localStorage 数据的存储以及获取能够说出它们两者的区别1.1. 触屏事件1.1.1 触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(原创 2021-01-01 08:39:39 · 158 阅读 · 0 评论 -
前端成神之路-WebAPIs06
06 - Web APIs学习目标:能够封装简单动画函数能够理解缓动动画的封装能够使用动画函数能够写出网页轮播图案例能够写出移动端触屏事件**1.1. **动画函数封装1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路:让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长停止的条件是: 让当前盒子位置等于目标位置就停止定时器注意步长值需要取整1.1.原创 2021-01-01 08:34:45 · 106 阅读 · 0 评论 -
前端成神之路-移动web开发之响应式布局
移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:小于768的为超小屏幕(手机)768~992之间的为小屏设备(平板)992~1200的中等屏幕(桌面显示器)大于1200的宽屏设备(大桌面显示器)1.2 响应式布局容器响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和原创 2020-11-28 07:24:41 · 174 阅读 · 0 评论 -
前端成神之路-移动web开发_rem布局
移动web开发之rem布局rem基础rem单位rem (root em)是一个相对单位,类似于em,em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-size:原创 2020-11-28 07:23:18 · 167 阅读 · 0 评论 -
前端成神之路-移动web开发_flex布局
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性,不能再移动端很好的布局1.2 flex布局操作方便,布局极其简单,移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局,还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活原创 2020-11-28 07:20:38 · 159 阅读 · 0 评论 -
前端成神之路-移动web开发_流式布局
移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。总结:兼容移动端主流浏览器,处理Web原创 2020-11-28 07:18:18 · 220 阅读 · 0 评论 -
前端成神之路-HTML5CSS3_03
一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换3D 转换知识要点3D 位移:translate3d(x, y, z)3D 旋转:rotate3d(x, y, z)透视:perspctive3D呈现 transfrom-style原创 2020-11-21 13:31:02 · 113 阅读 · 0 评论 -
前端成神之路-HTML5CSS3_02
一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤:给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角代码演示二、设置元素旋转中心点(transform-origin)transform-origin 基础语法transform-origin: x y;重要知原创 2020-11-21 13:31:36 · 105 阅读 · 0 评论 -
前端成神之路-HTML5CSS3_01
一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成HTML5 的现状绝对原创 2020-11-21 13:27:23 · 115 阅读 · 0 评论 -
前端成神之路-品优购项目四)
1. 品优购项目(四)1). 详情页 detail.html 常用单词名称说明主体de_container面包屑导航crumb_wrap产品介绍product_intro ( introduction介绍)预览包preview_wrap(左侧部分)预览缩略图preview_img预览列表preview_list左按钮arrow_prev右按钮arrow_next小图列表preview_items产品详细信息原创 2020-11-14 18:19:13 · 275 阅读 · 0 评论 -
前端成神之路-品优购项目(三)
品优购项目(三)1. 首页制作1). 楼层区 floor注意这个floor 一个大盒子 包含, 不要给高度,内容有多少,算多少2). 家用电器模块这个模块 jiadian 不需要写样式版心居中对齐 因为这些模块 基本相同,下面的 模块基本用这些样式 所以 咱们下面两个盒子的命名是:1号盒子 box-hd 给一个高度, 有个下边框 里面分为左右2个盒子2号盒子 box-bd 不要给高度。3). box-hd 模块有高度左边 h3 盒子原创 2020-11-14 18:14:36 · 164 阅读 · 0 评论 -
前端成神之路-品优购项目(二)
品优购项目(二)目标:能课堂跟上pink老师的节奏完成品优购项目1. 品优购首页布局命名集合:名称说明快捷导航栏shortcut头部header标志logo购物车shopcar搜索search热点词hotwrods导航nav导航左侧dropdown 包含 .dd .dt导航右侧navitems页面底部footer页面底部服务模块mod_service页面底部帮助模块mod_hel原创 2020-11-14 18:03:17 · 163 阅读 · 0 评论 -
前端成神之路-品优购项目(一)
品优购项目(一)目标:能会引入ico图标能简单看懂网站优化的三大标签能使用字体图标 ( 重点 )能说出我们css属性书写顺序能课堂跟上pink老师的节奏完成品优购项目1. 品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成首页、列表页、详情页、注册页面的制作2. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂的,复习、总结、提高前面所学布局技术。3. 设计目标保证浏览器 ie7及以上,原创 2020-11-14 17:46:52 · 377 阅读 · 0 评论 -
前端成神之路-品优购代码规范
代码规范1. 概述欢迎使用品优购代码规范, 这个是我借鉴京东前端代码规范,组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,以下规范是团队基本约定的内容,必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档,并结合团队业务和开发过程中总结的规范约定,让页面HTML代码更具语义性。图片规范了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等,旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代原创 2020-11-14 17:37:19 · 198 阅读 · 0 评论 -
前端成神之路-CSS高级技巧
CSS高级技巧目标理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!1.1 display 显示(重点)display 设置或检索对象是否及如何显示。display: none 隐藏对象display:b原创 2020-11-07 19:58:17 · 185 阅读 · 0 评论 -
前端成神之路-定位
定位(position)目标理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:普通流(标准流)浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置 自由的漂浮在其原创 2020-11-07 19:51:52 · 172 阅读 · 0 评论 -
前端成神之路-学成在线
1. 学成在线页面制作目标理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识。来一个春晚大联欢。pink老师:取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~1.1 前期准备素材学成在线PSD源文件开发工具 = PS(切图) + sublime(代码) + chrome(测试)1.2 前期准备工作原创 2020-11-07 19:04:34 · 208 阅读 · 0 评论 -
前端成神之路-浮动
1. 浮动(float)目标记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具1.1 CSS 布局的三种机制网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位,其中:普通流(标准流)块级元素会独占一行,从上向下顺序排列;常用元素:di原创 2020-11-07 18:55:03 · 83 阅读 · 0 评论 -
前端成神之路-盒子模型
盒子模型(CSS重点)css学习三大重点: css 盒子模型 、 浮动 、 定位主题思路:目标:理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例1.看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整原创 2020-11-07 13:14:08 · 177 阅读 · 0 评论 -
前端成神之路-复合选择器和CSS三大特性
今日重点:复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签。目的是为了可以选择更准确更精细的目标元素标签。复合选择器是由两个原创 2020-11-07 13:04:12 · 149 阅读 · 0 评论 -
前端成神之路-CSS(选择器、背景、特性)
第01阶段.前端基础CSS 第二天今天我们围绕一个 导航栏案例进行学习知识点。今日重点:复合选择器后代选择器并集选择器标签显示模式CSS背景背景位置CSS三大特性优先级1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器CSS选择器分为 基础选择器 和 复合选择器 ,但是基础选择器不能满足我们实际开发中,快.原创 2020-10-17 08:29:20 · 201 阅读 · 0 评论 -
前端成神之路-CSS文字文本样式
CSS字体样式属性调试工具目标应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常用的emment语法能够使用开发人员工具代码调试1.font字体1.1 font-size:大小作用:font-size属性用于设置字号p { font-size:20px; }单位:可以使用相对长度单位,也可以使用绝对长度单位。相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。注意:我们文字大小以后,原创 2020-10-17 08:14:15 · 497 阅读 · 0 评论 -
前端成神之路-CSS初识
第01阶段.前端基础.CSS初识CSS层叠样式表学习目标理解css的目的作用css的三种引入方式应用css三种引用方式的书写通过样式规则给标签添加简单的样式1.HTML的局限性说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义,比如表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用 表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑。这个是一个外国比较早的购物网站有些人就忍受不了了,你就不能把自己.原创 2020-10-17 08:01:02 · 128 阅读 · 0 评论