CCS+CSS3

  • 1、CSS简介
    • 1.1 HTML的局限性
    • 1.2 CSS--网页的美容师
    • 1.3 CSS语法规范
    • 1.4 CSS代码风格
    • 1.5 引入CSS样式表
      • 1.5.1 行内式（内联样式）
      • 1.5.2 内部样式表（内嵌样式表）
      • 1.5.3 外部样式表（外链式）
      • 1.5.4 总结
  • 2、CSS选择器
    • 2.1 CSS选择器的作用
    • 2.2 CSS选择器的分类
      • 2.2.1 基础选择器
        • 2.2.1.1 标签选择器
        • 2.2.1.2 类选择器
        • 2.2.1.2 类选择器-----多类名
        • 2.2.1.3 id选择器
        • 2.2.1.4 通配符选择器
        • 2.2.1.5 总结
      • 2.2.2 复合选择器
        • 2.2.2.1 后代选择器
        • 2.2.2.2 子选择器
        • 2.2.2.3 并集选择器
        • 2.2.2.4 伪类选择器
          • 2.2.2.4.1 链接伪类
          • 2.2.2.4.2 :focus 伪类选择器
        • 2.2.2.5 总结
      • 2.2.3 CSS3新增选择器
        • 2.2.3.1 属性选择器
        • 2.2.3.2 结构伪类选择器
        • 2.2.3.3 伪元素选择器
        • 2.2.3.3 伪元素选择器----清除浮动
          • 2.2.3.3.1 清除浮动的方法①-----直接设置父元素高度
          • 2.2.3.3.2 清除浮动的方法②-----额外标签法
          • 2.2.3.3.3 清除浮动的方法③-----单伪元素清除法
          • 2.2.3.3.4 清除浮动的方法④-----双伪元素清除法
          • 2.2.3.3.5 清除浮动的方法⑤-----overflow
          • 2.2.3.3.6 清除浮动-----BFC
        • 2.2.3.4 兄弟选择器
        • 2.2.3.5 过渡
  • 3、CSS字体属性
    • 3.1 字体系列----font-family
    • 3.2 字体大小----font-size
    • 3.3 字体粗细----font-weight
    • 3.4 字体样式----font-style
    • 3.5 字体复合属性
    • 3.6 字体属性总结
  • 4、CSS文本属性
    • 4.1 文本颜色----color
    • 4.2 对齐文本----text-align
    • 4.3 装饰文本----text-decoration
    • 4.4 文本缩进----text-indent
    • 4.5 行间距----line-height
      • 4.5.1 单行文字垂直`居中`
      • 4.5.2 单行文字垂直居中的原理
    • 4.6 文本属性总结
  • 5、CSS元素显示模式
    • 5.1 块元素
    • 5.2 行内元素
    • 5.3 行内块元素
    • 5.4 元素显示模式总结
    • 5.5 元素显示模式转换
  • 6、CSS背景
    • 6.1 背景颜色
    • 6.2 背景图片
    • 6.3 背景平铺
    • 6.4 背景图片位置
      • 6.4.1 参数是方位名词
      • 6.4.2 参数是精确单位
      • 6.4.3 参数是混合单位
    • 6.5 背景图像固定（背景附着）
    • 6.6 背景属性复合写法
    • 6.7 背景色半透明
    • 6.8 背景总结
    • 6.9 图片模糊处理
  • 7、CSS三大特性
    • 7.1 层叠性
    • 7.2 继承性
    • 7.3 优先级
  • 8、CSS盒子模型
    • 8.1 网页布局的本质
    • 8.2 盒子模型（Box Model）组成
      • 8.2.1 边框（border）
        • 8.2.1.1 边框----符合写法
        • 8.2.1.2 细线边框（border-collapse）
        • 8.2.1.3 边框会影响盒子大小
      • 8.2.2 内边距（padding）
        • 8.2.2.1 内边距复合写法
        • 8.2.2.2 内边距会影响盒子大小
        • 8.2.2.3 内边距不会影响盒子大小（特殊情况）
      • 8.2.3 外边距（margin）
        • 8.2.3.1 块级盒子水平居中
        • 8.2.3.2 相邻块元素垂直外边距的合并
        • 8.2.3.3 嵌套块元素垂直外边距的塌陷
        • 8.2.3.4 清除内外边距
      • 8.2.4 圆角边框
      • 8.2.5 盒子阴影
      • 8.2.6 文字阴影
      • 8.2.7 box-sizing
      • 8.2.8 盒子宽度的计算
  • 9、浮动
    • 9.1 浮动特性
    • 9.2 浮动元素经常与父元素搭配使用
    • 9.3 浮动布局注意点
    • 9.4 清除浮动
      • 9.4.1 为什么要清除浮动
      • 9.4.2 清除浮动本质
      • 9.4.3 清除浮动方法
        • 9.4.3.1 额外标签法
        • 9.4.3.2 父元素添加 overflow属性
        • 9.4.3.3 父元素添加 ::after 伪元素法
        • 9.4.3.4 父元素添加 双伪元素法
        • 9.4.3.5 清除浮动总结
  • 10、常见网页布局
    • 10.1 网页布局技巧
      • 10.1.1 margin负值的运用
      • 10.1.2 文字围绕浮动元素
      • 10.1.3 行内块的巧妙运用
      • 10.1.4 CSS三角强化
      • 10.1.5 CSS 初始化
    • 10.2 网页布局总结
  • 11、定位
    • 11.1 为什么需要定位
    • 11.2 定位组成
      • 11.2.1 定位模式
        • 11.2.1.1 静态定位----static
        • 11.2.1.2 相对定位----relative
        • 11.2.1.3 绝对定位----absolute
        • 11.2.1.4 子绝父相
        • 11.2.1.5 固定定位----fixed
        • 11.2.1.5 固定版心右侧位置
        • 11.2.1.6 粘性定位----sticky
        • 11.2.1.7 定位的总结
        • 11.2.1.8 定位叠放次序----z-index
        • 11.2.1.9 定位的拓展
          • 11.2.1.9.1 绝对定位的盒子居中
          • 11.2.1.9.2 定位特殊特性
          • 11.2.1.9.3 脱标的盒子不会触发外边距塌陷
          • 11.2.1.9.4 绝对定位（固定定位）会完全压住盒子
      • 11.2.2 边偏移
        • 应用案例
  • 12、元素的显示与隐藏
    • 12.1 display 属性
    • 12.2 visibility 可见性
    • 12.3 overflow 溢出
  • 13、CSS高级技巧
    • 13.1 精灵图（sprites）
    • 13.2 精灵图的使用
    • 13.3 字体图标
      • 13.3.1 字体图标的优点
      • 13.3.2 icomoon 字体图标的下载
      • 13.3.3 icomoon 字体图标的引入
      • 13.3.4 icomoon 字体文件格式
      • 13.3.5 字体图标的追加
    • 13.4 CSS 三角
    • 13.5 CSS 用户界面样式
      • 13.5.1 鼠标样式
      • 13.5.2 轮廓线 outline
    • 13.6 vertical-align
      • 13.6.1 图片、表单和文字对齐
      • 13.6.2 图片底部默认空白缝隙问题
    • 13.7 溢出的文字省略号显示
      • 13.7.1 单行文本溢出显示省略号
      • 13.7.1 多行文本溢出显示省略号
  • 14、Web 服务器
    • 14.1 本地服务器
    • 14.2 远程服务器
  • 15、CSS3 2D 转换
    • 15.1 2D 转换之移动 translate
    • 15.2 2D 转换之旋转 rotate
    • 15.3 CSS 三角
    • 15.4 2D 转换中心点 transform-origin
    • 15.5 2D 转换之缩放 scale
    • 15.6 2D 转换综合写法
    • 15.7 2D 转换总结
  • 16、CSS3 动画
    • 16.1 动画的基本使用
    • 16.2 动画常见属性
    • 16.3 动画简写属性
      • 应用案例
    • 16.4 动画速度曲线之步长 step
      • 应用案例
  • 17、CSS3 3D 转换
    • 17.1 三维坐标系
    • 17.2 3D移动 translate3d
    • 17.3 3D 透视 perspective
    • 17.4 3D Z轴 translateZ
    • 17.5 3D 旋转 rotate3d
    • 17.6 3D 呈现 transform-style
    • 17.7 浏览器私有前缀
  • 18、移动WEB开发之流式布局
    • 18.1 移动端基础
      • 18.1.1 浏览器现状
      • 18.1.2 手机屏幕现状
      • 18.1.3 常见移动端屏幕尺寸
      • 18.1.4 移动端调试方法
      • 18.1.5 移动端总结
    • 18.2 视口
      • 18.2.1 布局视口 layout viewport
      • 18.2.2 视觉视口 visual viewport
      • 18.2.3 理想视口 ideal viewport
      • 18.2.4 视口的总结
      • 18.2.5 meta视口标签
    • 18.3 二倍图
      • 18.3.1 物理像素&物理像素比
      • 18.3.2 多倍图
      • 18.3.3 背景缩放 background-size
    • 18.4 移动端开发选择
      • 18.4.1 移动端主流方案
        • 18.4.1.1 单独制作移动端页面
        • 18.4.1.2 响应式兼容PC移动端
    • 18.5 移动端技术解决方案
      • 18.5.1 移动端浏览器
      • 18.5.2 CSS初始化 normalize.css
      • 18.5.3 CSS3 盒子模型 box-sizing
      • 18.5.4 特殊样式
    • 18.6 移动端常见布局
      • 18.6.1 流式布局
      • 18.6.2 二倍精灵图做法
      • 18.6.3 flex 布局
        • 18.6.3.1 传统布局与flex布局
        • 18.6.3.2 flex布局原理
        • 18.6.3.3 常见父项属性
          • 18.6.3.3.1 flex-direction 设置主轴方向
          • 18.6.3.3.2 justify-content 设置主轴上的子元素排列方式
          • 18.6.3.3.3 flex-wrap 设置子元素是否换行
          • 18.6.3.3.4 align-items 设置侧轴上的子元素排列方式（单行）
          • 18.6.3.3.5 align-content 设置侧轴上的子元素排列方式（多行）
          • 18.6.3.3.6 align-content 和 align-items区别
          • 18.6.3.3.7 flext-flow
        • 18.6.3.4 常见子项属性
          • 18.6.3.4.1 flex 属性
          • 18.6.3.4.2 align-self 控制子项自己在侧轴上的排列方式
          • 18.6.3.4.3 order 属性定义项目的排列顺序
      • 18.6.4 rem 适配布局
        • 18.6.4.1 rem 基础
        • 18.6.4.2 媒体查询
          • 18.6.4.2.1 什么是媒体查询
          • 18.6.4.2.2 语法规范
            • 18.6.4.2.2.1 mediatype查询类型
            • 18.6.4.2.2.2 关键字
            • 18.6.4.2.2.3 媒体特性
          • 18.6.4.2.3 媒体查询+rem实现元素动态大小变化
          • 18.6.4.2.4 引入资源
          • 18.6.4.2.5 rem适配方案
            • 18.6.4.2.5.1 rem实际开发适配方案
            • 18.6.4.2.5.2 rem适配方案技术使用（市场主流）
      • 18.6.5 Less
        • 18.6.5.1 css的弊端
        • 18.6.5.2 Less介绍
        • 18.6.5.3 Less使用
          • 18.6.5.3.1 Less变量
          • 18.6.5.3.2 Less编译
          • 18.6.5.3.3 Less 嵌套
          • 18.6.5.3.4 Less 运算
        • 应用案例
          • 技术方案1
          • 技术方案2
      • 18.6.6 响应式布局
        • 18.6.6.1 响应式开发原理
        • 18.6.6.2 响应式布局容器
        • 18.6.6.3 Bootstrap
          • 18.6.6.3.1 Bootstrap简介
          • 18.6.6.3.2 Bootstrap使用
          • 18.6.6.3.3 布局容器
          • 18.6.6.3.4 栅格系统
            • 18.6.6.3.4.1 什么是栅格系统
            • 18.6.6.3.4.2 栅格系统选项参数
            • 18.6.6.3.4.3 列嵌套
            • 18.6.6.3.4.4 列偏移
            • 18.6.6.3.4.5 列排序
            • 18.6.6.3.4.6 响应式工具
        • 应用案例

1、CSS简介

  • CSS的主要使用场景就是没话网页，布局网页的。

1.1 HTML的局限性

1.2 CSS–网页的美容师

  • 总结

1.3 CSS语法规范


1.4 CSS代码风格



1.5 引入CSS样式表

  • CSS样式的书写位置

1.5.1 行内式（内联样式）

<!-- 行内样式 -->
<h1 style="color:gray; font-size: 18px;">我在这里等你</h1>

1.5.2 内部样式表（内嵌样式表）


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><!-- 内部样式 --><style type="text/css">h1{color: green;font-size: 18px;}</style></head><body><h1>我在这里等你</h1></body>
</html>

1.5.3 外部样式表（外链式）



h1{color: pink;font-size: 20px;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><!-- 外部样式  真正实现结构与样式完全分离 实现CSS文件共享--><link rel="stylesheet" type="text/css" href="./css/style.css"></head><body><h1>我在这里等你</h1></body>
</html>

1.5.4 总结

2、CSS选择器

2.1 CSS选择器的作用

2.2 CSS选择器的分类

2.2.1 基础选择器

2.2.1.1 标签选择器


2.2.1.2 类选择器




2.2.1.2 类选择器-----多类名



<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 标签选择器:写上标签名 */p {color: green;}div {color: pink;}/* 类选择器:样式点定义 结构类（class）调用   开发最常用 */.red {color: red;}.font35 {font-size: 35px;}.big-boy {color: blue;}</style></head><body><p class="red">男生</p><p class="big-boy">男生</p><p class="red font35">男生</p><p>男生</p></body>
</html>

2.2.1.3 id选择器


2.2.1.4 通配符选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 通配符 */* {color: red;}/* id选择器 */#pink {color: pink;}</style></head><body><div id="pink">java语言</div><div>我的</div><span>我的</span><ul><li>我的</li></ul></body>
</html>

2.2.1.5 总结

2.2.2 复合选择器

2.2.2.1 后代选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 后代选择器 */ol li {color: pink;}ol li a {color: red;}.nav li a {color: yellow;}</style></head><body><ol><li>我是ol</li><li>我是ol</li><li>我是ol</li><li><a href="#">我是超链接1</a></li></ol><ul><li>我是ul</li><li>我是ul</li><li>我是ul</li><li><a href="#">我是超链接2</a></li></ul><ul class="nav"><li>我是ul</li><li>我是ul</li><li>我是ul</li><li><a href="#">我是超链接3</a></li></ul></body>
</html>

2.2.2.2 子选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 子代选择器 */.nav>a {color: red;}</style></head><body><div class="nav"><a href="#">AAAA</a><p><a href="#">BBBB</a></p></div></body>
</html>

2.2.2.3 并集选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 并集选择器 *//* div,p {color: red;} */div, p, .pig li {color: pink;}</style></head><body><div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩琪</li><li>AAAAA</li><li>BBBBB</li></ul></body>
</html>

2.2.2.4 伪类选择器

2.2.2.4.1 链接伪类



2.2.2.4.2 :focus 伪类选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>a {color: #333;text-decoration: none;}/* 链接伪类 *//* a:link 未访问的链接  */a:link { color: #333;}/* a:visited 已访问过的链接 */a:visited {color: orange;}/* a:hover 经过的链接 */a:hover {color: red;text-decoration: underline;}/* a:active 按下链接 */a:active {color: green;}/* :focus伪类选择器 */input:focus {background-color: pink;}</style></head><body><a href="#">小猪佩奇</a> <br><input type="text"><input type="text"><input type="text"></body>
</html>

2.2.2.5 总结

2.2.3 CSS3新增选择器

2.2.3.1 属性选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* E[att] */input[value] {color: pink;}/* E[att="val"] */input[type=password] {background-color: red;}/* E[att^="val"] */div[class^=icon] {color: aqua;}/* E[att$="val"] */section[class$="data"] {color: blue;}</style></head><body><input type="text" value="请输入用户名"><input type="text" ><input type="password" ><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">哪我是谁</section></body>
</html>

2.2.3.2 结构伪类选择器


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* E:first-child */ul :first-child {background-color: pink;}/* E:last-child */ul li:last-child {background-color: blue;}/* E:nth-child(n) */ul li:nth-child(2) {background-color: antiquewhite;}/* n为关键字 所有偶数行变色 even等价于2n*/ul li:nth-child(even) {background-color: aqua;}/* n为关键字 所有奇数行变色 odd等价于2n+1*/ul li:nth-child(odd) {color:red;}/* n为公式 nth:child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 */ol li:nth-child(n) {background-color: pink;}/* n+5 :从第5个开始(包括第5个)到最后 */ol li:nth-child(n+5) {color: yellow;}</style></head><body><ul><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><ol><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ol></body>
</html>
  • nth-child和nth-of-type的区别
  • nth-child和nth-of-type的小结
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* nth-child 会把所有的盒子都排列序号 */section div:nth-child(1){background-color: green;}/* nth-of-type 会把指定类型的盒子排列序号 */section div:nth-of-type(1){background-color: red;}</style></head><body><section><p>光头强</p><div>熊1</div><div>熊2</div></section></body>
</html>

2.2.3.3 伪元素选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 200px;height: 200px;background-color: pink;}div::before {display: inline-block;/* content必须写 */content: '我和';width: 30px;height: 40px;background-color: purple;}div::after {content: "【表情】";}</style></head><body><div>你好</div></body>
</html>

2.2.3.3 伪元素选择器----清除浮动

2.2.3.3.1 清除浮动的方法①-----直接设置父元素高度


2.2.3.3.2 清除浮动的方法②-----额外标签法



2.2.3.3.3 清除浮动的方法③-----单伪元素清除法


2.2.3.3.4 清除浮动的方法④-----双伪元素清除法



2.2.3.3.5 清除浮动的方法⑤-----overflow


2.2.3.3.6 清除浮动-----BFC

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.father {/* 设置overflow: hidden后,father盒子就成了BFC */overflow: hidden;width: 300px;height: 300px;background-color: pink;}.son {width: 100px;height: 100px;background-color: purple;margin-top: 100px;}</style></head><body><div class="father"><div class="son"></div></div></body>
</html>

2.2.3.4 兄弟选择器

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><style>/* 相邻兄弟选择器 */#p_1+p {color: #FFC0CB;}/* 兄弟选择器 所有兄弟都会被选中 */#p_1~p {color: aqua;}</style>
</head><body><p id="p_1">11</p><p>22</p><p>33</p>
</body></html>

2.2.3.5 过渡


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.box {width: 200px;height: 200px;background-color: pink;/* transition: height 2s ease 1s; *//* all 所有属性 */transition: all 2s;}.box:hover {height: 300px;}</style></head><body><div class="box"></div></body>
</html>

3、CSS字体属性

  • CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

3.1 字体系列----font-family

  • 如果有多个字体系列，先从第一个开始读取，如果有，则显示该字体系列，没有，依次往下读取，有则显示该字体

3.2 字体大小----font-size

3.3 字体粗细----font-weight

3.4 字体样式----font-style

3.5 字体复合属性

3.6 字体属性总结

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>body {font-size: 16px;}/* 标题标签比较特殊,需要单独指定文字大小 */h2 {font-size: 18px;font-weight: 400;}div {font-family: "微软雅黑";}/* 多个字体系列,依次读取,有则显示该字体 */span {font-family: Arial, "microsoft yahei","微软雅黑";}.bold {/* 后面不需要加单位 变粗：bold或700 正常：normal或400*/font-weight: 700;}em {/* 文字样式 */font-style: normal;}.div {/* font-style: italic;font-weight: 700;font-size: 16px;font-family: 'Microsoft YAHEI'; *//* 复合属性:简写的方式 *//* font: font-style font-weight font-size/line-height font-family */font: italic 700 16px 'Microsoft yahei';}</style></head><body><h2>pink的秘密</h2><div>我的</div><em>我的</em><span>我的</span><ul><li class="bold">我的</li></ul><div class="div">三生三世十里桃花，一心一意百行代码</div></body>
</html>

4、CSS文本属性

  • CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

4.1 文本颜色----color

4.2 对齐文本----text-align

4.3 装饰文本----text-decoration

4.4 文本缩进----text-indent

4.5 行间距----line-height

4.5.1 单行文字垂直居中

  • 文字的行高等于盒子的高度

4.5.2 单行文字垂直居中的原理

4.6 文本属性总结

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>h1 {/* 本质是让h1盒子里面的文字水平居中对齐 */text-align: center;}div {/* 下划线 */text-decoration: underline;/* 删除线 */text-decoration: line-through;/* 上划线 */text-decoration: overline;}a {/* 取消a默认的下划线 */text-decoration: none;color: black;}p {/* text-indent: 20px; *//* 没有指定文字大小,默认大小为16px 1em=16px */text-indent: 2em;line-height: 25px;}#cn {/* 没有给定文字大小,默认大小为16px */line-height: 26px;text-decoration: none;}</style></head><body><h1>居中对齐的标题</h1><div>粉红色的回忆</div><a href="#">粉红色的回忆</a><p>加客服解答卡缴费金额结</p><p>加客服解答卡缴费金额结</p><p>加客服解答卡缴费金额结</p><div id="cn">中国人</div></body>
</html>

5、CSS元素显示模式

5.1 块元素

5.2 行内元素

5.3 行内块元素

5.4 元素显示模式总结

5.5 元素显示模式转换

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>a {/* 行内元素转换为块元素 */display: block;width: 230px;height: 40px;background-color: #535759;font-size: 14px;/* 去掉下划线 */text-decoration: none;text-indent: 2em;/* 文字的行高等于盒子高度,实现文字居中显示 */line-height: 40px;}a:hover {background-color: #ff6f00;}</style></head><body><a href="#">AA11</a><a href="#">AA12</a><a href="#">AA13</a><a href="#">AA14</a><a href="#">AA15</a><a href="#">AA16</a><a href="#">AA17</a><a href="#">AA18</a></body>
</html>

6、CSS背景

6.1 背景颜色

6.2 背景图片

6.3 背景平铺

  • 注意：背景图片会压在背景颜色上面

6.4 背景图片位置

6.4.1 参数是方位名词

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 300px;height: 300px;/* 背景图片 */background-image: url(./images/logo.png);/* 背景平铺 */background-repeat: no-repeat;/* 背景颜色 */background-color: pink;/* 方位名词：right center 和 center right 效果是一样的 *//* background-position: center top; *//* 水平一定是靠右对齐 第二个参数省略 y轴是垂直居中显示的 */background-position: right;}</style>
</head><body><div></div>
</body></html>

6.4.2 参数是精确单位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(./images/logo.png);background-repeat: no-repeat;/* x:20px y:50px *//* background-position: 20px 50px; *//* x:20px y:默认为居中 */background-position: 20px;}</style>
</head><body><div></div>
</body></html>

6.4.3 参数是混合单位

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 300px;height: 300px;background-color: pink;background-image: url(./images/logo.png);background-repeat: no-repeat;/* x:20px y:50px *//* background-position: 20px 50px; *//* x:20px y:默认为居中  等价于 x:20px y:center*//* background-position: 20px; *//* x:center y:20px */background-position: center 20px;}</style>
</head><body><div></div>
</body></html>

6.5 背景图像固定（背景附着）

6.6 背景属性复合写法

body {/* background-image: url(./images/王者荣耀.jpg);background-repeat: no-repeat;background-position: center top; *//* 背景图像固定 *//* background-attachment: fixed;  *//* 背景属性复合写法 */background: #000 url(./images/王者荣耀.jpg) no-repeat fixed center top;color: #fff;font-size: 20px;
}

6.7 背景色半透明

  • opacity: 调整透明度的属性（0~1）

6.8 背景总结

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.nav a {display: inline-block;width: 120px;height: 58px;background-color: pink;/* 文字水平居中 */text-align: center;/* 文字垂直居中 */line-height: 48px;color: #fff;text-decoration: none;}.nav .bg1 {background: url(./images/1.jpeg) no-repeat; }/*鼠标经过谁谁变色，注意标签的选择范围*//* 鼠标经过bg1时替换背景图片就行，所以用属性background-image实现即可 */.nav .bg1:hover {background-image: url(./images/11.jpeg);}</style>
</head><body><div class="nav"><a href="#" class="bg1">五彩导航</a></div>
</body>

6.9 图片模糊处理

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>img {/* blur是一个函数 小括号里面的数值越大 图片越模糊 注意数值要加px但闻 */filter: blur(15px);}/* 鼠标经过 图片不模糊 */img:hover {filter: blur(0);}</style>
</head><body><img src="./images/1.jpeg" alt="">
</body></html>

7、CSS三大特性

7.1 层叠性

7.2 继承性

  • 行高的继承性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>body {color: pink;/* font: 12px/24px "Microsoft yahei"; */font: 12px/1.5 "Microsoft Yahei";}div {/* 子元素继承父元素body的行高1.5 *//* 这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div的行高为14*1.5 = 21px*/font-size: 14px;}p {/* p元素的行高为 16*1.5 = 24px */font-size: 16px;}/* li没有指定文字大小，就会继承父类的行高：12*1.5 = 18px */li {color: red;}</style>
</head><body><div>粉红的回忆</div><p>你好啊</p><ul><li>哈哈</li></ul>
</body></html>

7.3 优先级



  • 优先级注意点
  • CSS权重的叠加
    1）复合选择器的元素标签会叠加
    2）权重叠加不会存在进位的问题

8、CSS盒子模型

8.1 网页布局的本质

8.2 盒子模型（Box Model）组成


8.2.1 边框（border）

  • border-style常用的属性值：solid(实线)、dashed(虚线)、 dotted(点线)

8.2.1.1 边框----符合写法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; */border: 1px solid blue;/* 层叠性 */border-top: 1px solid red;}</style>
</head><body><div></div>
</body></html>

8.2.1.2 细线边框（border-collapse）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 结构与样式相分离 */table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px solid pink;/* 合并相邻的边框 */border-collapse: collapse;font-size: 14px;text-align: center;}</style>
</head><body><table><thead><tr><th>排名</th><th>关键词</th><th>趋势</th></tr></thead><tbody><tr><td>1</td><td>AA</td><td>上升</td></tr><tr><td>2</td><td>BB</td><td>稳定</td></tr><tr><td>3</td><td>CC</td><td>下降</td></tr></tbody></table>
</body></html>

8.2.1.3 边框会影响盒子大小

8.2.2 内边距（padding）

8.2.2.1 内边距复合写法

8.2.2.2 内边距会影响盒子大小




8.2.2.3 内边距不会影响盒子大小（特殊情况）

  • 盒子本身没有指定width/height属性，此时padding不会撑开盒子大小
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>h1 {/* 一旦给定了宽、高，都会影响盒子的大小 *//* width: 100%; */height: 200px;background-color: pink;/* 没有指定宽度，不会影响盒子的宽度，但会影响高度，在高度上会各增加30px */padding: 30px;}div {width: 300px;height: 100px;background-color: purple;}div p {/* 只要子盒子没有给定高度和宽度，即使父盒子有宽度和高度，也不会影响子盒子的大小 */padding: 30px;background-color: skyblue;}</style>
</head><body><h1></h1><div><p></p></div>
</body></html>

8.2.3 外边距（margin）

8.2.3.1 块级盒子水平居中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.header {width: 900px;height: 200px;background-color: pink;margin: 0 auto;text-align: center;}</style>
</head><body><div class="header"><!-- span是行内元素，不会随父盒子居中对齐，需要给父盒子设置text-align:center,才能实现水平居中对齐 --><span>文字</span></div><div><!-- img是行内块元素,给父盒子设置text-align:center,也能实现水平居中 --><img src="images/1.jpeg" alt=""></div>
</body></html>

8.2.3.2 相邻块元素垂直外边距的合并

8.2.3.3 嵌套块元素垂直外边距的塌陷

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.father {width: 400px;height: 400px;background-color: purple;margin-top: 50px;/* 1、给父盒子添加边框，解决父子盒子塌陷问题 *//* border: 1px solid transparent; *//* 2、给父盒子添加内边距，解决父子盒子塌陷问题 *//* padding: 1px; *//* 3、给父盒子添加overflow: hidden，解决父子盒子塌陷问题 */overflow: hidden;}.son {width: 200px;height: 200px;background-color: pink;margin-top: 100px;}</style>
</head><body><div class="father"><div class="son"></div></div>
</body></html>

8.2.3.4 清除内外边距

  • div没有内外边距；ul有内外边距
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* CSS第一行代码 */* {margin: 0;padding: 0;}span {background-color: pink;/* 行内元素尽量设置左右内外边距，即使设置上下内外边距也是无效的 */margin: 20px;}</style>
</head><body>123<ul><li>abcd</li></ul><span>行内元素尽量只设置左右的内外边距</span>
</body></html>

8.2.4 圆角边框



<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 圆形设置 */.yuanxing {width: 200px;height: 200px;background-color: pink;/* border-radius: 100px; *//* 50%就是宽度和高度的一半  等价于100px*/border-radius: 50%;}/* 圆角矩形 */.juxing {width: 300px;height: 100px;background-color: pink;/* 圆角矩形设置为高度的一半 */border-radius: 50px;}.radius {width: 200px;height: 200px;background-color: pink;border-radius: 10px 20px 30px 40px;}</style>
</head><body>1.圆形的做法<div class="yuanxing"></div>2.圆角矩形的做法<div class="juxing"></div>3.可以设置不同的圆角<div class="radius"></div>
</body></html>

8.2.5 盒子阴影

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;}/* 鼠标经过时才添加阴影 */div:hover {box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);}</style>
</head><body><div></div>
</body></html>

8.2.6 文字阴影

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {font-size: 50px;color: orange;font-weight: 700;/* 文字阴影 */text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5);}</style>
</head><body><div>我是阴影</div>
</body></html>

8.2.7 box-sizing

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;box-sizing: content-box;}p {width: 200px;height: 200px;background-color: pink;border: 20px solid red;padding: 15px;/* border-box不会撑大盒子 */box-sizing: border-box;}</style>
</head><body><div>Hello 我是Hello</div><p>Hello 我是Hello</p>
</body></html>

8.2.8 盒子宽度的计算

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.father {width: 300px;height: 200px;background-color: pink;}.son {/* width: calc(150px + 30px); *//* 100%是指子盒子的宽度和父盒子的宽度一样 */width: calc(100% - 30px);height: 30px;background-color: skyblue;}</style>
</head><body><!-- 需求子盒子宽度比父盒子小30px --><div class="father"><div class="son"></div></div>
</body>

9、浮动

  • 传统网页布局的三种方式
  • 普通流（标准流）



9.1 浮动特性

  • 1）浮动元素会脱离标准流（脱标）
  • 2）浮动的元素会一行内显示并且元素顶部对齐
  • 3） 浮动的元素会具有行内块元素的特性

9.2 浮动元素经常与父元素搭配使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* div 没有内外边距；ul有内外边距，需清除内外边距 */* {margin: 0;padding: 0;}/* 清除li前面的小圆点 */li {list-style: none;}.box {width: 1226px;height: 285px;background-color: pink;max-width: 0 auto;}.box li {float: left;width: 296px;height: 285px;background-color: purple;/* 设置li与li之间的缝隙 */margin-right: 14px;}.box li:last-of-type {/* 利用层叠性 注意标签元素的权重问题； 最后一个li，不需要设置外边距 */margin-right: 0;}</style>
</head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</body></html>

9.3 浮动布局注意点

9.4 清除浮动

9.4.1 为什么要清除浮动

9.4.2 清除浮动本质


9.4.3 清除浮动方法

9.4.3.1 额外标签法

9.4.3.2 父元素添加 overflow属性

9.4.3.3 父元素添加 ::after 伪元素法

9.4.3.4 父元素添加 双伪元素法

9.4.3.5 清除浮动总结

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>* {margin: 0;padding: 0;}/* 清除浮动方法三：父元素添加::after 伪元素 不需要再额外添加标签*/.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* 解决IE6、7清除浮动问题 */*zoom: 1;}/* 清除浮动方法四：父元素添加 双伪元素 也不需要再额外添加标签*/.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}.clearfix {*zoom: 1;}.box {/* 清除浮动方法二：父元素添加overflow属性 *//* overflow: hidden; */border: 1px solid blue;}.damao {float: left;width: 300px;height: 300px;background-color: red;}.ermao {float: left;width: 300px;height: 300px;background-color: pink;}/* 清除浮动方法一：额外标签法，要求必须是块元素 */.clear {clear: both;}</style>
</head><body><div class="box clearfix"><div class="damao"></div><div class="ermao"></div><!-- 清除浮动方法一：额外标签法，要求必须是块元素 --><!-- <div class="clear"></div> --></div><div class="footer"></div>
</body></html>

10、常见网页布局




<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>* {margin: 0;padding: 0;}li {list-style: none;}/* 只要是通栏盒子 不需要指定宽度，默认为浏览器的宽度*/.top {height: 50px;background-color: gray;}.footer {height: 200px;background-color: gray;margin-top: 10px;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;height: 300px;margin: 0 auto;/*background-color: #fff;*/}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box li:last-of-type {margin-right: 0;}</style>
</head><body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div class="footer">footer</div>
</body></html>

10.1 网页布局技巧

10.1.1 margin负值的运用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>ul li {position: relative;float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;margin-left: -1px;}/* ul li:hover {如果盒子没有定位，则鼠标经过添加相对定位即可 position: relative;border: 1px solid blue;} */ul li:hover {/* 如果li都有定位，利用z-index提高层级 */z-index: 1;border: 1px solid green;}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</body></html>

10.1.2 文字围绕浮动元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文字围绕浮动元素</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 70px;background-color: pink;margin: 0 auto;padding: 5px;}.pic {float: left;width: 120px;height: 60px;background-color: yellow;}.pic img {width: 100%;}</style>
</head><body><div class="box"><div class="pic"><img src="images/1.jpeg" alt=""></div><p>减肥打卡积分卡的</p></div>
</body></html>

10.1.3 行内块的巧妙运用

  • 如果是行内块元素，给父盒子添加text-align: center，里面的所有的行内或行内块元素都会水平居中
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行内块的巧妙运用</title><style>* {margin: 0;padding: 0;}/* 只需给父盒子text-align: center，子盒子也能水平居中 */.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #ebeef5;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: transparent;}.box input {height: 36px;width: 45px;border: 1px solid #ccc;outline: none;}.box button {width: 60px;height: 36px;background-color: #ebeef5;border: 1px solid #ccc;}</style>
</head><body><div class="box"><a href="#" class="prev">&lt;&lt;上一页</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#" class="next">&gt;&gt;下一页</a> 到第<input type="text"> 页<button>确定</button></div>
</body></html>

10.1.4 CSS三角强化

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 方法一 */.box1 {width: 0;height: 0;/* 上边款宽度调大 */border-top: 100px solid transparent;border-right: 50px solid pink;/* 左边和下边的边框宽度设置为0 */border-bottom: 0 solid #000;border-left: 0 solid #000;}/* 方法二 */.box2 {width: 0;height: 0;/* 只保留右边的边框有颜色 */border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;font-weight: 700;}.left {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;margin-right: 8px;}.left i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 12px 0 0;}.right {font-size: 12px;color: gray;text-decoration: line-through;}</style>
</head><body><div class="box1"></div><div class="box2"></div><div class="price"><span class="left">￥1650<i></i></span><span class="right">￥5650</span></div>
</body></html>

10.1.5 CSS 初始化



10.2 网页布局总结

11、定位

11.1 为什么需要定位

  • 1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
  • 2）当我们滚动窗口的时候，盒子是固定屏幕某个位置的

11.2 定位组成

11.2.1 定位模式

11.2.1.1 静态定位----static

11.2.1.2 相对定位----relative

11.2.1.3 绝对定位----absolute

11.2.1.4 子绝父相

11.2.1.5 固定定位----fixed

11.2.1.5 固定版心右侧位置

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><link rel="stylesheet" href="./css/style.css"><style>.w {width: 800px;height: 1400px;background-color: pink;margin: 0 auto;}/* 版心右侧显示 */.fixed {position: fixed;/* 浏览器宽度的一半 */left: 50%;margin-left: 405px;width: 50px;height: 150px;background-color: skyblue;}</style>
</head><body><div class="fixed"></div><div class="w">版心盒子 800px</div>
</body></html>

11.2.1.6 粘性定位----sticky

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><link rel="stylesheet" href="./css/style.css"><style>body {height: 3000px;}.nav {/* 粘性定位 */position: sticky;top: 0;width: 800px;height: 50px;background-color: pink;margin: 100px auto;}</style>
</head><body><div class="nav">我是导航栏</div>
</body></html>

11.2.1.7 定位的总结

11.2.1.8 定位叠放次序----z-index

11.2.1.9 定位的拓展

11.2.1.9.1 绝对定位的盒子居中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><link rel="stylesheet" href="./css/style.css"><style>.box {position: absolute;/* 父容器宽度的一半 */left: 50%;/* 自己盒子的一半  就能水平居中*/margin-left: -100px;/* 父容器高度的一半 */top: 50%;/* 自己盒子的一半 就能垂直居中 */margin-top: -100px;width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div class="box"></div>
</body></html>
11.2.1.9.2 定位特殊特性

11.2.1.9.3 脱标的盒子不会触发外边距塌陷

11.2.1.9.4 绝对定位（固定定位）会完全压住盒子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><link rel="stylesheet" href="./css/style.css"><style>.box {/* 浮动的元素不会压住下面标准流的文字 *//* float: left; *//* 绝对定位（固定定位）会压住下面标准流所有的内容 */position: absolute;width: 150px;height: 150px;background-color: pink;}</style>
</head><body><div class="box"></div><p>发动机咖啡简单减肥如恶</p>
</body></html>

11.2.2 边偏移

应用案例

  • 淘宝焦点图布局

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}/* 并集选择器可以集体声明相同的样式 */.prev,.next {position: absolute;top: 50%;margin-top: -15px;width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;/* border-radius: 0 50% 50% 0; */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 如果一个盒子，既有left属性也有right属性，则默认会执行left属性 同理 top botton 会执行top*/right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background: rgba(255, 255, 255, .3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}.promo-nav .selected {background-color: orange;}</style>
</head><body><div class="tb-promo"><img src="./images/taobao.jpg" alt=""><!-- 左侧按钮箭头 --><a href="#" class="prev"> &lt;</a><!-- 右侧按钮箭头 --><a href="#" class="next"> &gt;</a><!-- 小圆点 --><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

12、元素的显示与隐藏

12.1 display 属性

12.2 visibility 可见性

12.3 overflow 溢出


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}/* 遮罩元素 */.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3) url(./images/title.png) no-repeat center;}/* 鼠标经过tudou盒子，遮罩元素显示出来 */.tudou:hover .mask {display: block;}</style>
</head><body><div class="tudou"><div class="mask"></div><img src="./images/taobao.jpg" alt=""></div>
</body></html>

13、CSS高级技巧

13.1 精灵图（sprites）

13.2 精灵图的使用


13.3 字体图标

13.3.1 字体图标的优点

13.3.2 icomoon 字体图标的下载

13.3.3 icomoon 字体图标的引入





13.3.4 icomoon 字体文件格式

13.3.5 字体图标的追加


13.4 CSS 三角

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>.box1 {width: 0;height: 0;/* 照顾低版本浏览器兼容问题  增加line-height font-size*/line-height: 0;font-size: 0;border: 50px solid transparent;border-top-color: pink;margin: 100px auto;}</style>
</head><body><div class="box1"></div>
</body></html>

13.5 CSS 用户界面样式

13.5.1 鼠标样式


13.5.2 轮廓线 outline


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 取消表单轮廓线 */input,textarea {outline: none;}/* 防止拖拽文本域 */textarea {resize: none;}</style>
</head><body><input type="text" name="" id=""><textarea name="" id="" cols="30" rows="10"></textarea>
</body></html>

13.6 vertical-align

13.6.1 图片、表单和文字对齐

  • 图片默认和文字的基线对齐



<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>img {vertical-align: middle;}textarea {resize: none;vertical-align: middle;}</style>
</head><body><img src="./images/logo.png" alt=""> 您好呀<textarea name="" id="" cols="30" rows="10"></textarea>hello world
</body></html>

13.6.2 图片底部默认空白缝隙问题

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {border: 2px solid red;}img {/* vertical-align: middle; *//*将图片转成块元素，能解决图片底部默认空白缝隙问题，但有可能会影响其他元素的布局 推荐使用 vertical-align: middle|top|bottom;*/display: block;}</style>
</head><body><div><img src="images/taobao.jpg" alt=""></div>
</body></html>

13.7 溢出的文字省略号显示

13.7.1 单行文本溢出显示省略号

13.7.1 多行文本溢出显示省略号

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>/* 单行文本溢出显示省略号 */.single {width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 文字自动换行 *//* white-space: normal; *//* 文字不自动换行 */white-space: nowrap;/* 溢出来的部分隐藏 */overflow: hidden;/* 溢出来的部分用省略号代替 */text-overflow: ellipsis;}/* 多行文本溢出显示省略号 */.multe {width: 100px;height: 100px;background-color: orange;margin: 100px auto;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}</style>
</head><body><div class="single">进口发动机啊发货哒空间的</div><div class="multe">甲方可大家疯狂爹U日额不发动机啊发货都要热U有</div>
</body></html>

14、Web 服务器

14.1 本地服务器

  • 把自己电脑设置为本地服务器，主要在局域网中访问

14.2 远程服务器

  • 在互联网中访问，需上传至远程服务器

15、CSS3 2D 转换

15.1 2D 转换之移动 translate

  • 移动盒子的位置：定位、盒子的外边距、2d转换移动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {position: relative;width: 500px;height: 500px;background-color: pink;}p {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;background-color: purple;/* 方法一：盒子居中，向上移动盒子高度的一半，向左移动盒子宽度的一半，这个方法不灵活 *//* margin-top: -100px;margin-left: -100px; *//* 方法二：使用transform移动盒子自身一半，灵活，即使盒子的宽高有修改，也能保证盒子居中显示 */transform: translate(-50%, -50%);}</style>
</head><body><div><p></p></div>
</body></html>

15.2 2D 转换之旋转 rotate

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>img {width: 150px;border-radius: 50%;border: 5px solid pink;/* 过渡 */transition: all 1s;}img:hover {/* 2D旋转 */transform: rotate(360deg);}</style>
</head><body><img src="images/1.jpeg" alt="">
</body></html>

15.3 CSS 三角

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {position: relative;width: 240px;height: 35px;border: 1px solid #000;}div::after {content: '';position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-bottom: 1px solid #000;border-right: 1px solid #000;transform: rotate(45deg);transition: all .6s;}/* 鼠标经过div 里面的三角旋转 */div:hover::after {transform: rotate(225deg);}</style>
</head><body><div></div>
</body></html>

15.4 2D 转换中心点 transform-origin


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CSS--网页的美容师</title><style>div {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;margin: 100px auto;}div::before {content: "传媒";display: block;width: 100%;height: 100%;background-color: skyblue;text-align: center;line-height: 200px;transform: rotate(180deg);transform-origin: left bottom;transition: all .3s;}div:hover::before {transform: rotate(0);}</style>
</head><body><div></div>
</body></html>

15.5 2D 转换之缩放 scale


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片放大案例</title><style>div {overflow: hidden;float: left;margin: 10px;}/* 过渡 */div img {transition: all .3s;}/* 图片缩放 */div img:hover {/* 一个参数，等比例缩放 */transform: scale(1.1);}</style>
</head><body><div><a href="#"><img src="images/taobao.jpg" alt=""></a></div><div><a href="#"><img src="images/taobao.jpg" alt=""></a></div><div><a href="#"><img src="images/taobao.jpg" alt=""></a></div>
</body></html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>分页按钮</title><style>li {float: left;margin: 10px;width: 30px;height: 30px;border: 1px solid pink;text-align: center;line-height: 30px;list-style: none;border-radius: 50%;transition: all .3s;}li:hover {transform: scale(1.5);}</style>
</head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>
</body></html>

15.6 2D 转换综合写法


15.7 2D 转换总结

16、CSS3 动画

16.1 动画的基本使用


16.2 动画常见属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>分页按钮</title><style>/* 定义动画 *//* 可以做多个状态的变化 里面的百分比要是整数  里面的百分比是按 总的时间（2s）划分的*/@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;/* 动画名称 */animation-name: move;/* 动画持续时间 */animation-duration: 5s;/* 运动曲线 */animation-timing-function: ease;/* 何时开始 */animation-delay: 1s;/* 循环次数  默认次数为1*//* animation-iteration-count: infinite; *//* 是否反向播放 *//* animation-direction: alternate; *//* 动画结束的状态 */animation-fill-mode: forwards;}div:hover {/* 鼠标经过div 让这个div 停止动画 鼠标离开就继续动画 */animation-play-state: paused;}</style>
</head><body><div></div>
</body></html>

16.3 动画简写属性

应用案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>热点图案例</title><style>.map {position: relative;width: 712px;height: 552px;background: url(images/map.png) no-repeat;margin: 0 auto;}.city {position: absolute;top: 206px;left: 493px;color: #fff;}.taibei {top: 444px;left: 593px;}.guangzhou {top: 474px;left: 504px;}.dotted {width: 8px;height: 8px;background-color: #09f;border-radius: 50%;}.city div[class^="pulse"] {/* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 8px;height: 8px;box-shadow: 0 0 12px #009dfd;border-radius: 50%;/* 动画 */animation: pulse 1.2s linear infinite;}.city div.pulse2 {animation-delay: 0.4s;}.city div.pulse3 {animation-delay: 0.8s;}@keyframes pulse {0% {}70% {/* transform: scale(5); 不要使用scale 因为会把阴影也放大 */width: 40px;height: 40px;/* 透明度 */opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}}</style>
</head><body><div class="map"><div class="city"><!-- 中间小点 --><div class="dotted"></div><!-- 波纹 --><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="city taibei"><!-- 中间小点 --><div class="dotted"></div><!-- 波纹 --><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="city guangzhou"><!-- 中间小点 --><div class="dotted"></div><!-- 波纹 --><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div>
</body></html>

16.4 动画速度曲线之步长 step

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动画速度曲线之步长step</title><style>div {overflow: hidden;font-size: 20px;width: 0;height: 30px;background-color: pink;white-space: nowrap;animation: w 4s steps(10) forwards;}@keyframes w {0% {width: 0;}100% {width: 200px;}}</style>
</head><body><div>金飞达发达发啊放大放</div>
</body></html>

应用案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>动画速度曲线之步长step</title><style>body {background-color: #ccc;}div {position: absolute;width: 105px;height: 45px;background: url(images/bear.png) no-repeat;/* 元素可以添加多个动画，用逗号分隔 */animation: bear 1s steps(8) infinite, move 1s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -749px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* 自身的50% */transform: translateX(-50%);}}</style>
</head><body><div></div>
</body></html>

17、CSS3 3D 转换

17.1 三维坐标系

17.2 3D移动 translate3d

17.3 3D 透视 perspective

17.4 3D Z轴 translateZ

17.5 3D 旋转 rotate3d


  • transform: rotateX(180deg);
  • transform: rotateY(180deg);

17.6 3D 呈现 transform-style




<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3D 转换</title><style>body {perspective: 400px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all .5s;/* 要让背面的紫色盒子保留3d立体空间  给父级盒子添加transform-style*/transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;background-color: pink;font-size: 30px;color: #fff;text-align: center;line-height: 300px;}.back {background-color: purple;transform: rotateY(180deg);z-index: -1;}</style></head><body><div class="box"><div class="front">你好</div><div class="back">我在这里等你</div></div>
</body></html>



<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3D 转换</title><style>* {margin: 0;padding: 0;}ul {margin: 100px;}ul li {float: left;margin: 0 10px;width: 120px;height: 35px;perspective: 200px;list-style: none;}.box {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .6s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;top: 0;left: 0;background-color: pink;width: 100%;height: 100%;}.front {transform: translateZ(17.5px);}.bottom {background-color: purple;/* 要求这个盒子向前翻转，因此x轴一定是负值 *//* 如果有移动 或者其他样式 必须先写我们的移动 */transform: translateY(17.5px) rotateX(-90deg);z-index: -1;}</style></head><body><ul><li><div class="box"><div class="front">AA1</div><div class="bottom">BB1</div></div></li><li><div class="box"><div class="front">AA2</div><div class="bottom">BB2</div></div></li></ul>
</body></html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旋转木马</title><style>body {perspective: 1000px;}section {position: relative;width: 968px;height: 484px;margin: 150px auto;background: url(images/1.jpeg) no-repeat;transform-style: preserve-3d;/* 添加动画效果 */animation: rotate 3s linear infinite;}/* 鼠标经过盒子，停止动画 */section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0);}100% {transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(images/3.jpeg) no-repeat;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {/* 先旋转在移动，此场景跟位置没有关系，所以旋转角度可以写在前面 */transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}</style></head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section>
</body></html>

17.7 浏览器私有前缀

18、移动WEB开发之流式布局

18.1 移动端基础

18.1.1 浏览器现状

18.1.2 手机屏幕现状

18.1.3 常见移动端屏幕尺寸

18.1.4 移动端调试方法

18.1.5 移动端总结

18.2 视口

18.2.1 布局视口 layout viewport

18.2.2 视觉视口 visual viewport

18.2.3 理想视口 ideal viewport

18.2.4 视口的总结

18.2.5 meta视口标签

18.3 二倍图

18.3.1 物理像素&物理像素比


18.3.2 多倍图

18.3.3 背景缩放 background-size

18.4 移动端开发选择

18.4.1 移动端主流方案

18.4.1.1 单独制作移动端页面

18.4.1.2 响应式兼容PC移动端

18.5 移动端技术解决方案

18.5.1 移动端浏览器

18.5.2 CSS初始化 normalize.css

18.5.3 CSS3 盒子模型 box-sizing

18.5.4 特殊样式

18.6 移动端常见布局

18.6.1 流式布局





18.6.2 二倍精灵图做法

  • css文件中引入normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document========================================================================== *//*** 1. Correct the line height in all browsers.* 2. Prevent adjustments of font size after orientation changes in iOS.*/html {line-height: 1.15; /* 1 */-webkit-text-size-adjust: 100%; /* 2 */
}/* Sections========================================================================== *//*** Remove the margin in all browsers.*/body {margin: 0;
}/*** Render the `main` element consistently in IE.*/main {display: block;
}/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/h1 {font-size: 2em;margin: 0.67em 0;
}/* Grouping content========================================================================== *//*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/hr {box-sizing: content-box; /* 1 */height: 0; /* 1 */overflow: visible; /* 2 */
}/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/pre {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */
}/* Text-level semantics========================================================================== *//*** Remove the gray background on active links in IE 10.*/a {background-color: transparent;
}/*** 1. Remove the bottom border in Chrome 57-* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/abbr[title] {border-bottom: none; /* 1 */text-decoration: underline; /* 2 */text-decoration: underline dotted; /* 2 */
}/*** Add the correct font weight in Chrome, Edge, and Safari.*/b,
strong {font-weight: bolder;
}/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/code,
kbd,
samp {font-family: monospace, monospace; /* 1 */font-size: 1em; /* 2 */
}/*** Add the correct font size in all browsers.*/small {font-size: 80%;
}/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}sub {bottom: -0.25em;
}sup {top: -0.5em;
}/* Embedded content========================================================================== *//*** Remove the border on images inside links in IE 10.*/img {border-style: none;
}/* Forms========================================================================== *//*** 1. Change the font styles in all browsers.* 2. Remove the margin in Firefox and Safari.*/button,
input,
optgroup,
select,
textarea {font-family: inherit; /* 1 */font-size: 100%; /* 1 */line-height: 1.15; /* 1 */margin: 0; /* 2 */
}/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/button,
input { /* 1 */overflow: visible;
}/*** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox.*/button,
select { /* 1 */text-transform: none;
}/*** Correct the inability to style clickable types in iOS and Safari.*/button,
[type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button;
}/*** Remove the inner border and padding in Firefox.*/button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;
}/*** Restore the focus styles unset by the previous rule.*/button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;
}/*** Correct the padding in Firefox.*/fieldset {padding: 0.35em 0.75em 0.625em;
}/*** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove the padding so developers are not caught out when they zero out*    `fieldset` elements in all browsers.*/legend {box-sizing: border-box; /* 1 */color: inherit; /* 2 */display: table; /* 1 */max-width: 100%; /* 1 */padding: 0; /* 3 */white-space: normal; /* 1 */
}/*** Add the correct vertical alignment in Chrome, Firefox, and Opera.*/progress {vertical-align: baseline;
}/*** Remove the default vertical scrollbar in IE 10+.*/textarea {overflow: auto;
}/*** 1. Add the correct box sizing in IE 10.* 2. Remove the padding in IE 10.*/[type="checkbox"],
[type="radio"] {box-sizing: border-box; /* 1 */padding: 0; /* 2 */
}/*** Correct the cursor style of increment and decrement buttons in Chrome.*/[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;
}/*** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari.*/[type="search"] {-webkit-appearance: textfield; /* 1 */outline-offset: -2px; /* 2 */
}/*** Remove the inner padding in Chrome and Safari on macOS.*/[type="search"]::-webkit-search-decoration {-webkit-appearance: none;
}/*** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to `inherit` in Safari.*/::-webkit-file-upload-button {-webkit-appearance: button; /* 1 */font: inherit; /* 2 */
}/* Interactive========================================================================== *//** Add the correct display in Edge, IE 10+, and Firefox.*/details {display: block;
}/** Add the correct display in all browsers.*/summary {display: list-item;
}/* Misc========================================================================== *//*** Add the correct display in IE 10+.*/template {display: none;
}/*** Add the correct display in IE 10.*/[hidden] {display: none;
}
  • 京东首页index.css
body {width: 100%;min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 14px;font-family: -apple-system, 'Helvetica Neue', sans-serif;color: #666;
}/* 点击高亮我们需要清除 设置为transparent 完成透明 */* {-webkit-tap-highlight-color: transparent;
}/* 移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */input {-webkit-appearance: none;
}/* 禁止长按页面时的弹出菜单 */img,
a {-webkit-touch-callout: none;
}a {color: #666;text-decoration: none;
}ul {margin: 0;padding: 0;list-style: none;
}img {vertical-align: middle;
}.app {height: 45px;
}.app ul li {float: left;height: 45px;line-height: 45px;background-color: #333333;text-align: center;color: #fff;
}.app ul li:nth-child(1) {width: 8%;
}.app ul li:nth-child(1) img {width: 10px;height: 10px;
}.app ul li:nth-child(2) {width: 10%;
}.app ul li:nth-child(2) img {width: 30px;height: 30px;/* 图片和文字的中线对齐  图片就能居中对齐*/vertical-align: middle;
}.app ul li:nth-child(3) {width: 57%;
}.app ul li:nth-child(4) {width: 25%;background-color: #f63515;
}/* 搜索 */.search-wrap {position: fixed;width: 100%;min-width: 320px;max-width: 640px;overflow: hidden;/* background-color: #c82519; */height: 44px;line-height: 44px;text-align: center;
}.search-btn {position: absolute;top: 0;left: 0;/* background-color: pink; */width: 40px;height: 44px;
}.search-btn::before {content: "";display: block;width: 20px;height: 18px;background: url(../images/span.png) no-repeat;background-size: 20px 18px;margin: 14px 0 0 15px;
}.search {position: relative;height: 30px;background-color: #f7f7f7;margin: 7px 50px;border-radius: 15px;
}.search-login {position: absolute;top: 0;right: 0;/* background-color: pink; */width: 40px;height: 44px;color: #fff;
}.jd-icon {position: absolute;top: 8px;left: 13px;width: 20px;height: 15px;background: url(../images/JD.png) no-repeat;background-size: 20px 15px;
}.jd-icon::after {content: "";position: absolute;right: -10px;top: 0;display: block;width: 1px;height: 15px;background-color: #ccc;
}.sou {position: absolute;top: 8px;left: 50px;width: 18px;height: 15px;/* 注意二倍精灵图的做法 */background: url(../images/jd-sprites.png) no-repeat -83px 0;/* 需要把精灵图也要缩放一半 */background-size: 200px auto;
}/* 主体内容部分 */.slider img {width: 100%;
}.brand {overflow: hidden;border-radius: 15px 15px 0 0;
}.brand div {float: left;width: 33.33%;
}.brand div img {width: 100%;
}/* nav部分 */nav {overflow: hidden;padding-top: 5px;
}nav a {float: left;width: 20%;text-align: center;
}nav a img {width: 40px;margin: 10px;
}nav a span {display: block;
}/* 新闻模块 */.news {margin-top: 20px;
}.news a {float: left;box-sizing: border-box;
}.news img {width: 100%;
}.news a:nth-child(1) {width: 50%;
}.news a:nth-child(n+2) {width: 25%;border-left: 1px solid #ccc;
}
  • 京东首页index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><!-- 引入css初始化文件 --><link rel="stylesheet" href="css/normalize.css"><!-- 引入首页的css --><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><!-- 顶部 --><header class="app"><ul><li><img src="images/close.png" alt=""></li><li><img src="images/logo.png" alt=""></li><li>打开京东App，购物更轻松</li><li>立即打开</li></ul></header><!-- 搜索 --><div class="search-wrap"><div class="search-btn"></div><div class="search"><div class="jd-icon"></div><div class="sou"></div></div><div class="search-login">登录</div></div><!-- 主体内容部分 --><div class="main-content"><!-- 滑动图 --><div class="slider"><img src="upload/banner.dpg" alt=""></div><div class="brand"><div><a href="#"><img src="upload/pic.webp" alt=""></a></div><div><a href="#"><img src="upload/pic.webp" alt=""></a></div><div><a href="#"><img src="upload/pic.webp" alt=""></a></div></div></div><!-- nav部分 --><nav><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a><a href="#"><img src="upload/nav1.png" alt=""><span>京东超市</span></a></nav><!-- 新闻模块 --><div class="news"><a href="#"><img src="upload/new1.png" alt=""></a><a href="#"><img src="upload/news2.png" alt=""></a><a href="#"><img src="upload/new3.png" alt=""></a></div>
</body></html>

18.6.3 flex 布局

18.6.3.1 传统布局与flex布局

18.6.3.2 flex布局原理


18.6.3.3 常见父项属性

18.6.3.3.1 flex-direction 设置主轴方向


18.6.3.3.2 justify-content 设置主轴上的子元素排列方式

18.6.3.3.3 flex-wrap 设置子元素是否换行

18.6.3.3.4 align-items 设置侧轴上的子元素排列方式（单行）

18.6.3.3.5 align-content 设置侧轴上的子元素排列方式（多行）

18.6.3.3.6 align-content 和 align-items区别

18.6.3.3.7 flext-flow

18.6.3.4 常见子项属性

18.6.3.4.1 flex 属性

18.6.3.4.2 align-self 控制子项自己在侧轴上的排列方式

18.6.3.4.3 order 属性定义项目的排列顺序











  • 首页的index.css
body {max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;color: #000;background: #f2f2f2;overflow: hidden;-webkit-tap-highlight-color: transparent;
}a {text-decoration: none;color: #222;
}ul {list-style: none;margin: 0;padding: 0;
}div {box-sizing: border-box;
}/* 搜索模块 */.search-index {display: flex;position: fixed;top: 0;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);/* 固定盒子要有宽度 */width: 100%;height: 44px;background-color: #98a8b4;min-width: 320px;max-width: 540px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;
}.search {position: relative;height: 24px;/* 由于使用了css3盒子模型，所以要去掉盒子的边框 ，文字才能居中*/line-height: 22px;border: 1px solid #ccc;flex: 1;font-size: 12px;color: #666;margin: 8px 10px;border-radius: 12px;padding-left: 30px;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);background-color: #fff;
}.search::before {content: "";position: absolute;top: 5px;left: 10px;width: 15px;height: 15px;background: url(../images/sprite.png) no-repeat 0 0;background-size: 21px auto;
}.user {width: 44px;height: 44px;/* background-color: purple; */font-size: 12px;text-align: center;color: #FFFFFF;
}/* 二倍精灵图的做法 */.user::before {content: " ";display: block;width: 21px;height: 21px;background: url(../images/sprite.png) no-repeat 0 -36px;background-size: 21px auto;margin: 5px auto -2px;
}/* 焦点图模块 */.focus {padding-top: 44px;
}.focus img {width: 100%;
}/* 局部导航栏 */.local-nav {display: flex;height: 64px;background-color: #fff;border-radius: 8px;margin: 4px 5px;
}.local-nav li {flex: 1;
}.local-nav a {display: flex;font-size: 12px;flex-direction: column;align-items: center;
}.local-nav li [class^="local-nav-icon"] {width: 40px;height: 40px;background: url(../images/ul-sprite.png) no-repeat 0 0;background-size: 40px auto;
}.local-nav li .local-nav-icon-icon2 {background-position: 0 -40px;
}.local-nav li .local-nav-icon-icon3 {background-position: 0 -80px;
}.local-nav li .local-nav-icon-icon4 {background-position: 0 -120px;
}.local-nav li .local-nav-icon-icon5 {background-position: 0 -160px;
}/* 主导航栏  */nav {overflow: hidden;border-radius: 8px;margin: 0 4px 3px;
}.nav-common {display: flex;height: 88px;background-color: pink;
}.nav-common:nth-child(2) {margin: 3px 0;
}.nav-items {flex: 1;display: flex;flex-direction: column;
}.nav-items a {flex: 1;text-align: center;line-height: 44px;color: #fff;font-size: 14px;/* 文字阴影 */text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
}.nav-items a:nth-child(1) {border-bottom: 1px solid #fff;
}.nav-items:nth-child(1) a {border: 0;background: url(../images/hotel.png) no-repeat bottom center;background-size: 73px auto;
}.nav-items:nth-child(-n+2) {border-right: 1px solid #fff;
}/* 背景线性渐变 */.nav-common:nth-child(1) {background: -webkit-linear-gradient(left, #fa5c56, #ffd151);
}.nav-common:nth-child(2) {background: -webkit-linear-gradient(left, #4c90ed, #53bbed);
}.nav-common:nth-child(3) {background: -webkit-linear-gradient(left, #35c2a8, #6bd558);
}/* 侧导航栏 */.subnav-entry {display: flex;border-radius: 8px;background-color: #fff;margin: 0 4px;flex-wrap: wrap;
}.subnav-entry li {/* 里面的子盒子可以写 % 相对于父级来说的 */flex: 20%;padding: 5px 0;
}.subnav-entry a {display: flex;flex-direction: column;align-items: center;
}.subnav-entry-icon {width: 28px;height: 28px;background-color: pink;margin-top: 4px;background: url(../images/subnav.png) no-repeat;background-size: 28px auto;
}/* 销售模块 */.sales-box {border-top: 1px solid #ccc;background-color: #fff;margin: 4px;
}.sales-hd {height: 44px;position: relative;border-bottom: 1px solid #ccc;
}.sales-hd h2 {position: relative;text-indent: -999px;overflow: hidden;
}.sales-hd h2::after {position: absolute;top: 8px;left: 20px;content: " ";width: 79px;height: 15px;background: url(../images/sprite.png) no-repeat 0 -20px;background-size: 79px auto;
}.more {position: absolute;right: 5px;top: 0px;background: -webkit-linear-gradient(left, #ff506c, #ff6bc6);border-radius: 15px;padding: 3px 20px 3px 10px;color: #fff;
}.more::after {content: "";position: absolute;top: 9px;right: 9px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}.row {display: flex;
}.row a {flex: 1;border-bottom: 1px solid #eee;
}.row a:nth-child(1) {border-right: 1 solid #eee;
}.row a img {width: 100%;
}
  • 首页的index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>携程在手 说走就走</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">
</head><body><!-- 顶部搜索模块 --><div class="search-index"><div class="search">搜索：目的地/酒店/景点/航班号</div><a href="#" class="user">我 的</a></div><!-- 焦点图模块 --><div class="focus"><img src="upload/focus.png" alt=""></div><!-- 局部导航栏 --><ul class="local-nav"><li><a href="#" title="景点.玩乐"><span class="local-nav-icon-icon1"></span><span>景点.玩乐</span></a></li><li><a href="#" title="门票.活动"><span class="local-nav-icon-icon2"></span><span>门票.活动</span></a></li><li><a href="#" title="美食林"><span class="local-nav-icon-icon3"></span><span>美食林</span></a></li><li><a href="#" title="周边游"><span class="local-nav-icon-icon4"></span><span>周边游</span></a></li><li><a href="#" title="一日游"><span class="local-nav-icon-icon5"></span><span>一日游</span></a></li></ul><!-- 主导航栏 --><nav><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div></nav><!-- 侧导航栏 --><ul class="subnav-entry"><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li></ul><!-- 销售模块 --><div class="sales-box"><div class="sales-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div><div class="sales-bd"><div class="row"><a href="#"><img src="upload/focus.png" alt=""></a><a href="#"><img src="upload/focus.png" alt=""></a></div><div class="row"><a href="#"><img src="upload/focus.png" alt=""></a><a href="#"><img src="upload/focus.png" alt=""></a></div><div class="row"><a href="#"><img src="upload/focus.png" alt=""></a><a href="#"><img src="upload/focus.png" alt=""></a></div></div></div>
</body></html>

18.6.4 rem 适配布局

18.6.4.1 rem 基础



18.6.4.2 媒体查询

18.6.4.2.1 什么是媒体查询

18.6.4.2.2 语法规范

18.6.4.2.2.1 mediatype查询类型

18.6.4.2.2.2 关键字

18.6.4.2.2.3 媒体特性





<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 媒体查询一般按照从大到小 或者 从小到大的顺序来 *//* 小于540px 页面的背景颜色变为蓝色 */@media screen and (max-width:539px) {body {background-color: blue;}}/* 540~970 页面颜色变为绿色 */@media screen and (min-width:540px)/*  and (max-width:969px)  */{body {background-color: green;}}/* 大于等于970 页面颜色变为 红色 */@media screen and (min-width:970px) {body {background-color: red;}}/* screen 和 and 必须带上不能省略 数字后面必须跟单位 根据层叠性 从小到大优势代码 后面的代码会层叠前面的代码*/</style>
</head><body><div><p></p></div>
</body></html>
18.6.4.2.3 媒体查询+rem实现元素动态大小变化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}/* html {font-size: 100px;} */@media screen and (min-width: 320px) {html {font-size: 50px;}}@media screen and (min-width: 640px) {html {font-size: 100px;}}.top {height: 1rem;font-size: .5rem;background-color: green;color: #fff;text-align: center;line-height: 1rem;}</style>
</head><body><div class="top">购物车</div>
</body></html>
18.6.4.2.4 引入资源

  • style320.css
div {width: 100%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: green;
}
  • style640.css
div {float: left;width: 50%;height: 100px;
}div:nth-child(1) {background-color: pink;
}div:nth-child(2) {background-color: green;
}
  • index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 当屏幕大于等于640px以上，让div 一行显示2个 *//*当屏幕小于640px,让div 一行显示一个 *//* 建议：媒体查询最好的方法是从小到大 *//* 引入资源就是针对不同的屏幕尺寸 调用不同的css文件 */</style><link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)"><link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">
</head><body><div>1</div><div>2</div>
</body></html>
18.6.4.2.5 rem适配方案

18.6.4.2.5.1 rem实际开发适配方案

18.6.4.2.5.2 rem适配方案技术使用（市场主流）

  • 技术方案1


  • 技术方案2
    • 简洁高效的rem适配方案flexible.js
  • cssrem插件默认的字体大小为16px
  • 修改cssrem插件的默认字体大小

18.6.5 Less

18.6.5.1 css的弊端

18.6.5.2 Less介绍

18.6.5.3 Less使用

18.6.5.3.1 Less变量

18.6.5.3.2 Less编译


18.6.5.3.3 Less 嵌套


  • nest.less
.header {width: 200px;height: 200px;background-color: pink;a {color: red;// 伪类、交集选择器、伪元素选择器，要在选择器的前面加&&:hover {color: blue;}}
}.nav {.logo {color: green;}// 添加伪元素&::before {content: "";}
}
  • index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/nest.css">
</head><body><div class="header"><a href="#">文字</a></div><div class="nav"><div class="logo">您好</div></div>
</body></html>
18.6.5.3.4 Less 运算




应用案例

技术方案1






  • 技术方案1
  • common.less
// 公共样式
a {text-decoration: none;
}
// 设置常见的屏幕尺寸 修改里面的html文字大小
// 普通页面打开,一定要写在最上面
html { font-size: 50px;
}
// 定义屏幕划分的分数为15份 变量为no
@no: 15;
//320
@media screen and (min-width: 320px) {html {font-size: (320px / @no);}
}
//360
@media screen and (min-width: 360px) {html {font-size: (360px / @no);}
}
//375
@media screen and (min-width: 375px) {html {font-size: (375px / @no);}
}
//384
@media screen and (min-width: 384px) {html {font-size: (384px / @no);}
}
//400
@media screen and (min-width: 400px) {html {font-size: (400px / @no);}
}
//414
@media screen and (min-width: 414px) {html {font-size: (414px / @no);}
}
//424
@media screen and (min-width: 424px) {html {font-size: (424px / @no);}
}
//480
@media screen and (min-width: 480px) {html {font-size: (480px / @no);}
}
//540
@media screen and (min-width: 540px) {html {font-size: (540px / @no);}
}
//720
@media screen and (min-width: 720px) {html {font-size: (720px / @no);}
}
//750
@media screen and (min-width: 750px) {html {font-size: (750px / @no);}
}
  • index.less
// 首页样式
// 导入common.less文件
@import "common";
body {min-width: 320px;width: 15rem;margin: 0 auto;line-height: 1.5;font-family: Arial, Helvetica;background: #f2f2f2;
}// search-content
@baseFont: 50;
.search-content {display: flex;position: fixed;top: 0;left: 50%;width: 15rem;height: (88rem / @baseFont);background-color: #ffdb47;transform: translateX(-50%);.classify {width: (36rem / @baseFont);height: (60rem / @baseFont);background: url(../images/fenlei.png) no-repeat ;background-size: (36rem / @baseFont) (60rem / @baseFont);margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);}.search {position: relative;flex: 1;input {outline: none;width: 100%;border: 0;height: (66rem / @baseFont);border-radius: (33rem / @baseFont);background-color: #ffffff;margin-top: (10rem / @baseFont);font-size: (25rem / @baseFont);padding-left: (70rem / @baseFont);color: #757575;}&::before {content: "";position: absolute;top: (25rem / @baseFont);left: (20rem / @baseFont);width: (36rem / @baseFont);height: (36rem / @baseFont);background: url(../images/search.png) no-repeat;background-size: (36rem / @baseFont) (36rem / @baseFont);}}.login {width: (36rem / @baseFont);height: (60rem / @baseFont);background: url(../images/login.png) no-repeat;background-size: (36rem / @baseFont) (60rem / @baseFont);margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);}
}// banner
.banner {width: (750rem / @baseFont);margin-top: (88rem / @baseFont);img {width: 100%;}
}
//ad
.ad {display: flex;a {flex: 1;img {width: 100%;}}
}
//nav
nav {width: (750rem / @baseFont);a {float: left;width: (150rem / @baseFont);height: (142rem / @baseFont);text-align: center;img {width: (84rem / @baseFont);height: (84rem / @baseFont);// margin: (10rem / @baseFont) auto 0;}span {display: block;font-size: (25rem / @baseFont);color: #333;}}
}
  • index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">
</head><body><!-- 顶部搜索框 --><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action="#"><input type="search" value="iPhone 12领券立减800"></form></div><a href="#" class="login"></a></div><!-- banner部分 --><div class="banner"><img src="upload/banner.gif" alt=""></div><!-- 广告部分 --><div class="ad"><a href="#"><img src="upload/ad.jpg" alt=""></a><a href="#"><img src="upload/ad.jpg" alt=""></a><a href="#"><img src="upload/ad.jpg" alt=""></a></div><!-- nav --><nav><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a><a href="#"><img src="upload/ms.png" alt=""><span>苏宁秒杀</span></a></nav>
</body></html>
技术方案2




  • flexible.js
;(function(win, lib) {var doc = win.document;var docEl = doc.documentElement;var metaEl = doc.querySelector('meta[name="viewport"]');var flexibleEl = doc.querySelector('meta[name="flexible"]');var dpr = 0;var scale = 0;var tid;var flexible = lib.flexible || (lib.flexible = {});if (metaEl) {console.warn('将根据已有的meta标签来设置缩放比例');var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);if (match) {scale = parseFloat(match[1]);dpr = parseInt(1 / scale);}} else if (flexibleEl) {var content = flexibleEl.getAttribute('content');if (content) {var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);if (initialDpr) {dpr = parseFloat(initialDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));    }if (maximumDpr) {dpr = parseFloat(maximumDpr[1]);scale = parseFloat((1 / dpr).toFixed(2));    }}}if (!dpr && !scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);var isIPhone = win.navigator.appVersion.match(/iphone/gi);var devicePixelRatio = win.devicePixelRatio;if (isIPhone) {// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                dpr = 3;} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){dpr = 2;} else {dpr = 1;}} else {// 其他设备下，仍旧使用1倍的方案dpr = 1;}scale = 1 / dpr;}docEl.setAttribute('data-dpr', dpr);if (!metaEl) {metaEl = doc.createElement('meta');metaEl.setAttribute('name', 'viewport');metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');if (docEl.firstElementChild) {docEl.firstElementChild.appendChild(metaEl);} else {var wrap = doc.createElement('div');wrap.appendChild(metaEl);doc.write(wrap.innerHTML);}}function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}win.addEventListener('resize', function() {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}, false);win.addEventListener('pageshow', function(e) {if (e.persisted) {clearTimeout(tid);tid = setTimeout(refreshRem, 300);}}, false);if (doc.readyState === 'complete') {doc.body.style.fontSize = 12 * dpr + 'px';} else {doc.addEventListener('DOMContentLoaded', function(e) {doc.body.style.fontSize = 12 * dpr + 'px';}, false);}refreshRem();flexible.dpr = win.dpr = dpr;flexible.refreshRem = refreshRem;flexible.rem2px = function(d) {var val = parseFloat(d) * this.rem;if (typeof d === 'string' && d.match(/rem$/)) {val += 'px';}return val;}flexible.px2rem = function(d) {var val = parseFloat(d) / this.rem;if (typeof d === 'string' && d.match(/px$/)) {val += 'rem';}return val;}})(window, window['lib'] || (window['lib'] = {}));
  • index.css
/* 如果屏幕超过了 750px 就按照750px来设计，不要超过750px */@media screen and (min-width: 750px) {html {font-size: 75px!important;}
}/* search-content */.search-content {display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 10rem;height: 1.173333rem;background-color: #ffdb47;
}.classify {width: .48rem;height: .8rem;background-color: pink;background: url(../images/fenlei.png) no-repeat;background-size: .48rem .8rem;margin: .106667rem .333333rem .133333rem;
}.search {flex: 1;position: relative;
}.search input {outline: none;border: 0;width: 100%;height: .88rem;font-size: .333333rem;background-color: #ffffff;margin-top: .106667rem;border-radius: .44rem;padding-left: .866667rem;
}.search::before {content: "";position: absolute;top: .333333rem;left: .266667rem;width: .48rem;height: .48rem;background: url(../images/search.png) no-repeat;background-size: .48rem .48rem;
}.login {width: .48rem;height: .8rem;background: url(../images/login.png) no-repeat;background-size: .48rem .8rem;margin: .106667rem .266667rem .133333rem;
}
  • index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>Document</title><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css"><!-- 引入flexible.js文件 --><script src="js/flexible.js"></script>
</head><body><div class="search-content"><a href="#" class="classify"></a><div class="search"><form action="#"><input type="search" value="iPhone 12领券立减800"></form></div><a href="#" class="login"></a></div>
</body></html>

18.6.6 响应式布局

18.6.6.1 响应式开发原理

18.6.6.2 响应式布局容器

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>Document</title><style>.container {height: 150px;background-color: pink;margin: 0 auto;}/* 超小屏幕 小于768 */@media screen and (max-width: 767px) {.container {width: 100%;}}/* 小屏幕下 大于等于768 布局容器改为 750px */@media screen and (min-width: 768px) {.container {width: 750px;}}/* 中等屏幕下 992px 布局容器改为 970px */@media screen and (min-width: 992px) {.container {width: 970px;}}/* 大屏幕下 大于等于1200 布局容器改为 1170 */@media screen and (min-width: 1200px) {.container {width: 1170px;}}</style>
</head><body><!-- 响应式开发 --><div class="container"></div>
</body></html>


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.container {width: 750px;margin: 0 auto;}.container ul li {float: left;width: 93.75px;height: 30px;background-color: green;}@media screen and (max-width: 767px) {.container {width: 100%;}.container ul li {width: 33.33%;}}</style>
</head><body><!-- 响应式开发 --><div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>
</body></html>

18.6.6.3 Bootstrap

18.6.6.3.1 Bootstrap简介



18.6.6.3.2 Bootstrap使用




18.6.6.3.3 布局容器

18.6.6.3.4 栅格系统
18.6.6.3.4.1 什么是栅格系统

18.6.6.3.4.2 栅格系统选项参数

18.6.6.3.4.3 列嵌套

18.6.6.3.4.4 列偏移


18.6.6.3.4.5 列排序

18.6.6.3.4.6 响应式工具

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap</title><!-- Bootstrap --><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><style>.row div {height: 50px;background-color: pink;}span {font-size: 50px;color: white;}</style>
</head><body><div class="container"><div class="row"><div class="col-xs-3"><span class="visible-lg">我会显示</span></div><div class="col-xs-3">2</div><div class="col-xs-3 hidden-md hidden-xs">我会隐藏</div><div class="col-xs-3">4</div></div></div>
</body></html>

应用案例




  • 引入bootstrap框架中bootstrap.min.css文件
  • index.css
ul {list-style: none;margin: 0;padding: 0;
}a {color: #666;text-decoration: none;
}a:hover {text-decoration: none;
}body {background-color: #f5f5f5;
}.container {background-color: #fff;
}/* 修改container的宽度为1280 */@media screen and (min-width: 1280px) {.container {width: 1280px;}
}/* header */header {padding-left: 0!important;
}.logo {background-color: #ff5e52;
}.logo img {display: block;/* width: 100%; *//* logo图片不需要缩放 解决了小屏幕显示问题*/max-width: 100%;margin: 0 auto;
}/* 进入超小屏幕下 logo里面的图片就隐藏起来 在logo里面准备一个盒子 只有在超小屏幕下显示*/.logo span {display: block;height: 50px;line-height: 50px;text-align: center;color: #fff;font-size: 18px;
}.nav {background-color: #f6f6f6;border-bottom: 1px solid #ccc;
}.nav a {display: block;height: 50px;line-height: 50px;padding-left: 30px;font-size: 16px;
}.nav a:hover {background-color: #fff;color: #333;
}.nav a::before {vertical-align: middle;padding-right: 5px;
}/* 小屏幕和超小屏幕的时候 nav里面li要浮动，并起宽度为20% */@media screen and (max-width: 991px) {.nav li {float: left;width: 20%;}article {margin-top: 10px;}
}/* 超小屏幕 文字变成14px */@media screen and (max-width: 767px) {.nav li a {font-size: 14px;padding-left: 3px;}/* 超小屏幕 第一个li 宽度100% 剩下的小li 各占50%*/.news li:nth-child(1) {width: 100%!important;}.news li {width: 50%!important;}.publish h3 {font-size: 13px;}
}@media screen and (max-width: 991px) {.nav li {float: left;width: 20%;}
}.news li {float: left;width: 25%;height: 128px;padding-right: 10px;margin-bottom: 10px;
}.news li a {position: relative;display: block;width: 100%;height: 100%;
}.news li a img {width: 100%;height: 100%;
}.news li a p {position: absolute;bottom: 0;left: 0;width: 100%;height: 41px;padding: 5px 10px;font-size: 12px;color: #fff;background: rgba(0, 0, 0, .5);margin-bottom: 0;
}.news li:nth-child(1) {width: 50%;height: 266px;
}.news li:nth-child(1) p {line-height: 41px;font-size: 20px;padding: 0 10px;
}.publish {border-top: 1px solid #ccc;
}.publish .row {border-bottom: 1px solid #ccc;padding: 10px 0;
}.pic {margin-top: 10px;
}.pic img {width: 100%;
}.banner img {width: 100%;
}.hot {display: block;margin-top: 20px;border: 1px solid #ccc;padding: 0 20px 20px;
}.hot span {border-radius: 0;margin-bottom: 20px;
}
  • index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap</title><!-- 引入Bootstrap文件 --><link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="css/index.css"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><div class="container"><div class="row"><header class="col-md-2"><div class="logo"><a href="#"><img src="images/logo.png" alt="" class="hidden-xs"><span class="visible-xs">阿里百秀</span></a></div><div class="nav"><ul><!-- 图片只需引入bootstrap的组件即可 --><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li></ul></div></header><article class="col-md-7"><!-- 新闻 --><div class="news clearfix"><ul><li><a href="#"><img src="upload/news1.jpg" alt=""><p>阿里百秀</p></a></li><li><a href="#"><img src="upload/news2.jpg" alt=""><p>阿里百秀1</p></a></li><li><a href="#"><img src="upload/news2.jpg" alt=""><p>阿里百秀2</p></a></li><li><a href="#"><img src="upload/news2.jpg" alt=""><p>阿里百秀</p></a></li><li><a href="#"><img src="upload/news2.jpg" alt=""><p>阿里百秀</p></a></li></ul></div><!-- 发表 --><div class="publish"><div class="row"><div class="col-sm-9"><!-- 引入Bootstrap的排版的标题，就能指定文字的大小 --><h3>生活馆 生活馆 生活馆 生活馆</h3><!-- 引入Bootstrap的辅助类的上下文颜色，就能改变颜色 --><p class="text-muted hidden-xs">发布于 2021-04-26 来源：河北广播电视台</p><p class="hidden-xs">4月23日，同步赞旗下自助发稿融媒体平台：赞传媒正式发布，网站同步上线正式运营。 发布会上，同步赞负责人林老师表示，赞传媒平台免费开放注册、免费使用。同时在赞传媒平台发稿，还免费赠送专业记者代写新闻稿的服务。 据介绍，赞传媒是同步赞旗下一个为企业和品牌提供自助发稿的融媒体平台，提...</p><p class="text-muted">阅读(79)赞 (19)</p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/11.jpeg" alt=""></div></div></div></article><aside class="col-md-3"><div class="banner"><img src="upload/zgboke.jpg" alt=""></div><div class="hot"><!-- 引入Bootstrap的css选项中按钮样式和辅助类语义化的颜色 --><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p></div></aside></div></div>
</body></html>

CSS+CSS3超详细教程相关推荐

  1. 【超详细教程】使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结...

    [超详细教程]使用Windows Live Writer 2012和Office Word 2013 发布文章到博客园全面总结 原文 http://www.cnblogs.com/liuxianan/ ...

  2. geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （二）（小白必备：超详细教程）

    上一篇讲了 如何利用geoserver 发布矢量切片,接下来我们说 如何去展示,既然做我们就作全面吧,谁让我们gis 就是这么苦逼呢,哈哈. 环境: geoserver 2.21 vue 2.0 op ...

  3. geoserver 发布 矢量切片（pbf）并用openlayers 6.14 /leaflet 1.8 加载展示 （三）（小白必备：超详细教程）

    前两篇分别讲了 如何利用geoserver 发布矢量切片和openlayers 加载.接下来我们说 如何用leaflet 展示,既然做我们就作全面吧,谁让我们gis 就是这么苦逼呢,哈哈. 环境: g ...

  4. 极验验证码破解—超详细教程（一）

    极验验证码破解-超详细教程(一) Gayhub:FanhuaandLuomu/geetest_break 2017.8.21 代码以上传,可供参考 目录 一.网站http://www.gsxt.gov ...

  5. 手把手带你入门前端工程化——超详细教程（高级前端必备）

    本文将分成以下 7 个小节: 技术选型 统一规范 测试 部署 监控 性能优化 重构 部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...

  6. 手把手带你入门前端工程化——超详细教程

    授权自@谭光志 链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文 本文将分成以下 7 个小节: 技术选型 统一规范 测试 部署 监控 性能 ...

  7. 手把手从零开始搭建k8s集群超详细教程

    本教程根据B站课程云原生Java架构师的第一课K8s+Docker+KubeSphere+DevOps同步所做笔记教程 k8s集群搭建超详细教程 1. 基本环境搭建 1. 创建私有网络 2. 创建服务 ...

  8. 安装64位Oracle 10g超详细教程

    安装64位Oracle 10g超详细教程 1. 安装准备阶段 1.1 安装Oracle环境 经过上一篇博文的过程,已经完成了对Linux系统的安装,本例使用X-Manager来实现与Linux系统的连 ...

  9. mysql超详细教程_MySQL8.0.23安装超详细教程

    前言 最近在做一个人脸识别的项目,需要用数据库保存学生信息与前段交互. MySQL的优点 1.mysql性能卓越,服务稳定,很少出现异常宕机. 2.mysql开放源代码且无版权制约,自主性及使用成本低 ...

  10. WebRTC VideoEngine超详细教程（三）——集成X264编码和ffmpeg解码

    转自:http://blog.csdn.net/nonmarking/article/details/47958395 本系列目前共三篇文章,后续还会更新 WebRTC VideoEngine超详细教 ...

最新文章

  1. 机器学习中的优化算法！
  2. 复制虚拟机网卡eth0变eth1
  3. JAVA-JSP内置对象之out对象进行页面输出
  4. 支付宝不止怀有“社交梦”，社区金融才是它的野心所在
  5. 研究生的研究人员发展课程
  6. mysql显错注入,SQL注入：显错注入
  7. 上大学后男生的两种变化
  8. 什么是光纤放大器？光放大器的原理是什么？
  9. 计算机专业在沈阳有什么发展,985 计算机专业在全国 TOP10 在沈阳
  10. 【Linux】Linux查看机器负载-IO负载
  11. python生成.exe文件
  12. nginx: [warn] conflicting server name localhost on 0.0.0.0:80, ignored
  13. ENVI入门系列教程---二、图像分析---12. 图像分类流程化工具
  14. pcn变更流程图_超经典的工程变更流程图
  15. 电脑使用者必备的文本编辑器，哪款适合你？
  16. 一级建造师-通信-五种施工顺序-口诀
  17. 支持国产自主可控OS——信创服务器操作系统的配置与管理 （统信UOS版）-新书发布
  18. 3个月测试员自述：4个影响我职业生涯的重要技能
  19. 数据库表的软硬关联_Jimmy的关系型数据库设计心得 第一版
  20. Apache Thrift 官方JAVA教程

热门文章

  1. ASPack压缩可执行文件
  2. 回流reflow与重绘repaint
  3. HTML和CSS小知识点笔记
  4. 真无线蓝牙耳机哪款好？国内真无线蓝牙耳机排行榜10强！
  5. 基于java的自驾游自助游旅游网站
  6. 长风破浪正其时，Python天堑变通途（3）（令人智熄的分支循环，优先级问题）
  7. mysql不区分英文字母大小写模糊查询
  8. 手机怎么把图片转成PDF格式？这个方法很好用
  9. ie 无法打开服务器网页,无法打开internet站点怎么办
  10. win10计算机管理找不到用户,win10重装系统后管理账户不见了，win10怎么找到管理账户？...