day01
1.阿里云服务器购买
2.阿里云服务器环境配置（ubuntu16.04 + apache2 + jdk1.8 + mysql-server-5.7）
购买链接：https://developer.aliyun.com/plan/grow-up
手机端注册
会员名：中文+数字
手机号：自己手机号
登录
实名认证
刷新刚刚购买页面
(注意这个是新人+学生专享的活动)

购买完毕后，重置服务器root用户密码，然后牢记连接阿里云服务器1）通过可视化软件 Xshell / Putty1. 云服务器的地址47.101.151.682. 账号 密码输入密码时，控制台不会显示密码的内容和长度，直接输入你的密码，输完成后按回车2）windows/mac终端>ssh root@47.94.46.113 3）阿里云官网控制台 远程连接阿里云安装服务1）✅Apache静态服务器# apt update    // 用来更新软件源# apt install apache2Apache部署目录/var/www/html找到Apache默认页面的位置 cd /var/www/html/lsindex.htmlvi index.html按两次d 删除当前行shift+i进入编辑模式2）✅Java环境jdkapt install openjdk-8-jre-headless测试java -version3）✅MySQL数据库apt install mysql-server-5.7测试# mysql -uroot -p修改配置文件=> 可以实现远程连接阿里云的数据库1) mysql> use mysql   切换数据集2) mysql> select user,host from user;3) mysql> update user set host='%' where user='root';4) # cd /etc/mysql/mysql.conf.d# vi mysqld.cnf找到bind-address,将光标定位到127的位置，然后按 i 进入插入模式将127.0.0.1 修改为 0.0.0.0按 esc 退出插入模式按:（英文冒号）进入底行模式输入 wq 点击回车（保存并退出）5）重启mysql服务# service mysql restart6）阿里云防火墙的3306端口是否打开腾讯云（安全组）
3.本地软件安装navicat安装1. 自定义安装2. 目标文件夹直接改盘符 改为C盘之外的3. 选择创建桌面快捷方式4. 安装5. 广告勾选掉6. 完成navicat连接云数据库1. 菜单栏左上角-连接-mysql2. 连接名暂时不填3. 主机名或IP地址：47.101.151.68（公网ip）4. 端口：33065. 用户名：root6. 密码：****putty

博客：一周3篇（大厂就业）

https://developer.mozilla.org/zh-CN/docs/

html5
前端三要素：
js 动画（能说会道会交流）
css 美化（妆容）
html 结构（身材）

jquery echarts (dom)
vue/react/angular (html/css/js)脚手架（http://localhost:3000）
sass/less   （css）

移动互联方向
大前端（移动端）

html5
超文本标记语言
解释型标签语言

运行机制？
1) 开发pc - 部署pc - pc-浏览器 file:// 【开发】
2) 开发pc - 部署云服务 - pc-浏览器 http://
apache2 - scp/filezilla
http://www.tyut.edu.cn/
B/S架构 b浏览器(html、css、js) s服务器
面试题：
1. 访问百度/淘宝，浏览器-页面渲染出来中间经历了什么？
2. h5 与h4区别？
标准
doc声明不同

h5新增标签
h5新增api

超文本:
超级文本：字符，超级链接，图片，音频，视频，画布（地图、图表、3D模型）
标记：
标签进行标记， html标签（无法使用自定义标签）

标题1

段落

语言：
c、java 编译型语言，
hello.c --gcc–> hello.o --运行–>linux
Hello.java --javac–> Hello.class --运行–> jvm --> linux/win
html、js、css 解释型语言
hello.html --> 浏览器 -> linux/win

执行效率：c > java > js

工具
vscode(koroFileHeader)
前端地位
软件开发主流架构（前后端分离）

前端(html、css、js)
浏览器（终端）显示
pc（淘宝pc）移动端（android/ios/pad h5、混合式app）小程序大屏

后端(Java / python / c# / Nodejs)
逻辑（登录、注册）
数据库操作
中间件操作（消息队列…）
4. html结构
继承 xml

文档类型： html

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>

head中的内容无法显示到浏览器视口中
charset 设定编码格式
viewport 适配移动端
pc分辨率 1480 * 800
手机分辨率 2000 * 400
title 网页标题，显示在选项卡中
apache2 favicon.ico
5. 标签
不区分大小写
单标签

双标签

元素
标签 + 内容

这是一个一级标题

logo

属性
位于开始标签中
核心属性（通用，绝大多数标签都具有的属性）
id 唯一标识
class 分类，可以重复
title 悬浮提示
style 添加css规则的
自有属性

百度一下，你就知道

注释

不会被浏览器解释，注释是用来描述代码含义。
6. 块标签（块元素）
特点：
1) 独占一行空间（100%）
2) 高度默认为0，高度由内容决定
3) 可以指定宽、高
4) 用来搭建页面框架
元素：
h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
h5：header、footer、nav、section、article、aside、address… 语义化标签
简单大方、无招胜有招
7. 行内标签（行内元素）
特点：
1) 行内与其他行内元素共享一行空间
2) 宽高都由内容决定
3) 无法指定宽、高
4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。
元素：
span、a、img
装饰类型标签：strong b em i sub sup …

功能标签：
a
超级链接
href="" 跳转
url 跳转到一个外网地址中
相对路径：相对于当前代码所在文件的路径
. 当前目录下
… 当前目录下的上一级目录
绝对路径：相对于基准点
linux操作系统中
/ 操作系统根目录也就是 /

      /var/www/html  apache2部署目录index.html  / 代表apache的根部署目录 即 /var/www/html锚点1. 定义锚点  <div id="top">顶部</div>2. 跳转     <a href="#top">跳转顶部</a>其他target=""   目标_self   默认值 ，当前页面_blank  新页面
imgsrc   图片地址1. 网络资源2. 相对路径3. 绝对路径4. base64格式值alt   图片找不到时候的文本替换

功能标签（功能元素）

table 表
tbody 表格体 thead、tfoot
tr 行
td、th 列（容器）
子标签可以为任意其他标签
行中的列数在经过计算后应该是相同的
form
用来进行前后台数据交互（默认情况下，同步交互：JavaEE(jsp)、nodejs(模板)）
ajax 异步交互
前置技术： http协议

form( action 后端处理接口，enctype 表示编码方式，method请求方法)method取值get   用于查询操作，参数携带在url后面 post  用于更新【保存、修改、删除】操作，参数携带在请求报文请求体中enctype取值：application/x-www-form-urlencoded查询字符串（表单编码）将特殊字符转换为16进制 key=val&key=val&...schoolName=太原理工大学&userName=陈明multipart/form-data用于表单中有附件提交的时候，二进制，无需进行编码text/plain纯文本提交1) input     输入框注意：input(text、password、radio、checkbox)必须添加name属性，(radio、checkbox)必须添加value属性<input type="text" />   单行文本框<input type="password" />  密码<input type="radio" />    单选按钮<input type="checkbox" />  复选按钮<input type="file"/>        附件<input type="submit" /> 提交按钮<input type="reset" />  重置按钮<input type="date" />  日期选择器（h5新增，兼容性差，一般不用）...2) textarea  多行文本<textarea name="description" cols="50" rows="4"></textarea>3) select    下拉菜单<select name="address"><option value="js">江苏</option><option value="sx">山西</option><option value="hn">河南</option></select>

iframe

9、 css3
层叠样式表

在html中应用
css嵌入到html的头部的style标签内
css嵌入到元素style属性内
css规则与html结构分离（解耦）
css规则可以复用
css单独写入到.css文件，通过link引入到html
语法
注释： /* 注释内容 */
语法：
选择器 {
样式规则
}
.box {
background-color:lightcoral;
color: #fff;
width: 300px;
margin-bottom: 1em;
}
选择器

1. 核心选择器id选择器      利用了html元素的id属性，唯一#one {}    选中id为one的元素class选择器   利用html元素的class属性，非唯一.box {}    选中class为box的元素标签选择器     利用标签名进行选择div {}     选中所有的div元素并且选择器div.box {} 选中div元素，并且这个div的class为box和选择器div,.box{} 选中div元素和class为box的元素普遍选择器* {}       选中所有元素
2. 层次选择器( 两个选择器配合使用)子选择器    通过父元素选择子元素>.menu > li {} 后代选择器空格.menu li {}<ul class="menu"><li></li><li><ul><li></li><li></li></ul></li></ul>兄弟选择器~ 当前元素之后的所有兄弟ul.rank > li:nth-child(2) ~ *{}第二个li之后的所有li+ 当前元素之后的下一个兄弟ul.rank > li:nth-child(2) ~ +{}第三个li
3. 属性选择器(属性过滤器)，一般应用在表单元素input[name]   具有name属性input元素input[name='username'] 具有name属性，并且name属性值为username的input元素input[name^='u']具有name属性，并且name属性值以'u'作为开始input[name*='u']具有name属性，并且name属性值包含'u'input[name$='u']具有name属性，并且name属性值以'u'作为结尾
4. 伪类选择器(伪类过滤器):first-child:last-child:nth-child(n) 第n个孩子阶段  :visited      访问过的:hover        光标悬浮上去:active       a标签:focus        聚焦
5. 伪元素选择器::afterul.menu::after {}在class为menu的ul元素中追加一个子元素<ul class="menu"><li>one</li><li>two</li>::after</ul>ul.menu::before {}在class为menu的ul元素中插入一个子元素<ul class="menu">::before<li>one</li><li>two</li></ul>

计算选择器优先级
当多个选择器中的相同规则作用于同一个元素的时候，我们纠结到底这个元素上使用哪个规则的时候。

公务员 -> 考研211+ -> 进入BAT（30%） -> 进入中小型私企（0）1. 权重（积分）1000  style100   id10    class、伪类1     元素选择器、伪元素1+10 + 1 + 10 + 1+ 10 + 1ul.menu > li.menu_item > ul.sub_menu > li {color: lightcyan; /* 34*/}#introduce {color:lightcoral    /*100*/}.si {color: gray !important;}
2. 顺序（排名）当权重值相同的情况下，后者覆盖前者
3. 特权（!important）脱离了权重和顺序规则

样式规则

1. 字体规则可被继承font-family 字体字体栈 "Microsoft YaHei","宋体"在浏览器所在pc从字体栈顶到底寻找字体，找不到使用默认字体font-size   字体大小12pxfont-weight 字体粗细程度100~900boldbolderfont-style  是否是斜体italicnormalcolor       字体颜色line-height 行高长度的相对单位1pxem    相对于当前元素上的字号rem   相对于根元素上的字号  font  速写形式font: font-style font-weight font-size/line-height font-familyfont: normal normal 14px/1.2 '宋体','微软雅黑';font: 14px/1.2 '宋体','微软雅黑';网络字体(iconfont)应用分析实现过程@font-face {font-family:"iconfont"src:}.iconfont {font-family:"iconfont"}.icon-Backward-Button:before {content: "\e82e";}
2. 文本规则text-align  文本在容器中显示方式centertext-decoration-line:underline;text-decoration-style: double;text-decoration-color: lightsalmon;text-decoration: none;text-indent     缩进text-transform  控制大小写white-space：容器内的文本是否会主动换行nowrap  不换行overflow: 容器内的内容超出部分如何处理？hiddentext-overflow: 文本超出部分如何显示提示？ellipsis '...'
3. 列表规则用于设置有序列表、无需列表、自定义列表的显示方式 ul、ol、dllist-style:none;
4. 其他规则cursor:pointer;visibility:hiddenopacity:0.2display:none; 【三十年河东三十年河西】改变元素的显示方式noneblock   将行内元素转换为块元素inline  将块元素转换为行内元素inline-block  行内块元素与其他行内元素共享一行空间可以指定宽高面试题：如何将一个文本在块元素进行水平居中？text-align:center如何将一个文本在块元素进行垂直居中？如何将一个块元素进行水平居中？【3种】overflow:overflow-x,overflow-y速写overflow:hidden;overflow:scroll; overflow:auto;容器，容器的内容的大小超过容器本身outline外圈线框outline-color: pink;outline-width: 2px;outline-style: solid;outline-offset: 1px;outline:
5. 盒子规则盒子 - 块元素margin  外边距（盒子外边框距离其他元素的距离）margin: 10px;       上右下左margin: 10px 20px;  上下，左右margin: 10px 20px 30px;   上 左右 下margin: 10px 20px 30px 40px; 下 右 下 左速写形式，外边距，上下外边距会进行重叠margin-topmargin-rightmargin-bottommargin-leftborder 边框border-widthborder-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-styleborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-colorborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder 速写border: 2px solid #ccc;padding 内边距(内容距离盒子内边框的距离)padding: 10px;       上右下左padding: 10px 20px;  上下，左右padding: 10px 20px 30px;   上 左右 下padding: 10px 20px 30px 40px; 下 右 下 左速写形式，外边距，上下外边距会进行重叠padding-toppadding-rightpadding-bottompadding-leftwidth/height宽高box-sizing(盒子模式)内容盒子（普通盒子 ， 默认盒子）content-box;盒子实际占据的宽度 2borderWidth + 2padding + width盒子实际占据的高度 2borderWidth + 2padding + height边框盒子（怪异盒子 ie低版本）border-box;盒子实际占据的宽度 :widthwidth = 2borderWidth + 2padding + 内容宽盒子实际占据的高度 :heightborder-radius:2px外圆    300px 内圆    200px期望 内圆由200 变化到250，并且，中心点不变backgroundbackground-color background-imagebackground-repeatbackground-sizebackground-positionbackground-clipbackground-orignbackground-attachmentbackground  速写形式
6. 默认文档流 （y轴）块元素， 独占一行空间，高度由内容决定。块元素默认从上往下排列
7. 浮动布局（x轴）float:left浮动元素：1) 脱离文档流2) 块元素的宽度不再是100%，由内容决定3) 块元素不再支撑其父元素4) 同一层次（兄弟关系）浮动元素会在一行排列，当浮动元素宽度总和大于父元素的时候会发生换行。clear清理浮动left  不与左浮动元素在同一水平线上right 不与右浮动元素在同一水平线上
8. 伸缩盒布局（x轴）div.container > divul.container > li1) 概念伸缩盒容器 div.container 、ul.container伸缩盒元素 div、li主轴    默认主轴x轴，伸缩盒中，伸缩盒子元素沿着主轴来进行排列交叉轴  与主轴垂直的轴2) 规则伸缩盒容器display:flex;强制让它的子元素沿着主轴方向中显示，并且子元素不会脱离文档流，交叉轴上元素的高度如果没有指定，应该和父元素保持一致。flex-direction:row;定义主轴方向，row 表示主轴是x轴，column表示主轴为y轴flex-wrap:nowrap 当子元素的长度加起来超过主轴上的父元素的宽度，默认不换行，align-items: stretch;定义伸缩盒容器中的子元素在交叉轴上的排列方式justify-content:space-around;定义伸缩盒容器中的子元素在主轴上的排列方式伸缩盒元素flex-basic:   主轴上的基础长度（基本工资）flex-grow:    主轴上剩余空间分配的份数（分红）flex-shrink:  主轴上亏损空间的分摊份数（亏损）
9. 定位布局(z轴)position:static  静态（默认、非定位元素）relative  相对（定位元素）absolute  绝对（定位元素）fixed     固定（定位元素）sticky    粘滞（定位元素）定位元素的特点: 可以使用定位规则。top right bottom left1) 相对定位1. 不脱离文档流2. 相对于它原来所在位置移动2) 绝对定位 1. 脱离文档流2. 相对于距离它最近的父定位元素位置移动！如果所有的父元素都不是定位元素，相对于浏览器视口位置移动一般情况下，绝对定位元素应该嵌套在相对定位元素内容来使用3) 固定定位1. 脱离文档流2. 相对于浏览器视口进行定位4) 粘滞定位1. 在没有达到阈值的时候是不脱离文档流（相对），达到阈值脱离文档流（固定）2. 通过left、top、right、bottom来设定阈值定位布局的应用：1. 二级栏目2. 模态框3. 特殊布局
10. 动画设计师；美工；前端（实现）动态网站（具有动画 错误！）是数据是动态的。1) 实现步骤1. 定义动画帧@keyframes 动画名{from {// 开始帧}to {// 结束帧}}@keyframes 动画名{0% {// 开始帧}20% {}...100% {// 结束帧}}2. 设定动画（贺卡）animation-name: move; 动画名animation-duration: 2s;持续时间animation-timing-function: linear;时间曲线函数（自由落体，贝塞尔曲线）animation-fill-mode:forwards;填充模式，动画结束后保留哪一帧规则animation-iteration-count: 2;  动画迭代次数 infiniteanimation-direction: alternate-reverse;   动画执行的方向 from->to , to->fromanimation-play-state: paused;动画状态animation-delay: 1s;延迟时间animation: move 2s 1s 2 linear;动画的速写形式2) 案例（呼吸灯）3) 案例（梦幻西游）
11. 动画库 animate.css动画帧、动画设定规则都有第三方完成，我们直接使用class即可1) 引入动画库<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">2) 使用1. 直接调用动画设定类<div class="box animate__animated animate__infinite animate__bounce"></div>2. 引用关键帧<style>.bounce {animation: flash 10s linear infinite;}</style><div class="box bounce"></div>
12. 过渡过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）transition-property: width;过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性transition-duration: 2s;过渡持续时间transition-delay: 0; 过渡延迟时间transition-timing-function: linear; 时间曲线函数transition:transform,background-color 2s,2s 0s linear;速写形式
13. 变形transform:变形函数1. 缩放scale(2)2. 平移translate(100px,50px)3. 旋转rotate(360deg)4. 拉伸skew(45deg)
14. 媒体查询（响应式布局）网页类型（产品生态）pc网页          （html5/css3）火狐          淘宝、网易严选h5（移动端）网页  (html5/css3)uc/safari     淘宝、网易严选app(移动端)      html5、css3 -(ionic webview) webapp【ios不允许上架，andriod】混合式开发 原生/h5css3混合式开发 框架（rn/weex - js）+ mvvm思想（vue）原生开发语言 androidandroid/ios   淘宝、网易严选* 后台管理系统（适配 - 自动适配，响应式vue ）大屏（特殊屏幕）网页
9. 定位布局（z轴）

注意：
html源码中，多个空格等于一个空格，一个换行也等于一个空格

面试题：
如何理解语义化？
利用标签表达出来的含义（而不利用标签表达的样式）来表达页面结构
换句话说，就是在合适的页面位置上使用合适的标签
hello world
什么是盒子模型？
内容盒子（默认盒子） width = 内容宽
边框盒子（怪异盒子 ie低版本）width = 内容宽 + padding + border
居中？
文本在盒子中水平居中？
text-align:center
文本在盒子中垂直居中?
1) line-height = height
2) vertical-align 行内元素？
盒子应该位于容器内部，容器通常情况下要比盒子大
盒子在容器中水平居中?
1) margin: 0 auto;
2) 定位 margin-left:50%; left:-50px; position:relative;
3)
盒子在容器中垂直居中？
2) 父元素padding, box-sizing:border-box
2) 父元素padding + 子元素margin, box-sizing:border-box
动画题目：
1. 效果要求
（1. 定义：目前两圈的大小为常规大小
（2. 正常运动轨迹：两圈常规大小 -> 外圈向外扩大10px（2000ms） -> 外圈向内回归正常大小（2000ms）-> 内圈向内缩小12px（2500ms) -> 内圈放大至常规大小（2500ms) -> 循环
（3. 加速运动轨迹：两圈常规大小 -> 外圈向外扩大10px（1000ms） -> 外圈向内回归正常大小（1000ms）-> 内圈向内缩小12px（1200ms) -> 内圈放大至常规大小（1200ms) -> 循环
（4. 加速运动轨迹下，当文字显示为：“我很生气”时，内圈的颜色变为红色
（5. 加速运动轨迹下，当文字显示为：“我很高兴”时，内圈的颜色变为绿色
这道题你做下分别用JS和CSS3来实现做好了发我邮箱

第三方库(职业技能)
iconfont
字体图标库，原理：网络字体 @font-face() font-family
bootstrap
栅格布局（grid layout，原理：flex、float
animate.css
动画库，原理：animation

day03 简单的重构网页 Html+CSS
html元素 css 选择器属性值 git使用

git介绍

克隆别人的仓库，就能拿到你当时克隆时候仓库里的文件git clone 仓库地址
当仓库发生了更新，使用git pull命令获取最新内容tyut-2021 %  git pullAlready up to date.git错误提示：
fatal: not a git repository (or any of the parent directories): .git

网页重构经典网站去重构
header：logo 搜索框
nav：导航栏
轮播图
address：地址联系方式
footer：网站底部联系方式联系地址版权其它网站的链接
html文件后缀名
.html（建议使用这个） .htm
css文件的后缀名
.css

day07 动画：呼吸灯、梦幻西游
/* 指定应用的一系列动画属性值是一个由@ keyframes 定义的动画序列*/
animation-name: outer;
/* 指定一个动画周期的时长单位支持s ms 无单位值无效 /
animation-duration: 5s;
/ 定义CSS动画在每一动画周期中执行的节奏。 /
animation-timing-function: linear;
/ 定义动画在结束前运行的次数 infinite代表无限循环 number默认是1 可以用小数 */
animation-iteration-count: infinite;

复习：

大前端
第一阶段重构（美工，页面仔）
psd设计图 -> html、css、js
html5 + css3 15天（网易严选）
第二阶段 dom驱动框架
linux操作系统 3天
Javascript（es5/dom/bom）15天
jquery、bootstrap、antv、echarts、highcharts、地图（腾讯、百度、高德）
行学天下门户(后台管理系统、门户前台、swagger)
第三阶段企业级开发阶段
es6、typescript 5天
vue全家桶（vue + vuerouter + vuex + elementui + axios【ajax】 + …）
家政服务预约云平台
第四阶段拓展阶段
小程序
react全家桶（react + reactrouter + redux + antdesign + axios + …）
reactnative (混合式app开发 - app)
第五阶段服务端开发阶段
nodejs(io流、http网络模块)
express
egg
第六阶段优化阶段
nuxt.js vuepress
…
校招(大厂 25w起步)
绝大多数大厂已经开始！！！
网申（报名） -> 笔试 -> 面试3轮 -> offer

简历数据结构 **授课 ** ***** M起

1. 个人信息                 算法学校 专业               数据库、网络* 博客(会学习会分享)     【leecode、牛客】* gitee、github（专业）
2. 个人技能招聘需求
3. 项目经验* TYUT新闻网技术栈预览地址描述：你在项目组中的贡献2~3个
4. 获奖经历

html结构
语法
注释
标签
元素
实体
一个回车、多个空格表示一个空格
空格
>
<
块元素
搭建页面骨架；独占一行空间、高度由内容决定、指定宽高
行内元素
填充；与其他行内元素共享一行空间、不可以指定宽高(css中)
a
img 可以指定
功能

表格
表格组件 div -模拟-> table
table
caption
thead
tfoot
tbody
tr
td/th : rowspan colspan
表单
用于向后台提交数据，原生表单和后台交互的数据格式主要还是为查询字符串
qs ‘name=terry&age=12’
json ‘{“name”:“terry”,“age”:“12”}’

form : action，enctype，methodinput : name(text,password,file,radio,checkbox...), value(radio,checkbox),placeholderselect:name > option: valuetextarea: name,value,rows,cols

iframe
载入外部页面

css相关技术点

css介绍
层叠样式表
css在html使用方式

1) style标签
2) style核心属性
3) link

语法
注释 /* */
声明：
选择器 {

选择器

1) 核心选择器id、class、元素、并且div.box、和 div,.box、*
2) 层次选择器子代  ul.menu>li后代  ul.menu li兄弟  + ~
3) 属性过滤器[name][name='username'][name*='u'][name^='u'][name$='u']form.login_form > input[checked]
4) 伪类过滤器子元素:nth-child(n)     n序号，从1开始:nth-child(2n+1)  1、3、5...:nth-child(even)  偶数:nth-child(odd)   奇数:first-child:last-child状态:hover:visited
5) 伪元素选择器::after::before<ul><li>one</li><li>two</li>::after</ul>ul::after {content:"hello world"}

文本规则
text-align
center/left/right
text-decoration
none
text-indent
overflow:hidden
white-space: nowrap
text-overflow:ellipsis
vertical-align: 行内元素在容器中的垂直排列方式
display:inline-block;
字体规则
color:red;
line-height: 行高
font-size:12px
font-family:‘Microsoft Yahei’,‘微软雅黑’;
font-style:是否打开斜体 normal/italic
font-weight: bold/bolder
font: style weight size/line-height family;
html {
font: 14px/1.5 ‘Microsoft Yahei’,‘微软雅黑’
}
px 像素
em 相对于当前元素的字体大小
rem 相对于html元素上设置字体大小

网络字体（应用 iconfont）
1. 获取字体文件 .ott .woff... (字体方正)  阿里云服务器（共享）
2. css3@font-face {font-family:'李氏名字';src:url('./lszi.woff')}.logo {font-family:'李氏名字';font-size:12px;}------------------------@font-face {font-family: "iconfont"; /* Project id 2736919 */src: url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff2?t=1628652186798') format('woff2'),url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.woff?t=1628652186798') format('woff'),url('//at.alicdn.com/t/font_2736919_pbwmmlyvs57.ttf?t=1628652186798') format('truetype');}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-fuwufankui:before {content: "\e67d";}
3. 应用1) 引入iconfont.css (声明了新字体，声明了很多class)2) 使用<i class="iconfont icon-fuwufankui"></i>

列表规则
其他规则
盒子规则
块元素，布局时候使用盒子来进行，y轴，x轴，z轴

1) 组成：margin、border、padding、内容
2) 盒子模型默认盒子（box-sizing:content-box）width = 内容宽  即 盒子实际占据的宽度 = borderWidth + padding + 内容宽怪异盒子（box-sizing:border-box）width = borderWidth + padding + 内容宽  即 盒子实际占据的宽度 = width
3) 背景规则background-colorbackground-imgbackground-repeatbackground-positionbackground-originbackground-sizebackground-clipbackground

默认文档流(y轴)
块元素默认特性：div 默认宽度为100%，高度由内容决定，可以指定宽高
div p ul>li
10.浮动布局(x轴)
解决块元素在容器中多列显示的问题
建议：尽量给块元素设定宽度而非高度（块元素最终节点可以指定高度）

1) float块元素 - 浮动元素1. 脱离默认文档流2. 宽度要么为设定值，如果没有设定，宽度由内容决定3. 在同一级别（相邻兄弟）的浮动元素，可以在一行排列4. 当一行无法容纳所有浮动元素，浮动元素会自动回车
2) clear清理浮动，left 清理float:left； right清理float:right
<div><div><div></div><div></div><div></div></div><ul><li></li><li></li><li></li></ul>
</div>

11.伸缩盒布局（x轴、y轴）
应用场合：父子结构， h5页面中（移动端页面，pc）
概念：x轴、y轴、主轴、交叉轴、伸缩盒容器、伸缩盒元素
规则：
伸缩盒容器
display:flex;
flex-direction:row; 主轴x轴
align-items: y轴（主轴）上的显示方式
justify-content:x轴（交叉轴）上的显示方式
flex-wrap:wrap;
伸缩盒元素
flex-basic
flex-grow 剩余空间分配
flex-shrink 亏损空间分配
flex: 速写
flex:1

聊天
通讯录
我的

12.定位布局（z轴）
position: static ; // 非定位元素
定位元素：可以使用定位属性，top right bottom left
position: relative;
不脱离文档流；相对于自身原来所在位置来进行定位
position: absolute;
脱离文档流；相对于距离它最近的父定位元素来进行定位
position: fixed;
脱离文档流；相对于浏览器视口来进行定位
position: sticky;
在没有达到阈值前不脱离文档流（相对定位），达到阈值后脱离文档流（固定定位）

应用场景：特殊场景布局：二级栏目；广告；回到顶端；模态框实现块元素的居中left/margin-left

动画与过度

-------------第三方框架（社区代码）-------------
一如前端深似海
html/css/js 深度理解

iconfont 字体图标库
bootstrap html/css封装【组件库（基础html/css/js的组件库）】
12栅格系统
组件（html+css）按钮、列表、表格、模态框…
elementui 组件库（基础 vue 的组件库）

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Apollo2.0自动驾驶之apollo/modules/common/vehicle_state/vehicle_state_provider.h
/****************Apollo源码分析****************************Copyright 2018 The File Authors & zouyu. All Rights Reserved.Contact with: 1746430162qq.com 181663309504源码主要是c实现的，也有少量python，git下载几百兆，其实代码不…...
2024/4/21 4:24:27
前端框架-深度学习链接
学习网站（持续更新中）项目网站 github 官网：https://github.com 极客学院上文档：http://wiki.jikexueyuan.com/project/github-basics/ github项目js-xlsx(读取和导出excel的工具库)：https://github.com/SheetJS/js-xl…...
2024/4/21 4:24:25
zeppelin on CDH及配置spark查询hive表
2019独角兽企业重金招聘Python工程师标准>>> 1.下载zeppelin http://zeppelin.apache.org/download.html 我下载的是796MB的那个已经编译好的，如果需要自己按照环境编译也可以，但是要很长时间编译，这个版本包含了很多插件&#x…...
2024/4/27 7:18:31
什么是MEAN堆栈？ JavaScript Web应用程序
MEAN堆栈，已定义 MEAN堆栈是一个软件堆栈-即构成现代应用程序的一组技术层-完全用JavaScript构建。 MEAN将JavaScript的出现表示为一种“ 全栈开发 ”语言，从前端到后端运行应用程序中的所有内容。 MEAN中的每个缩写都代表堆栈中的一个组件：…...
2024/4/22 8:25:20
BAAS业内发展分析（转）
在本文中我们将主要研究目前主要的BaaS平台的功能，以及Google，Facebook，Apple等互联网巨头在BaaS领域的动作。同时我们也会关注国内一些主流BaaS平台的发展以及国内互联网巨头如百度，华为等在BaaS领域的投入发展。国外主流的Baa…...
2024/4/21 4:24:22
mean堆栈_什么是MEAN堆栈？ JavaScript Web应用程序
mean堆栈MEAN堆栈，已定义 MEAN堆栈是一个软件堆栈，即构成现代应用程序的一组技术层，它们完全用JavaScript构建。 MEAN将JavaScript的出现表示为一种“ 全栈开发 ”语言，可在前端到后端运行应用程序中的所有内容。 MEAN中的每个缩…...
2024/4/28 11:16:37
[转] Web前端开发工程师常用技术网站整理
1、常用工具相关有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试工具 http://www.browsersync.cn/ https://www.browsersync.io/ 草料二维码生成器 http://cli.im/ GitHub https://github.…...
2024/4/21 4:24:21
基于Carto的小车SLAM建图定位与导航
文章目录一、录制地图包1.1 运行机器人小车节点1.2 启动小车控制节点1.3 rosbag记录数据1.4 播放录制的bag（查看是否录制成功）二、生成pbstrem文件三、pbstream转化成pgm和yaml四、功能1：键盘控制小车运动五、功能2：建图定位与导航…...
2024/4/20 19:50:00
使用React Native和Spring Boot构建一个移动应用
“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。厌倦了一次又一次地建立相同的登录屏幕？ 尝试使用Okta API进行托管身份验证，授权和多因素身份验证。 React Native是使用React构建移动应用程序的框架。 React允许您使用声明式编程风格来…...
2024/4/20 19:49:59
AngularJS 中的Promise --- $q服务详解
AngularJS 中的Promise --- $q服务详解先说说什么是Promise，什么是$q吧。Promise是一种异步处理模式，有很多的实现方式，比如著名的Kris Kwals Q还有JQuery的Deffered。什么是Promise 以前了解过Ajax的都能体会到回调的痛苦，同步…...
2024/4/20 19:49:58
angular中的$q服务
$q的一共有四个api: 1.$q.when(value, successFn, errorFn, progressFn),返回值为一个promise对象 --value可以是一个任意数据，也可以是一个promise对象： 如果是任意数据的情况，则直接调用successFn的函数，所以后两个参数没有写的…...
2024/4/20 19:49:57
形象的讲解angular中的$q与promise
promise不是angular首创的，作为一种编程模式，它出现在……1976年，比js还要古老得多。promise全称是 Futures and promises。具体的可以参见 http://en.wikipedia.org/wiki/Futures_and_promises 。而在javascript世界中，一个广泛…...
2024/4/21 4:24:19
在指定的浏览器运行angular2 APP
和我一样大多angular2入门者，可能都遇到这样一个问题：执行 ng serve --open http://locakhost:4200/ 后打开的不是我们预料的浏览器（qq浏览器还行，IE的话根本就跑不起来），我也百度过解决方案，可…...
2024/4/21 4:24:18
【angular】考试卷子详情
因为数据库中数据问题，截取空白页不如上盘原型图： 主体代码： <div *ngFor"let q of qt.questionMainList; let iindex" [ngSwitch]"qt.questionTypeId"><div *ngFor"let qtl of questionTypeList; let k…...
2024/4/21 4:24:17
在Angular中使用promise
在ng中最好将网络请求放在service中，从而简化controller，使controller专注做自己的“桥梁”工作，即连接数据与视图。比如我们在做一个通讯录，所以我们可以这样做： 1.建一个service叫addressBook.service.js (functio…...
2024/4/21 4:24:17
AngularJS—$q
描述既然是用来处理异步编程的，那么在浏览器端的js里，主要是2种: setTimeout 和 Ajax 请求. promise 的使用就很像Ajax请求的成功和失败回调。此承诺/延迟(promise/deferred)实现的灵感来自于 Kris Kowal’s Q CommonJS Promise建议文档将承诺(promis…...
2024/4/21 4:24:15
angular $q,defer,promise
1. $q $q是Angular的一种内置服务，它可以使你异步地执行函数，并且当函数执行完成时它允许你使用函数的返回值（或异常）。 2. defer defer的字面意思是延迟， $q.defer() 可以创建一个deferred实例（延迟对象实…...
2024/4/21 4:24:14
angular 延迟时间
delay(ms) {return new Promise(res > setTimeout(res, ms));}import { delay } from q;await delay(time);//指定时间，ms...
2024/4/21 4:24:13
Angular JS $q 学习备注
AngularJS $q是一个帮助处理异步执行函数的服务，当服务完成时使用它们的返回值（或异常）。 Deferred Api 一个被$q.defer()调用的deferred的新实例。 deferred对象的目的是暴露相关承诺实例，以及APIs被执行的成功或不成功情况&am…...
2024/4/21 4:24:13
angular $q服务的用法
Promise是一种和callback有类似功能却更强大的异步处理模式，有多种实现模式方式，比如著名的Q还有JQuery的Deffered。什么是Promise 以前了解过Ajax的都能体会到回调的痛苦，同步的代码很容易调试，但是异步回调的代码，会…...
2024/5/5 15:07:31

笔记会学习、会分享能进步好玩

标题1

这是一个一级标题

相关文章

最新文章

笔记 会学习、会分享 能进步 好玩

标题1

这是一个一级标题

相关文章

最新文章

笔记会学习、会分享能进步好玩