xiao廸要飞

文章目录1. 携程网首页案例制作1.1 技术选型1.2 搭建相关文件夹1.3 设置视口标签以及引入初始化样式1.4 初始化样式1.5 模块名字划分1.6 常见flex布局思路1.7 背景线性渐变2. 代码实现2.1 search-index2.2 focus2.3 local-nav2.4 nav2.5 subnav-entry2.6 sales1. 携程网首页案例制作1.1 技术选型方案：我们采取单独制作移动页面方案技术：布局采取flex布局为主1.2 搭建相关文件夹参考：https

文章目录1. 重点提炼2. 传统布局和flex布局对比2.1 传统布局2.2 flex布局（弹性布局）2.3 建议3. flex布局初体验3.1 搭建HTML结构3.2 example014. flex布局原理4.1 demo4.2 flex布局原理总结5. 父项常见属性5.1 flex-direction设置主轴的方向 :star:5.2 主轴与侧轴5.3 属性值5.3.1 example025.3.1.1 example02-15.3.1.2 example02-25.4 justify-conte

文章目录1. 案例：京东移动端首页2. 技术选型3. 搭建相关文件夹结构4. 设置视口标签以及引入初始化样式5. 常用初始化样式6. 导航布局6.1 首行7. 二倍精灵图做法8. 图片格式8.1 DPG图片压缩技术8.2 webp 图片格式9. 下半部布局10. 移动端布局之流式布局总结1. 案例：京东移动端首页访问地址： m.jd.com2. 技术选型方案：采取单独制作移动页面方案技术：布局采取流式布局3. 搭建相关文件夹结构images 背景图upload 产品图4.

文章目录1. 重点提炼2. 移动端基础2.1 浏览器现状2.2 手机屏幕的现状2.3 常见移动端屏幕尺寸2.4 移动端调试方法3. 视口3.1 布局视口 layout viewport3.2 视觉视口 visual viewport3.3 理想视口 ideal viewport3.4 meta标签3.4.1 最标准的viewport设置3.4.2 example014. 二倍图4.1 物理像素&物理像素比4.1.1 example024.2 多倍图4.2.1 example034.3 背景缩放bac

文章目录1. 重点提炼2. `3D` 转换3. `3D` 移动 `translate3d`4. 透视 `perspective`5. `translateZ`6. `3D` 旋转`rotateX`7. `3D` 旋转 `rotateY`8. `3D` 旋转 `rotateZ`9. `rotate3d`10. `3D` 呈现 `transform-style`11. example01-案例：两面翻转的盒子12. example02-案例：3d导航栏13. example03-案例：旋转木马14.

文章目录1. 重点提炼2. 2D 转换2.1 二位坐标系3. `2D` 转换之 `translate`3.1 `translate` 语法3.1.1 example013.2 重点知识点3.2.1 代码演示4. 让一个盒子水平垂直居中5. `2D 转换 rotate`5.1 rotate 旋转5.2 `rotate` 语法5.3 代码演示5.4 三角形案例6. 设置元素旋转中心点(transform-origin)7. 旋转中心案例8. `2D` 转换之 `scale`9. 图片放大案例10. 分页

文章目录1. 重点提炼2. `CSS3` 介绍2.1 什么是 `CSS3`2.2 `CSS3` 发展现状3. `CSS3 ` 属性选择器3.1 代码演示3.2 example013.2.1 example01-13.2.2 example01-23.2.2.1 小结3.2.3 example01-33.2.4 example01-43.2.5 example01-53.2.6 example01-64. 结构伪类选择器4.1 属性列表4.2 代码演示4.3 example025. `nth-child`5.

文章目录1. CSS高级技巧重点提炼2. 元素的显示与隐藏2.1 display 显示（重点）2.1.1 example012.1.2 实际开发场景2.2 visibility 可见性 (了解)2.2.1 example022.3 overflow 溢出(重点)2.3.1 example032.3.1.1 example03-12.3.1.2 example03-22.3.1.3 example03-32.3.1.4 example03-42.3.2 实际开发场景2.4 显示与隐藏总结2.4.1 案例3.

文章目录1. 定位(position)重点提炼2. CSS 布局的三种机制3. 为什么使用定位4. 定位详解4.1 边偏移4.2 定位模式 (position)4.2.1 静态定位(static) - 了解4.2.2 相对定位(relative) - 重要4.2.2.1 example014.2.2.1.1 example01-14.2.2.1.2 example01-24.2.2.2 相对定位的特点：（务必记住）4.2.3 绝对定位(absolute) - 重要4.2.3.1 example024.2.

文章目录1. 页面制作重点提炼2. 前期准备素材3. 前期准备工作4. CSS属性书写顺序(重点)5. 布局流程6. 页面制作6.1 1) 头部制作6.2 2）banner制作6.3 3）课程表模块6.4 4）精品推荐小模块6.5 5）精品推荐大模块6.6 6） 底部模块制作7. chrome调试工具7.1 怎样打开Chrome的开发者工具？7.1.1 chrome调试数值7.1.2 快速定位css所在行数7.2 Chrome提示的常见布局错误7.2.1 1). css单词书写错误提示7.2.2 2)

文章目录1. 浮动(float)重点提炼2. CSS 布局的三种机制3. 为什么需要浮动？3.1 example014. 什么是浮动(float)4.1 作用4.1.1 example024.2 语法4.2.1 1). 浮动口诀之 浮4.2.1.1 example034.2.2 2). 浮动口诀之 漏4.2.3 3). 浮动口诀之 特4.2.3.1 example044.2.3.1.1 example04-14.2.3.1.2 example04-24.2.3.1.3 example04-35. 浮动(f

文章目录1. 盒子模型（CSS重点）1.1 看透网页布局的本质1.2 盒子模型（Box Model）1.3 盒子边框（border）1.3.1 边框综合设置1.3.2 example011.3.3 盒子边框写法总结表1.3.3.1 example021.3.4 表格的细线边框1.3.4.1 example031.4 内边距（padding）1.4.1 内边距：1.4.2 设置1.4.2.1 example041.4.2.2 example051.4.3 课堂案例： 新浪导航1.4.4 内盒尺寸计算（元素

文章目录1. 0基础快速入门CSS技术栈(4)2. 重点提炼3. CSS复合选择器3.1 后代选择器（重点）3.1.1 example013.2 子元素选择器3.2.1 exmaple023.3 交集选择器3.3.1 example033.4 并集选择器（重点）3.4.1 example043.5 测试题3.6 链接伪类选择器（重点）3.6.1 example053.6.2 example063.7 复合选择器总结4. 标签显示模式（display）重点4.1 什么是标签显示模式4.2 块级元素(bl

文章目录1. CSS字体样式属性调试工具2. font字体2.1 font-size:大小2.2 font-family:字体2.2.1 CSS Unicode字体2.3 font-weight:字体粗细2.4 font-style:字体风格2.4.1 example012.5 font:综合设置字体样式 (重点)2.5.1 example022.6 font总结3. CSS外观属性3.1 color:文本颜色3.2 text-align:文本水平对齐方式3.3 line-height:行间距3

文章目录1. CSS选择器（重点）1.1 CSS选择器作用（重点）1.1.1 选择器的作用1.2 CSS基础选择器1.2.1 标签选择器1.2.1.1 example011.2.2 类选择器1.2.2.1 example021.2.2.2 example031.2.3 类选择器特殊用法- 多类名1.2.3.1 example041.2.4 id选择器1.2.4.1 example051.2.4.2 id选择器和类选择器区别1.2.5 通配符选择器1.2.5.1 example061.2.6 基

文章目录1. CSS层叠样式表1.1 学习目标2. HTML的局限性3. CSS 网页的美容师4. CSS初识5. 引入CSS样式表（书写位置）5.1 行内式（内联样式）5.2 内部样式表（内嵌样式表）5.2.1 综合案例5.3 外部样式表（外链式）5.3.1 example015.4 三种样式表总结（位置）5.4.1 团队约定-代码风格5.4.2 团队约定-代码大小写6. 5. 总结CSS样式规则7. @拓展阅读7.1 第一个提案7.2 Viola 以及原始浏览器之战7.3 Web 之前的样式表7.