【2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局】的更多相关文章

2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局

移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提…

2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗 手机浏览器,猎豹浏览器,以及其他杂牌浏览器. 国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手 机操作系统都是基于Android修改开发的一样. 总结:兼容移动端主流…

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年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…

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…

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

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

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

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

2021年3月-第03阶段-前端基础-JavaScript基础语法-JavaScript基础第01天

1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令. 1.2 计算机语言 计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介. 计算机语言的种类非常的多,总的来说可以分成机器语言,汇编语言和高级语言三大类. 实际上计算机最终所执行的都是 机器语言,它是…

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

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

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

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

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

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

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

Web前端_流式布局（百分比布局）

移动Web_流式布局(百分比布局) writer:late at night codepeasant 1(百分比布局) ☞核心知识点 1.流式布局(百分比布局) 2.视口设置 ☞今日目标 1. 能够使用流式布局完成jd页面的制作 ☞移动端一些概念介绍[了解为主] 屏幕尺寸 指的是屏幕对角线的长度 设备大小(物理像素) 例如: 1366 * 768 px指的是在水平方向有1366个像素点,在垂直方向有768个像素点 像素密度(PPI) 概念: 每英寸所能容纳像素点的个数 (像素密度越大,画面越精细…

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

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

2020年12月-第01阶段-前端基础-HTML常用标签

1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了. 1.1 排版标签 排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签. 1)标题标签h (熟记) 单词缩写: head 头部标题 title 文档标题 为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标…

2021年3月-第01阶段-Linux基础-Linux系统概念-Linux命令

Linux系统基本概念 图形界面: Ctrl+Shift +号 //调整命令终端变大 Ctrl - 号 //调整命令终端变小 命令终端: ~ 家目录:用户的私有场所,其他用户不能随便访问 root超级管理员家目录:/root 普通用户的家目录:/homt/用户名同名,lisi用户的家目录:/home/lisi Linux系统而言: 多用户的系统:允许同时有很多个用户登录系统,使用系统里的资源 多任务的系统:允许同时执行多个任务 严格区分大小写:命令,选项,参数,文件名,目录名都严格区分大小写 一…

2020年12月-第01阶段-前端基础-表格 table

表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常用的一种标签,但不是用来布局,常见显示.展示表格式数据. 因为它可以让数据显示的非常的规整,可读性非常好. 特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理 ,虽然 div 布局也可以做到,但是总没有表格来得方便. ps: 这些地方用表格,你会觉…

2020年12月-第01阶段-前端基础-认识HTML

1. HTML 初识 HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言. HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) html作用 网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了. 所谓超文本,有2层含义: 1.因为它可以加入图片.声音.动画.多媒体等内容(超越文本限制) 2.不仅如此,它还…

2020年12月-第01阶段-前端基础-认识WEB

认识WEB 1.认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 思考: 网页是如何形成的呢? 总结 网页有图片.链接.文字等元素组成,我们后面的任务就是要把这部分网页元素用代码写出来. 2. 浏览器介绍 浏览器是网页显示.运行的平台,常用的浏览器有IE.火狐(Firefox).谷歌(Chrome).Safari和Opera等.我们平时称为五大浏览器. 2.1 查看浏览器占有的市场份额 查看网站:http://tongji.bai…

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 (右侧部分)…

2021年3月-第01阶段-Linux基础-Linux系统的启动流程

Linux系统的启动流程 理解Linux操作系统启动流程,能有助于后期在企业中更好的维护Linux服务器,能快速定位系统问题,进而解决问题. 上图为Linux操作系统启动流程 1.加载BIOS 计算机电源加电质检,首先加载基本输入输出系统(Basic Input Output System,BIOS),BIOS中包含硬件CPU. 内存.硬盘等相关信息,包含设备启动顺序信息.硬盘信息.内存信息.时钟信息.即插即用(Plug-and-Play,PNP) 特性等.加载完BIOS信息,计算机将根据顺序进…

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 盒子通栏有高度 而且有个…

web前端基础知识-（六）web框架

一.web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n") client.send("Hello, Seven"…

前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则…