zyx210603的博客

我尝试跟随教程完成黑马课程的一半时，意识到我需要掌握JavaScript的知识。因为本效果图采取 1280的宽度， 而Bootstrap 里面 container宽度 最大为 1170px，因此我们需要手动改下container宽度。④ 策略： 我们先布局 md以上的 pc端布局，最后根据实际需求在修改 小屏幕 和 超小屏幕的 特殊布局样式。③ 屏幕缩放发现 超小屏幕布局又发生变化，因此我们需要为 超小屏幕根据需求改变布局。② 屏幕缩放发现 小屏幕 布局发生变化，因此我们需要为 小屏幕根据需求改变布局。

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，

苏宁网首页案例制作设置视口标签以及引入初始化样式<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link rel="stylesheet" href="css/normalize.css">设置视口标签以及引入初始化样式 <meta name=

语法：起始方向颜色1,颜色2, ...);背景渐变必须添加浏览器私有前缀起始方向可以是： 方位名词 或者 度数 ， 如果省略默认就是 top。

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局的视口就多宽。视口（viewport）：浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口、和理想视口。一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。

HTML5+CSS3已经结束，进入移动端。

keyframes动画名称0%{100%{

转换transform 我们简单理解就是变形 有2D 和 3D 之分我们暂且学了三个 分别是 位移 旋转 和 缩放2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的可以分开写比如 translateX(x) 和 translateY(y)2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子。

【代码】跟着pink老师前端入门教程-day14。

（尽量不要超过30个汉字）例如：京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站7.2 description 网站说明简要说明我们网站主要是做什么的。我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。例如：

1. 音频标签和视频标签使用方式基本一致2. 浏览器支持情况不同3. 谷歌浏览器把音频和视频自动播放禁止了4.可以把视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）5. 视频标签是重点，经常设置自动播放，不使用controls控件、循环和设置大小属性。

界面样式：更改一些用户操作样式，以便提高更好的用户体验（更改用户的鼠标样式、表单轮廓、防止表单域拖拽）

一定记住，相对定位、固定定位、绝对定位 两个大的特点：1、是否占有位置（脱与否）2、以谁为基准点移动位置。

通过盒子模型，清楚知道大部分html标签是一个盒子通过CSS浮动、定位，可以让每个盒子排列成网页一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己专门的用法1. 标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局2. 浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局3. 定位定位最大的特点是由层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局二十四、元素的显示与隐藏。

建议遵循以下顺序：1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）2. 自身属性：width / height / margin / padding / border / background。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘语法：选择器{ float:属性值;11-什么是浮动_哔哩哔哩_bilibili1.2 浮动特性（重难点）加了浮动之后的元素会具有很多特性① 浮动元素会脱离标准流(脱标)设置了浮动（float）的元素最重要特性1. 脱离标准普通流的控制（浮）移动到指定位置（动）（俗称脱标2. 浮动的盒子不再保留原先的位置12-浮动特性-脱标_哔哩哔哩_bilibili。

十二、CSS 的三大特性CSS有三个非常重要的三个特性：层叠性、继承性、优先级12.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠主要解决样式冲突层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠CSS层叠性口诀：长江后浪推前浪，前浪死在沙滩上12.2 继承性CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单理解：子承父业恰当地使用继承可以简化代码，降低CSS样式的复杂性。

Emmet语法的前身是Zen coding，他使用缩写来提高html/css的编写速度，Vscode内部已经集成CSS 的元素显示模式10.1 什么是元素显示模式作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解其特性可以更好地布局我们的网页元素显示模式：元素（标签）以什么方式进行显示HTML元素一般分为块元素和行内元素两种类型10.2 块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素特点：①。

1. HTML主要做结构，显示元素内容2. CSS美化和HTML，布局网页3.CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS )相分离。3.3 CSS语法规范CSS规则有两个主要的部分构成：选择器以及一条或多条声明选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式属性和属性以“键值对”的形式出现属性是对置顶的对象设置的样式属性，例如字体大小、文本颜色等属性和属性值之间用英文“;”分开。

标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用注意1.<dl>

外部链接：百度页面</a>5. 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频都可以添加超链接。在HTML标签中，<a>标签用于定义超链接，作用是从一个页面跳转到另一个页面。3.空链接：当时没有确链接目标时， <a href="#">首页

HTML指的是超文本标记语言超文本：可以加入图片、声音、动画等内容（超越了文本限制），还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）网页是图片、链接、文字、声音、视频等元素组成，说白了就是一个html文件标签是由尖括号包围的关键词标签通常是成对出现，称为双标签特殊的标签必须是单个标签（极少情况），称为单标签1. 双击打开软件。2. 新建文件（Ctrl + N ）。3. 保存（Ctrl + S ）, 注意移动要保存为 .html 文件。