CSS阶段总结

CSS布局之左右布局与左中右布局方法:为子元素设置浮动,然后在其父元素上使用clearfix类来清除浮动.代码示例: html部分: <div class="parent clearfix"> <div class="child">a</div> <div class="child">b</div> <div class="child">c</di…

一.学习经历进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的html,css知识,也学到了如何规范的编写代码.但由于个人的懒散,两年半的时间大多是浑浑噩噩的度过,到头来并未学到太多有深度的知识. 再之后,通过专业老师的指导,开始进行前端知识的全面及系统性的学习.而这篇文章便是对这次学习的一次阶段性总结. 二.学习感受细枝末节,一点一滴的积累听专业老师讲课,最明…

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02

HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 div{ transform: rotate(0deg); } 二.三角代码演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&…

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

HTML5 第三天一. 认识 3D 转换 3D 的特点近大远小物体和面遮挡不可见三维坐标系 x 轴:水平向右 -- 注意:x 轴右边是正值,左边是负值 y 轴:垂直向下 -- 注意:y 轴下面是正值,上面是负值 z 轴:垂直屏幕 -- 注意:往外边的是正值,往里面的是负值二.3D 转换 3D 转换知识要点 3D 位移:translate3d(x, y, z) 3D 旋转:rotate3d(x, y, z) 透视:perspctive 3D呈现 transfrom-style 3D 移动…

2021年1月-第02阶段-前端基础-HTML+CSS阶段-Day01

HTML5 第一天一.什么是 HTML5 1.HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新版本的 HTML 语言,定义了新的标签.特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 .CSS3 .javascript, 这也是广义上的 HTML5 2.HTML5 拓展了哪些内容语义化标签本地存储兼容特性 2D.3D 动画.过渡 CSS3 特性性能与集成 3.HTM…

CSS项目学习总结

1.我过去在HTML和CSS阶段是如何学习的? 我一开始学HTML和CSS,更多的是通过看视频.书籍,一个知识点一个知识点地去学习,很少把他们串联起来,看代码多于敲代码. 然而,通过现在这几个项目的实践,我发现自己在DIV+CSS布局上面还是有很多大的问题. 还有,我喜欢一边想怎么布局,一边敲代码. 现在想想,这应该是我制作网站耗时间的一个很主要的原因.没有大局观,就这样从上到下不布局,一旦遇到哪里出了错误,很有可能很多地方都要重新改. 2.看到这些,下一阶段我将选择怎么样的学习方式? 做项目之…

HTML5课程大纲/学习路线

HTML5课程大纲/学习路线这是什么? 这个一个HTML技术路线的课程大纲/学习大纲. 你能用它做什么? 如果你是找工作的人, 利用本大纲, 你可以学习HTML5语言, 做一个HTML前端工程师, 薪资范围6k~12k, 平均7k. 如果你是网站站长, 利用本大纲, 你可以实现一个HTML教程网站, 向广大的web开发者提供免费服务. 如果你是培训机构, 利用本大纲, 你可以建立HTML培训方法. 如果你是互联网公司, 利用本大纲, 你可以根据此大纲组织内部培训. 如果你是在线教育公司, 利用…

vue2.0自学笔记

前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 4.内置组件 5.实例方法 6.实例选项 7.实例属性 8.模板渲染 9.条件渲染 10.组件交互 11.标签属性 12.事件绑定 13.计算属性 14.属性监听 15.表单 16.动画 17.vue-cli项目搭建 18.Vue-router理由:实现单页面切换 19.vuex 四.vue.…

《后端也要懂一点前端系列》使用webpack搭建项目

今天突然有兴致想要学习一下前端的技术,所以特此记录学习前端之路.由于之前在公司做的项目大部分都是关于JSP页面的增删改查,所以前端后端都是一个人来写的,对于前端还只是停留在js.html.css阶段,对于一些前端框架是一点也不了解,正好学习后端的时候遇到了cookie.session.token的问题,特此也简单的了解一下前端知识. 概念介绍大概在网上找了一些的教程,由于是想速成,所以先从搭建项目开始学起了.搭建项目使用的webpack,我觉得前端的webpack和后端的gradle.mave…

从零搭建react+ts组件库（封装antd）

为什么会有这样一篇文章?因为网上的教程/示例只说了怎么做,没有系统详细的介绍引入这些依赖.为什么要这样配置,甚至有些文章还是错的!迫于技术洁癖,我希望更多的开发小伙伴能够真正的理解一个项目搭建各个方面的细节,做到面对对于工程出现的错误能够做到有把握. 最近使用阿里低开引擎的时候,想要封装一套组件库作为物料给低开引擎引入.根据低开引擎的物料封层模式,我的诉求是做一套组件库,并且将该组件库以umd方式生成.当然,从零开始开发组件库也是一个比较耗时耗力的事情,所以我想到将antd组件封装,于是催生出了…

Matplotlib数据可视化（3）：文本与轴

在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

2020年12月-第02阶段-前端基础-CSS Day02

CSS Day02 复合选择器后代选择器并集选择器 1. CSS复合选择器理解理解css复合选择器分别的应用场景为什么要学习css复合选择器 CSS选择器分为基础选择器和复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的 1.1 后代选择器(重点) 概念: 后代选择器又称为包含选择器作用: 用来选择元素或元素组的子孙后代其写法就是把外层标签写在前…

2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(一)

品优购项目(一) 目标: 能会引入ico图标能简单看懂网站优化的三大标签能使用字体图标 ( 重点 ) 能说出我们css属性书写顺序 1. 品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成首页.列表页.详情页.注册页面的制作 2. 项目背景现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需要的技术也是较为复杂的, 复习.总结.提高前面所学布局技术. 3. 设计目标保证浏览器 ie7及以上, 火狐, 360, safari,chrom…

阶段02JavaWeb基础day01html&css

HTML 基础概念全写: HyperText Mark-up Language 译名: 超文本标记语言超级文本标记语言是一种规范,一种标准, 超文本标记语言它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等).浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错…

前端阶段_div以及css介绍

1.div div是html的一个标签,是块级元素,单独使用没有意义,必须结合css来使用,进行网页布局 2.span span是一个html标签,是一个内联元素,主要对括起来的内容进行修饰 3.<style type="text/css"></style> 此标签内进行写css 4.css的选择器 1.标签选择器标签名{ 样式内容 } 2.类选择器 .class名{ 样式内容 } 3.id选择器 #id名{ 样式内容 } 4.层级选择器标签标签{ 样式内…

2020年12月-第02阶段-前端基础-CSS Day07

CSS Day07 CSS高级技巧理解能说出元素显示隐藏最常见的写法能说出精灵图产生的目的能说出去除图片底侧空白缝隙的方法应用能写出最常见的鼠标样式能使用精灵图技术能用滑动门做导航栏案例 1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现! 1.1 display 显示(重点) display 设置或检索对象是否及如何显示. display: none 隐藏对象 display:block…

2020年12月-第02阶段-前端基础-CSS Day05

CSS Day05 1. 学成在线页面制作理解能够说写单页面我们基本的流程能说出常见的css初始化语句能说出我们CSS属性书写顺序应用能利用ps切图能引入外部样式表能把psd文件转换为html页面学成在线的目的就是为了串联前面的所有知识. 取义学有所成,为师之期望,君等成才者也,故曰学成网是也~~ 1.1 前期准备素材学成在线PSD源文件开发工具 = PS(切图) + sublime(代码) + chrome(测试) 1.2 前期准备工作工欲善其事,必先利其器. 先把我们…

2020年12月-第02阶段-前端基础-CSS Day04

1. 浮动(float) 记忆能够说出 CSS 的布局的三种机制理解能够说出普通流在布局中的特点能够说出我们为什么用浮动能够说出我们为什么要清除浮动应用能够利用浮动完成导航栏案例能够清除浮动能够使用PS切图工具 1.1 CSS 布局的三种机制网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了** 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位**,其中: 1.普通流(标准流) 块级元素会独占一行,从上向下顺序排列: 常用元素:div.hr.p.…

2020年12月-第02阶段-前端基础-CSS Day03

CSS Day03 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位主题思路: 理解: 1.能说出盒子模型有那四部分组成 2.能说出内边距的作用以及对盒子的影响 3.能说出padding设置不同数值个数分别代表的意思 4.能说出块级盒子居中对齐需要的2个条件 5.能说出外边距合并的解决方法应用: 1.能利用边框复合写法给元素添加边框 2.能计算盒子的实际大小 3.能利用盒子模型布局模块案例 1.看透网页布局的本质网页布局中,我们是如何把里面的文字,图片,按…

2020年12月-第02阶段-前端基础-CSS字体样式

CSS字体样式属性调试工具应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式 1.font字体 1.1 font-size:大小作用: font-size属性用于设置字号 p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. 相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少. 注意: 我们文字大小以后,基本就用px了,其他单位很少使用谷歌浏览器默认的文字大小为16px 但是不同浏览器可能默认显示的字号…

2020年12月-第02阶段-前端基础-CSS基础选择器

CSS选择器(重点) 理解能说出选择器的作用 id选择器和类选择器的区别 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如一只眼睛的一组,剩下的一组选择器的作用找到特定的HTML页面元素 CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来必须记住的 css 就是分两件事, 选对人, 做对事. h3 { color: red; } 这段代码就是2件事, 把 h3选出来, 然后把它变成了红色. 以后我们都这么干. 选择器…

2020年12月-第02阶段-前端基础-CSS初识

CSS层叠样式表理解 css的目的作用 css的三种引入方式 1.HTML的局限性说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用<p> 表明这是一个段落,用`<img>` 表明这儿有一个图片, 用`<a>` 表示此处有链接. 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑. 这个是一个外国比较早的购物网站有些人就忍受不了了,你就不能把自己打扮得漂亮一点吗? HTML说,我试试.…

2021年1月-第02阶段-前端基础-HTML+CSS进阶-VS Code 软件

软件安装 VSCode软件能够安装 VS Code 能够熟练使用 VS Code 软件能够安装 VS Code 最常用的插件 1. VS Code简介 1.1 VS Code 简介 Visual Studio Code (简称 VS Code / VSC) 是微软公司推出的一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补.GIT 等特性,支持插件扩展等等. 推荐理由比 sublime 开源,比 webstorm 更轻智能提示很强大自带 emme…

2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(三)

品优购项目(三) 1. 首页制作 1). 楼层区 floor 注意这个floor 一个大盒子包含, 不要给高度,内容有多少,算多少 2). 家用电器模块这个模块简单不需要写样式版心居中对齐因为这些模块基本相同,下面的模块基本用这些样式所以咱们下面两个盒子的命名是: 1号盒子 box-hd 给一个高度, 有个下边框里面分为左右2个盒子 2号盒子 box-bd 不要给高度. 3). box-hd 模块有高度左边 h3 盒子右边 div 命名为 tab-list 因为用到…

2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(二)

品优购项目(二) 1. 品优购首页布局命名集合: 名称说明快捷导航栏 shortcut 头部 header 标志 logo 购物车 shopcar 搜索 search 热点词 hotwrods 导航 nav 导航左侧 dropdown 包含 .dd .dt 导航右侧 navitems 页面底部 footer 页面底部服务模块 mod_service 页面底部帮助模块 mod_help 页面底部版权模块 mod_copyright 1). nav 导航栏制作 nav 盒子通栏有高度而且有个…

2020年12月-第02阶段-前端基础-CSS Day06

CSS Day06 定位(position) 理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局应用能写出淘宝轮播图布局 1. CSS 布局的三种机制网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 1.普通流(标准流) 2.浮动让盒子从普通流中浮起来 -- 让多个盒子(div)水平排列成一行. 3.定位将盒子定在某一个位置自由的漂浮在其他…

2020年12月-第01阶段-前端基础-HTML CSS 项目阶段(四)

1. 品优购项目(四) 1). 详情页 detail.html 常用单词名称说明主体 de_container 面包屑导航 crumb_wrap 产品介绍 product_intro ( introduction介绍) 预览包 preview_wrap(左侧部分) 预览缩略图 preview_img 预览列表 preview_list 左按钮 arrow_prev 右按钮 arrow_next 小图列表 preview_items 产品详细信息区域 itemInfo_wrap (右侧部分)…

CSS 3学习——transition 过渡

以下内容根据官方规范翻译以及自己的理解整理. 1.介绍这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡transitions 通常情况下,当CSS属性发生改变时,对应元素的CSS属性值立即从旧值变为新值,渲染结果也是立即更新.这部分介绍一种方法,可以通过使用新的CSS属性指定过渡的过程.这些新属性让元素以平滑动画的形式逐渐地从旧状态过渡到新状态. 比如,假设一个元素的left属性和backgroun…

【CSS进阶】CSS 颜色体系详解

说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照这个顺序进行,内容十分基础,可选择性跳到相应内容处阅读. 色彩关键字嗯,色彩关键字很好理解.它表示一个具体的颜色值,且它不区分大小写.譬如这样 color:red 的 red 即是一个色彩关键字. 在 CSS3 之前,也就是 CSS 标准 2,一共包含了 17 个基本颜色,分别是: 而到了 CSS…

深入理解CSS过渡transition

× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果.过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方.本文将介绍和梳理关于CSS过渡的知识定义过渡transition是一个复合属性,包括transition-property.transition-duration.transition-…