HTML+CSS（PC端+移动端）_pc端一行多个标签,移动端一行一个标签

一、PC端HTML+CSS

（一）HTML

1）浏览器与Web标准

• 常用浏览器及内核

• Web标准的组成

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWSHkoYn-1654060785223)(https://gitee.com/imagesss/warehouse1/raw/master/20220402093737.png)]

2）网页开发工具

• 常用网页开发工具

• VS Code插件安装

• VS Code自动生成标签的说明

• VS Code保存自动刷新浏览器插件：Preview on Web Server

3）HTML常用标签

（在线文档：API文档_Web）

• 标题标签：

  • <h1>加大加粗，独占一行</h1>
  • <h6>六级标题</h6>

• 段落和换行标签：<p>段落之间距离大</p>

• 换行标签：行之间距离小<br />

• 文本格式化标签：

  • 加粗：
    • <strong>推荐</strong>
    • <b>加粗标签</b>
  • 倾斜：
    • <em>推荐</em>
    • <i>倾斜标签</i>
  • 删除线：
    • <del>推荐</del>
    • <s>删除线</s>
  • 下划线：
    • <ins>推荐</ins>
    • <u>下划线</u>

• div和span标签：没有语义，就是一个盒子，用来布局网页，可以放文字、图片等

  • div标签：<div>一行只能放一个</div>
  • span标签：<span>一行可以放很多个</span>

• 图像标签：<img src=“图像URL”/>

  • src属性：图片路径
  • alt属性：替换文本
  • title属性：提示文本
  • width属性：图像宽度，单位是像素，宽高等比例缩放，修改任意一个就行
  • height属性：图像高度，单位是像素，宽高等比例缩放，修改任意一个就行
  • border属性：图像边框粗细，单位是像素，一般在CSS中设置

• 路径：

  • 绝对路径：D:\web\img\图像.gif
  • 相对路径：…/img/图像.gif

• 链接标签：<a href=“目标URL”> 文本、图像、表格、音频、视频等 </a>

  • target属性：目标窗口的弹出方式，默认_self本窗口打开，_blank新窗口打开
  • 外部链接：<a href=“http://www.baidu.com”> 文本、图像、表格、音频、视频等</a>
  • 内部链接：<a href=“…/img/网页.html”> 文本、图像、表格、音频、视频等</a>
  • 空链接：<a href=“#”> 文本、图像、表格、音频、视频等</a>
  • 下载链接：（如果href里面的地址是一个文件.exe或压缩包.zip，会下载这个文件）<a href=“…/img/文件.zip”>下载文件</a>

• 锚点标签：点击链接可以快速定位到页面中某个位置

  • 在链接文本的href属性中设置属性值为#名字：<a href=“#名字”>文本、图像、表格、音频、视频等</a>
  • 找到目标位置标签，里面添加一个id属性为以上名字：<h3 id=“名字”>三级标题</h3>

• 注释标签：<!–注释–>

• 特殊字符：

  • 空格：&nbsp；
  • <：&lt；
  • >：&gt；
  • &：&amp；
  • 人民币：&yen；
  • 版权：&copy；
  • 注册商标：&reg；
  • °：&deg；
  • 正负号：&plusmn；
  • 乘号：&times；
  • 除号：&divide；
  • 平方：&sup2；
  • 立方：&sup3；

• 表格标签：

      <table>
          <thead>
               <tr>
                   <th>表头单元格标签,加粗居中显示</th>
               </tr>
          </thead>
          <tbody>
               <tr>
          		<td>列标签</td>
     			 </tr>
          </tbody>
      </table>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  • table标签的align属性：left、center、right规定表格相对于周围元素的对其方式，一般通过CSS设置
  • table标签的border属性：1或“”，规定表格有无边框，一般通过CSS设置
  • table标签的cellpadding属性：单位是像素，规定单元边沿与其内容之间的空白，默认1像素
  • table标签的cellspacing属性：单位是像素，规定单元格之间的空白，默认2像素
  • table标签的width、height属性：单位是像素值或百分比，规定表格的宽度、高度
  • td标签的rowspan属性：跨行合并，rowspan=“合并单元格个数”
  • td标签的colspan属性：跨列合并，colspan=“合并单元格个数”

• 列表标签：

  • 无序列表：样式和布局一般通过CSS设置

    <ul>
        <li>朱一龙</li>
        <li>龚俊</li>
        <li>蔡徐坤</li>
    </ul>
    1
    2
    3
    4
    5

  • 有序列表：样式和布局一般通过CSS设置

    <ol>
        <li>朱一龙</li>
        <li>龚俊</li>
        <li>蔡徐坤</li>
    </ol>
    1
    2
    3
    4
    5

  • 自定义列表：样式和布局一般通过CSS设置

    <dl>
        <dt>名词1，如关注我们</dd>
        <dd>名词1解释1，如微博关注我们</dd>
        <dd>名词1解释2，如微信关注我们</dd>
        <dt>名词2</dd>
        <dd>名词2解释1</dd>
        <dd>名词2解释2</dd>
    </dl>
    1
    2
    3
    4
    5
    6
    7
    8

• 表单标签：收集用户信息，由表单域、表单控件和提示信息构成

  <form action="URL地址" method="提交方式" name="表单域名称">
      
      <input type="radio" name="sex" value="男" id="man" checked="checked"/>
      <label for="man">男</label>
      <input type="radio" name="sex" value="女" id="woman"/>
      <label for="woman">女</label>
      
      <select>
          <option>山东</option>
          <option selected="selected">北京</option>
          <option>火星</option>
      </select>
      
      <textarea rows="5" cols="20">默认文字</textarea>
      
  </form>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

  • input标签type属性值：
    • text：定义单行输入字段，默认宽度20个字符，可以设置value属性为默认值
    • password：定义密码字段，字符被掩码
    • radio：定义单选按钮，对应的所有input标签都要将name属性值设为相同的名字，才能实现多选一；对应的所有input标签都可以设置value属性为表单提交时发送给服务器的值
    • checkbox：定义复选框，对应的所有input标签也要将name属性值设为相同的名字；对应的所有input标签都可以设置value属性为表单提交时发送给服务器的值
    • button：定义可点击按钮，多数情况下用于通过JavaScript启动脚本，如获取验证码
    • file：定义输入字段和“浏览”按钮，供文件上传
    • hidden：定义隐藏的输入字段
    • image：定义图像形式的提交按钮
    • reset：定义重置按钮
    • submit：定义提交按钮，点击时会把表单数据提交给服务器
  • input标签其他属性：
    • name属性：给标签取名，相同名的标签为一组
    • value属性：设置标签默认值或提交表单时的值
    • checked属性：值为checked，规定此input元素首次加载时被选中，主要针对单选按钮和复选框
    • maxlength属性：正整数，规定输入字段中字符的最大长度，一般较少使用
  • label标签：用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将光标转到或选择对应的表单元素上，用来增加用户体验
  • select下拉表单：有多个选项让用户选择，并且想要节约空间时使用，可以用selected属性设置默认选项
  • textarea文本域标签：用户输入内容较多时使用，常用于留言板，评论等；rows属性设置显示多少行，超出行数就自动出现滚动条，cols设置每行最多显示多少字，超出字数自动下一行；实际开发中不会用这俩属性，一般都是通过CSS来改变大小

（二）CSS基础

1）CSS引入方式

• 内部样式表（内嵌样式表）：将样式单独写在style标签内部，style标签一般放在head标签中，可以控制当前HTML页面，开发中使用较多，2）3）的样例全都使用内部样式表

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <style>
         div {
      	   color: red;
             font-size: 12px;
         } 
      </style>
  </head>
  
  <body>
      <div>龚俊</div>
  </body>
  
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 行内样式表：将样式写在标签里，只能控制当前标签，适合修改简单样式，一般情况下使用很少

  <div style="color: red; font-size: 12px;">龚俊</div>
  1

• 外部样式表：样式单独写到CSS文件中，只有样式，没有style标签，在HTML页面中将CSS文件引入，可以控制多个页面，开发中使用最多

  • style.css文件

  div {
      	   color: red;
             font-size: 12px;
  } 
  1
  2
  3
  4

  • html文件

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
      
  <body>
      <div>龚俊</div>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

2）CSS基础选择器

• 标签选择器

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
      <style>
         p {
      	   color: red;
             font-size: 12px;
         } 
      </style>
  </head>
      
  <body>
      <p>龚俊</p>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 类选择器

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
       <style> 
          /*可以被多个标签调用，一个标签可以调用多个*/
  		.red {
      			 color: red;
   		} 
          .font12 {
      			 font-size: 12px;
   		} 
  	 </style>
  </head>
      
  <body>
       <div class="red">龚俊</div>
       <div class="red font12">朱一龙</div>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

  • 类命名注意点：类名如果太长，则可以使用短横线来分割；不要使用纯数字、中文命名

• id选择器

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
       <style> 
          /*只能调用一次，即只能被一个标签调用*/
  		#red {
      			 color: red;
   		} 
  	 </style>
  </head>
      
  <body>
       <div id="red">龚俊</div>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

• 通配符选择器

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
       <style> 
  		 /*不需要调用，自动就给所有元素使用样式*/
           * {
              margin: 0;
              padding: 0;
   		 } 
  	 </style>
  </head>
      
  <body>
       <div>龚俊</div>
       <div>朱一龙</div>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

3）CSS文字属性

• 字体属性

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
      <style> 
           /*给整个body指定字体大小*/
           body {
               font-size: 16px;
           }
          /*标题标签需要单独指定文字大小*/
           h2 {
               font-size: 16px;
           }
          /*a标签在浏览器中具有默认样式，实际工作中需要给链接单独指定样式，body的样式不会影响它*/
           a {
               font-size: 16px;
           }
          /*字体，更多用法建议查阅文档*/
           p {
               font-family: 'Microsoft YaHei', 'Times New Roman', Arial;
           } 
           /*使加粗变正常，更多用法建议查阅文档*/
           strong {
               font-weight: 400;
           }
           /*使倾斜变正常，更多用法建议查阅文档*/
           em {
               font-style: normal;
           }
          /*字体符合属性,不能颠倒顺序*/
          /*font: font-style font-weight font-size/line-height font-family;*/
          /*不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性 */
           div {
               font: intalic 700 16px/20px 'Microsoft YaHei';
           }
      </style>
  </head>
      
  <body>
      <h2>美人们</h2>
      <p>蔡徐坤</p>
      <strong>龚俊</strong>
      <em>朱一龙</em>
      <div>三生三世十里桃花</div>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47

• 文本属性

  <!DOCTYPE html>
  <html lang="en">
      
  <head>
      <style> 
           /*文本颜色*/
           div {
               /*color: deeppink;
               color: #cc00ff; */
               color: rgb(255,0,255);
           }
          /*文本水平对齐（如果给一个盒子添加text-align: center;那么它里面的行内元素和行内块元素都会水平居中对齐）*/
           h2 {
               text-align: center;
           }
          /*图片水平对齐*/
           .pic {
               text-align: center;
           }
          /*下划线、上划线、删除线等*/
           a {
               text-decoration: none;
           } 
           /*文本首行缩进，可以取正值、负值像素，可以用em元素单位*/
           p {
               text-indent: 2em;
           }
           /*行间距，即行高，包含文本高度；可以通过文字行高设置垂直居中效果；
          测量行高推荐小工具FastStone Capture*/
           p {
               line-height: 25px;
           }
          /* 去掉li前面的项目符号 */
          ul li {
              list-style: none;
          }
      </style>
  </head>
      
  <body>
      <h2>美人们</h2>
      <div>龚俊</div>
      <a href="#">粉红色的回忆</a>
      <p>朱一龙</p>
      <p class="pic">
          <img src="../img/图像.gif"/>
      </p>
      <ul>
          <li>lll</li>
      </ul>
  </body>
      
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53

4）CSS复合选择器

• 后代选择器（包含选择器）

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <style>
          /*后代选择器*/
          ul li {
              color: pink;
          }
  
          ul li a {
              color: pink;
          }
  
          .nav li a {
              color: pink;
          }
      </style>
  </head>
  
  <body>
      <ul>
          <li>lll</li>
          <li><a href="#">aaa</a></li>
      </ul>
      <ul class="nav">
          <li>lll</li>
          <li><a href="#">aaa</a></li>
      </ul>
  </body>
  
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32

• 子元素选择器（子选择器）

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <style>
          /*选择某元素的最近一级所有的子元素*/
          div>a {
              color: pink;
          }
      </style>
  </head>
  
  <body>
      <div class="nav">
          <a href="#">aaa</a>
          <p>
              <a href="#">aaa</a>
          </p>
      </div>
  </body>
  
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 并集选择器

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <style>
          /*并集选择器*/
          div,
          p span {
              color: pink;
          }
      </style>
  </head>
  
  <body>
      <div class="nav">ddd</div>
      <p>
          <a href="#">aaa</a>
          <span>sss</span>
      </p>
  </body>
  
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 伪类选择器（如链接伪类、结构伪类等）

  • 链接伪类选择器（为了确保生效，请按照link、visited、hover、active的顺序声明，开发中一般只用到其中几个）

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            /*选择所有未被访问的链接*/
            a:link {
                color: blue;
            }
    
            /*选择所有已被访问的链接*/
            a:visited {
                color: black;
            }
    
            /* 选择鼠标指针位于其上的链接 */
            a:hover {
                color: pink;
            }
    
            /* 选择活动链接（鼠标按下未弹起的链接） */
            a:active {
                color: yellow;
            }
            
             /* 当鼠标经过div时，让它孩子a标签变颜色 */
            div:hover a{
                color: yellow;
            }
            
            /* 链接伪类选择器实际工作开发中的写法 */
            a {
                color: black;
                text-decoration: none;
            }
            a:hover {
                color: blue;
                text-decoration: underline;
            }
        </style>
    </head>
    
    <body>
        <a href="#">aaa</a>
        <a href="#">aaa</a>
        <div><a href="#">aaa</a></div>
    </body>
    
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49

  • focus伪类选择器（一般情况下焦点在<input>类表单元素才能获取，因此这个选择器主要用于选取获得焦点的表单元素）

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            /* 选择获得焦点的表单元素 */
            input:focus {
                background-color: yellow;
                color: red;
            }
        </style>
    </head>
    
    <body>
        <form action="post">
            <input type="text">
            <input type="text">
        </form>
    </body>
    
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

5）CSS元素显示模式

• 块元素：如div、h1-h6、p、ul、ol、li标签等

  • 自己独占一行

  • 可以设置高度、宽度、外边距及内边距等（宽度默认是容器的100%，或者父元素宽度的100%）

  • 每个块元素都是一个容器及盒子，里面可以放所有类型元素

  • 文字类元素（如h1-h6、p）里不能使用块级元素

• 行内元素：又称内联元素，如a、strong、b、em、i、del、s、ins、u、span标签等

  • 一行可以显示多个
  • 不可以直接设置高、宽等（默认宽度就是她本身内容的宽度）
  • 只能容纳文本或其他行内元素
  • a标签里不能再放a标签
  • 特殊情况a标签里可以放块元素，但是给a标签转换一下块级模式最安全

• 行内块元素：既有块级元素的特点，又有行内元素的特点，如img、input、td标签

  • 一行可以显示多个，与其相邻的行内元素或行内块元素之间有空白缝隙
  • 可以设置高度、行高、外边距及内边距等，可以是像素值，也可以是百分比，百分比是相对于父元素来说的（默认宽度就是他本身内容的宽度）

• 元素显示模式转换：使一个模式的元素拥有另外一种模式的特性

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <style>
          a {
              /* 转换为块元素 */
              display: block;
              width: 150px;
              height: 50px;
              background-color: pink;
          }
  
          div {
              /* 转换为行内元素 */
              display: inline;
              background-color: pink;
          }
  
          span {
              /* 转换为行内块元素 */
              display: inline-block;
              width: 150px;
              height: 50px;
              background-color: pink;
          }
      </style>
  </head>
  
  <body>
      <a href="#">aaa</a>
      <div>ddd</div>
      <span>sss</span>
  </body>
  
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36

6）CSS背景属性

<!DOCTYPE html>
<html lang="en">

<head>
      <style>
        span {
            /* 设置背景颜色，默认是transparent透明，也可以手动设置为transparent */
            background-color: pink;
            /* 设置背景颜色及半透明效果，前三个参数对应rgb，
            最后一个参数alpha为透明度，取值0-1之间，小数点前0可以省略：
            background: rgba(0, 0, 0, .6); */

            /* 设置背景图片，默认是none，也可以手动设置为none */
            background-image: url(龚俊.jpg);
            /* 设置背景图片不平铺，默认repeat平铺，也可以手动设置为repeat
            横向平铺为repeat-x，纵向平铺为repeat-y */
            background-repeat: no-repeat;
            /* 设置背景图片位置, 
            1、如果使用精确单位，第一个为x，第二个为y
            （如果只规定x，则y默认居中，没法只规定y）
            2、如果使用top/bottom/center/left/right等方位名词，则两个值前后顺序无所谓
            （如果只指定一个方位名词，另一个默认居中）
            3、如果精确单位和方位名词混合使用，第一个为x，第二个为y */
            background-position: center 40px;
        }

        body {
            color: #fff;
            font-size: 20px;

            background-image: url(bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            /* 把背景图片固定住，scroll背景图像随对象内容滚动，fixed背景图像固定 */
            background-attachment: fixed;

            /* 背景复合写法：没有特定书写顺序，一般习惯约定顺序为：
            background: pink url(image.jpg) no-repeat fixed top center;  */
        }

        a {
            display: inline-block;
            width: 120px;
            height: 58px;

            color: white;
            text-align: center;
            line-height: 50px;
            text-decoration: none;

            background: url(bg1.jpg) no-repeat;
        }

        a:hover {
            /* 设置鼠标经过变换背景图片 */
            background-image: url(bg2.jpg);
        }
    </style>
</head>

<body>
    <span>sss</span>
    <p>ppp</p>
    <a href="#">aaa</a>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

7）CSS三大特性

• 层叠性（选择器相同、属性名相同、属性值不同）
  • 样式冲突遵循就近原则，哪个样式离结构近，就执行哪个样式
  • 样式不冲突不会层叠
• 继承性
  • 子标签会继承父标签的某些样式，如文本颜色、字母；当然会多级继承
  • 行高的继承：如果父元素行高是px为单位，子元素继承绝对值；如果父元素行高没有单位，意思是倍数关系，则子元素继承倍数关系，即相对值
• 优先级（选择器不同、属性名相同、属性值不同）
  • 根据选择器优先级不同来执行，判断时从权重左边开始逐位判断
  • 选择器优先级及权重：!important（无穷大） > 行内样式（1,0,0,0） > id选择器（0,1,0,0） > 类选择器、伪类选择器（0,0,1,0） > 标签名选择器（0,0,0,1） > 继承或*（0,0,0,0）
  • 使用!important提升权值：如color: pink!important;
  • a标签浏览器默认指定了一个样式（蓝色+下划线），所以在body标签设置文字样式对a标签没有效果
  • 如果是复合选择器，则会有权重叠加的问题，如ul li {…}选择器的权重是（0,0,0,1+0,0,0,1=0,0,0,2）；a:hover {…}选择器的权重是（0,0,0,1+0,0,1,0=0,0,1,1）

8）CSS属性书写顺序

• 布局定位属性：display/position/float/clear/visiblity/overflow
• 自身属性：width/height/margin/padding/border/background
• 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
• 其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background: linear-gradient…

（三）页面布局

• 网页布局过程

  • 准备好相关网页元素，网页元素基本都是盒子Box
  • 利用CSS设置好盒子样式，然后摆放到相应位置（网页布局的核心本质）
  • 往盒子里装内容

• 网页布局准则

  • 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
  • 网页布局第二准则：先设置盒子大小，再设置盒子位置

• 网页布局策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

• 网页布局思路

  • 选确定页面的版心（可视区），测量可得知
  • 分析页面中的行模块，以及每个行模块中的列模块
  • 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列位置
  • 制作HTML页面，要遵循先有结构后有样式的原则

• 网页布局注意点

  • 实际开发中，一般不直接用a标签而是用li包含a标签使用

1）标准流

（最基本的布局方式，又称普通流/文档流）

• 盒子模型

  • content内容：文字、图片或其他的盒子

    • border边框（会加大盒子大小）

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <style>
              .div1 {
                  width: 300px;
                  height: 200px;
                  /* border语法
                  border-style属性值有solid实线、dashed虚线、dotted点线等，
                  更多样式见API文档 */
                  border-width: 5px;
                  border-style: solid;
                  border-color: pink;
                  /* border复合语法：
                  border: border-width border-style border-color;（没有顺序） */
      
                  /* 上下左右border分开设定 */
                  border-top: 1px solid #000;
                  border-left: 1px solid #000;
                  /* 层叠性：后写的边框样式会把先写的覆盖掉 */
              }
      
              /* 设置表格大小 */
              table {
                  width: 500px;
                  height: 250px;
              }
      
              /* 设置表头单元格的高 */
              th {
                  height: 35px;
              }
      
              /* 设置表格border */
              table,
              th,
              td {
                  border: 1px solid pink;
                  /* 合并相邻边框 */
                  border-collapse: collapse;
              }
          </style>
      </head>
      
      <body>
          <div class="div1">ddd</div>
          <table>
              <tr>
                  <th>hhh</th>
              </tr>
              <tr>
                  <td>ddd</td>
              </tr>
          </table>
      </body>
      
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58

    • padding内边距

      （如果盒子本身显式地设置了width/height属性，则padding会撑大盒子大小）

      （如果盒子本身没有显式地设置width/height属性，则padding不会撑开盒子大小）

      （盒子里的内容默认与盒子一样大，即儿子默认和父亲一样大）

      （如果儿子没有显式地设置width/height属性，则其padding不会撑开其大小，还是和父亲一样大）

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <style>
              div {
                  width: 300px;
                  height: 200px;
                  /* padding语法 */
                  padding-left: 5px;
                  padding-right: 5px;
                  padding-top: 5px;
                  padding-bottom: 5px;
                  /* padding复合语法：1个值代表上下左右内边距 */
                  padding: 5px;
                  /* padding复合语法：2个值代表上下内边距、左右内边距 */
                  padding: 5px 10px;
                  /* padding复合语法：3个值代表上内边距、左右内边距、下内边距 */
                  padding: 5px 10px 20px;
                  /* padding复合语法：4个值代表上右下左顺时针内边距值 */
                  padding: 5px 10px 20px 30px;
              }
          </style>
      </head>
      
      <body>
          <div>ddd</div>
      </body>
      
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30

    • margin外边距

      （相邻块元素的垂直外边距会出现合并的现象，所以尽量只给一个盒子添加margin值）

      （嵌套块元素的垂直外边距会出现塌陷的现象，即父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距，而子元素与父元素之间还是紧挨着）

      （塌陷现象的解决方案有：为父元素定义上边框，多宽都行；为父元素定义上内边距，多宽都行；为父元素添加overflow:hidden; ）

      （浮动、固定、绝对定位的盒子不会有塌陷问题）

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <style>
              div {
                  width: 300px;
                  height: 200px;
                  /* margin语法 */
                  margin-left: 5px;
                  margin-right: 5px;
                  margin-top: 5px;
                  margin-bottom: 5px;
                  /* margin复合语法：1个值代表上下左右外边距 */
                  margin: 5px;
                  /* padding复合语法：2个值代表上下外边距、左右外边距 */
                  margin: 5px 10px;
                  /* padding复合语法：3个值代表上外边距、左右外边距、下外边距 */
                  margin: 5px 10px 20px;
                  /* padding复合语法：4个值代表上右下左顺时针外边距值 */
                  margin: 5px 10px 20px 30px;
              }
              
              .d {
                  /* 设置块级盒子水平居中：盒子必须指定宽度，盒子左右外边距设置为auto，
                  如margin: auto; 
                  如margin-left: auto; margin-right: auto; */
                  margin: 100px auto;
                  /* 行内元素或行内块元素水平居中对齐只需给其父元素设置text-align: center; */
              }
          </style>
      </head>
      
      <body>
          <div>ddd</div>
          <div class=".d">ddd</div>
      </body>
      
      </html>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39

  • 清除内外边距

    （行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，设置了也没用，但是转换为块级元素和行内块元素就可以了）

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            /* 清除内外边距通常作为css的第一行代码 */
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    
    <body>
        123
        <ul>
            <li>abc</li>
        </ul>
    </body>
    
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

  • 圆角边框（CSS3）

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            .yuanxing {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* 给正方形设置圆角边框：border-radius: 100px; */
                border-radius: 50%;
            }
    
            .jvxing {
                width: 300px;
                height: 100px;
                background-color: pink;
                /* 给矩形设置圆角边框 */
                border-radius: 50px;
            }
    
            .radius {
                width: 200px;
                height: 200px;
                background-color: pink;
                /* 四个角分别设置不同的圆角弧度值：左上角 右上角 右下角 左下角 */
                border-radius: 5px 10px 15px 20px;
                /* 两个值：左上角和右下角一个值，右上角和左下角一个值
                border-radius: 5px 10px; */
                /* 分开写：
                 border-top-left-radius: 5px;
                 border-bottom-right-radius: 20px; */
            }
        </style>
    </head>
    
    <body>
        <div class="yuanxing"></div>
        <div class="jvxing"></div>
        <div class="radius"></div>
    </body>
    
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43

  • 盒子阴影（CSS3）

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
                margin: 100px auto;
                /* 设置盒子阴影：box-shadow: h-shadow v-shadow blur spread color inset;
                 六个参数含义：水平阴影位置(必需，可以负值) 垂直阴影位置(必需，可以负值) 
                 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) 
                 将外部阴影改成内部阴影(可选，默认outset，但是不可以写outset) */
                box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
                /* 盒子阴影不占空间，不会影响其他盒子排列 */
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25

  • 文字阴影（CSS3）

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <style>
            div {
                font-size: 50px;
                color: orangered;
                font-weight: 700;
                /* 给文字添加阴影：text-shadow: h-shadow v-shadow blur color;
                 四个参数含义：水平阴影位置(必需，可以负值) 垂直阴影位置(必需，可以负值)
                 模糊距离(可选) 阴影颜色(可选) */
                text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
            }
        </style>
    </head>
    
    <body>
        <div>龚俊</div>
    </body>
    
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

2）浮动

• float属性

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <style>
          .left .right {
              /* float属性用于创建浮动框，将其移动到一边，
              直到左边缘或右边缘触及包含块或另一个浮动框的边缘；
              属性值有left、right、none（默认值） */
              float: left;
              width: 200px;
              height: 200px;
              background-color: pink;
          }
  
          .right {
              float: right;
          }
      </style>
  </head>
  
  <body>
      <div class="left"></div>
      <div class="right"></div>
  </body>
  
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27

• 浮动的特性

  • 脱标：脱离标准流的控制，原来的位置不保留，相当于在半空中，其下边可以放下一个标准流盒子，实现叠加的效果
  • 浮动只会影响后面的标准流，不会影响前面的标准流：如果一个标准流父盒子里有三个子盒子，第一个盒子是标准流，第二个盒子浮动，第三个盒子是标准流，则第二个盒子不会占第一个盒子的位置，即不会飘到第一个盒子的上方，压住第一个盒子，但是第三个盒子会占第二个盒子的位置，在第二个盒子的下方，被第二个盒子压住
  • 浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里的文字或图片，因为浮动产生的目的最初是为了做文字环绕效果的
  • 浮动元素一行内显示，并且元素顶部对齐，如果浮动元素太多父盒子装不下（盒子的右边距也算），多出的元素会另起一行排列，且随窗口大小动态调整位置；浮动元素的下边距不会撑开父盒子
  • 具有行内块元素的特性：行内元素和块级元素添加浮动都会具有行内块元素相似的特性；如果行内元素有了浮动，则不需要转换块级/行内块元素就可以直接给高度和宽度了；如果块级元素有了浮动，则不需要转换为行内块元素就自动将宽度设置为本身内容的宽度了
  • 标准流的盒子间默认会有一定的空白缝隙，如行内块元素之间，具体多少不一定，浮动的盒子之间没有缝隙，紧挨在一起

• 清除浮动

  （由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下面的标准流盒子，对后面的元素排版产生影响）

  • 额外标签法：在浮动元素末尾添加一个空的块级元素标签，给这个标签添加CSS代码：clear: left; 或clear: right; 或 clear: both（常用）; 但是这种方法会导致添加许多无意义的标签，结构性较差

  • 父级元素添加overflow属性：将其属性值设置为诶hidden、auto或scroll；但是这种方法无法显示子元素溢出部分

  • 父级元素添加after伪元素：额外标签法的升级版，没有增加标签，结构更简单

    .clearfix:after {
    	content: "";
    	display: block; /* 插入的元素必须是块级 */
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    .clearfix { /* IE6、7专有 */
    	*zoom: 1;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  • 父级元素添加双伪元素：代码更简洁

    .clearfix:before, .clearfix:after {
    	content: "";
    	display: table; /* 前面后面都插入元素 */
    }
    .clearfix:after {
    	clear: both;
    }
    .clearfix { /* IE6、7专有 */
    	*zoom: 1;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

• 常见图片格式

  • jpg：对色彩信息保留较好，高清，颜色较多，产品类图片经常用jpg格式
  • gif：最多只能存储256色，通常用来显示简单图形及字体，但可以保存透明背景和动画效果，经常用于一些图片小动画效果
  • png：一种新兴的网络图形格式，结合了jpg和gif的优点，存储形式丰富，能够保持透明的背景，插件切图时想要切成背景透明的图片时使用png格式
  • psd：photoshop的专用格式，里面可以放图层、通道、遮罩等多种设计稿，可以直接从图上复制文字，还可以测量大小和距离，不能直接放到页面里

• PS切图方式：

  • 图层切图：选中图层 -> 右键 -> 快速导出为PNG（合并图层快捷键：Ctrl+E）
  • 切片切图：利用切片工具手动划出 -> 文件菜单 -> 导出 -> 存储为web设备所用格式 -> 选择我们要的图片格式 -> 存储
  • PS插件切图：Cutterman插件能自动将需要的图层进行输出，替代传统手工切图的繁琐流程，支持单图层、多图层、切片方式（PS版本必须是完整版，不能是绿色版）（Cutterman下载安装、官网账号注册、使用教程）

3）定位

（定位可以让盒子自由的在某个盒子内移动位置，或固定在屏幕中某个位置，并且可以压住其他盒子）

（定位=定位模式+边偏移，定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置）

• 定位模式：通过CSS的position属性来设置

  • 静态定位：static，默认定位方式，无定位的意思，按照标准流的方式摆放位置，没有边偏移

  • 相对定位：relative，移动位置时参照点是自己原来的位置，不脱标，继续保留原来位置，不会影响后面的元素布局，最典型的应用是给绝对定位当爹

  • 绝对定位：absolute

    • 如果没有祖先元素或祖先元素没有定位，则以浏览器即Document文档为准定位

    • 如果祖先元素有定位，无论是相对、绝对、固定定位，都以最近一级的有定位的祖先元素为参考点移动位置

    • 脱标，不再占有原先位置

    • 元素绝对定位水平居中小技巧：加了绝对定位的盒子不能通过margin: 0 auto设置水平居中，但可以通过设置盒子左侧绝对定位left: 50%走到父级元素水平中心位置，再设置盒子margin-left: -自身宽度一半的距离

    • 与浮动类似，行内元素添加绝对定位，可以直接设置高度和宽度；块级元素添加绝对定位，如果不给宽度或高度，默认大小是内容的大小；绝对定位的元素不会触发外边距合并的问题

    • 与浮动不同，绝对定位的元素会压住下面标准流盒子的所有内容，包括图片和文字

  • 固定定位：fixed

    • 以浏览器可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动

    • 脱标，不占有原先位置

    • 元素固定定位在版心右侧的小技巧：让固定定位的盒子left: 50%走到浏览器可视区一半的位置，再设置盒子margin-left: 版心宽度一半的距离

    • 与浮动类似，行内元素添加固定定位，可以直接设置高度和宽度；块级元素添加固定定位，如果不给宽度或高度，默认大小是内容的大小；固定定位的元素不会触发外边距合并的问题

    • 与浮动不同，固定定位的元素会压住下面标准流盒子的所有内容，包括图片和文字

  • 粘性定位：sticky，以浏览器的可视窗口为参照点移动元素；必须添加top、left、right、bottom其中一个才有效，意思是当距离可视化窗口某个边多少像素时开始有粘性定位的效果，否则就把它当相对定位来看；不脱标，占有原先位置；跟页面滚动搭配使用，兼容性较差，IE不支持

• 边偏移：有四个属性，属性值单位px，或者相对于父元素宽高的百分比

  （如果一个盒子既有left属性，也有right属性，则默认会执行left属性，同理会默认优先执行top属性，而不是bottom属性）

  • 顶端偏移量：top，定义元素相对于其父元素上边线的距离
  • 底端偏移量：bottom，定义元素相对于其父元素下边线的距离
  • 左侧偏移量：left，定义元素相对于其父元素左边线的距离
  • 右侧偏移量：right，定义元素相对于其父元素右边线的距离

• 定位叠放次序：z-index属性控制，只有定位的盒子才有z-index属性，无论是哪种定位方式；属性值可以是正整数、负整数或0，数字后面不能加单位，默认是auto；数值越大盒子越靠上，如果属性值相同，则按照书写顺序后来者居上

• 子绝父相：子级绝对定位不会占有位置，可以放在父盒子里的任何一个地方，不会影响其他兄弟盒子；父盒子需要加定位限制子盒子在父盒子里显示，又需要占有位置，因此父亲只能是相对定位；当然子绝父相不是永远不变的，如果父亲不需要占有位置，子绝父绝也会遇到

• 元素显示与隐藏

  • display属性：隐藏元素后不再占有原来位置
    • 隐藏对象：display: none;
    • 显示对象：display: block; （当然还有转换为块元素的功能）
  • visibility属性：隐藏元素后继续占有原来的位置
    • 元素可视：visibility: visible;
    • 元素隐藏：visibility: hidden;
  • overflow属性：对溢出的部分进行显示或隐藏
    • 溢出部分可见：overflow: visible;
    • 溢不溢出都显示滚动条： overflow: scroll;
    • 溢出时对应方向添加滚动条：overflow: auto;
    • 溢出部分隐藏：overflow: hidden;（有定位的盒子慎用，因为会隐藏超出的部分）

（四）CSS高级

1）精灵图

（又称aprites精灵图或雪碧图）

• 核心原理：将网页中一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

• 精灵图的使用

  • 主要针对小背景图片使用，就是把多个小背景图片整合到一张大图片中

  • 需要精确测量每个小背景图片的大小和位置，大小决定盒子的大小，位置决定背景图片移动距离

  • 移动背景图片位置使用background-position，即这个目标图片的x、y坐标，一般都是负值

    .box2 {
    	width: 27px;
    	height: 25px;
    	margin: 200px;
    	background: 		
    	url(images/sprites.png) no-repeat -155px -106px;
    }
    1
    2
    3
    4
    5
    6
    7

• 精灵图优缺点

  • 优点：有效减少服务器接收和发送请求的次数，提高页面加载速度
  • 缺点：图片文件较大、图片本身放大和缩小会失真、一旦图片制作完成想要更换非常复杂

2）字体图标

（iconfont）

• 字体图标产生目的：主要针对精灵图中一些结构和样式复杂一点的小图片，为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

• 字体图标的优点

  • 轻量级：一个图标字体要比一系列图像小，一旦字体加载了，图标会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以随意改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器

• 字体图标的使用

  • 字体图标的下载

    • icomoon字库：http://icomoon.io
    • 阿里iconfont字库：http://www.iconfont.cn

  • 下载包fonts文件夹中字体文件样式

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5Tdv7KVZ-1654060785228)(https://gitee.com/imagesss/warehouse1/raw/master/20220410115744.png)]

  • 字体图标引入到html页面

    • 把下载包里面的fonts文件夹放到需要使用字体图标的html页面根目录下

    • 在CSS样式中全局声明字体（从下载包里的style.css中直接复制粘贴就行，一定要注意字体文件路径的问题）

      @font-face {
      		font-family: 'icomoon';
      		src:  url('fonts/icomoon.eot?p4ssmb');
      		src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-	   opentype'),
      	    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
          	url('fonts/icomoon.woff?p4ssmb') format('woff'),
          	url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
      		font-weight: normal;
      		font-style: normal;
      		font-display: block;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11

    • html标签内添加小图标：打开下载包里的demo.html文件，复制相应图标，放在标签（如span标签）内

      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c6EY6FaD-1654060785231)(https://gitee.com/imagesss/warehouse1/raw/master/20220410115728.png)]

      <span></span>
      1

    • 给标签定义字体，务必保证与CSS中声明的@font-face里面字体保持一致

      	span {
      		 font-family: "icomoon";
      	}
      1
      2
      3

• 通过类名调用字体图标

  • HTML页面引入字体图标中css文件：<link rel=“stylesheet” href=“fonts/style.css”>
  • 标签直接调用图标对应的类名即可：<span class=“icon-angellist”></span>
  • 可以改变字体图标颜色等：.icon-angellist { color: #68d8fe; }

• 字体图标的追加：上传压缩包里的selection.json至字库网站，然后选中自己相要的新的图标，重新下载压缩包，并替换原来的文件就可以了

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZJ9p9WBN-1654060785233)(https://gitee.com/imagesss/warehouse1/raw/master/20220410122414.png)]

3）CSS三角

	div {
	 width: 0;
	 height: 0;
	/* 为了照顾兼容性 */
	 line-height: 0;
	 font-size: 0;
	 border: 50px solid transparent;
	 border-left-color: pink;
	}
1
2
3
4
5
6
7
8
9

4）CSS用户界面样式

• 更改用户鼠标样式

  li {cursor: pointer;}
  1

  • default：小白，默认
  • pointer：小手
  • move：移动
  • text：文本
  • not-allowed：禁止

• 清除表单轮廓

  input {outline: none;}
  1

• 防止表单域拖拽

  textarea {resize: none;}
  1

5）vertical-align属性应用

• vertical-align的属性值有baseline、top、middle、bottom，默认baseline基线对齐
• 使用场景：
  • 用于设置图片或表单和文字垂直对齐，只针对于行内元素和行内块元素有效
    • 如果设置图片和它右边的文字居中对齐，则给图片标签加这个属性，属性值为middle
    • 如果设置文本域与它右边的文字居中对齐，则给文本域标签添加这个属性
    • 如果设置盒子背景和其中的内容居中对齐，则给盒子添加这个属性，如果是块级元素盒子，则要先把它转换为行内元素或行内块元素
  • 图片底侧空白缝隙：设置vertical-align的属性值为top或middle或bottom（提倡）；或者将图片转换为块级元素

6）溢出的文字省略号显示

• 单行文本溢出显示省略号：给装文本的盒子添加如下CSS属性

  /* 先强制一行内显示文本（默认normal自动换行） */
  white-space: nowrap;
  /* 超出的部分隐藏 */
  overflow: hidden;
  /* 文字用省略号替代超出的部分 */
  text-overflow: ellipsis;
  1
  2
  3
  4
  5
  6

• 多行文本溢出显示省略号：给装文本的盒子添加如下CSS属性；但是有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）；其实更推荐让后台人员做这个效果

  /* 超出的部分隐藏 */
  overflow: hidden;
  /* 文字用省略号替代超出的部分 */
  text-overflow: ellipsis;
  /* 弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象子元素的排列方式垂直居中 */
  -webkit-box-orient: vertical;
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

7）常见布局技巧

• margin负值的巧妙运用实现浮动的盒子间边框重合效果

• 在鼠标经过浮动的或标准流的盒子时给盒子添加相对定位并更改边框颜色，实现四条边变色的效果

• 在鼠标经过本来就有相对定位的盒子时给提高盒子的z-index值并更改边框颜色，实现四条边变色的效果

• 巧妙运用浮动元素不会压住文字的特性

• 巧妙运用给盒子设置水平居中对齐，那么它内部的行内块元素和行内元素都会水平居中对齐的特性

• 巧妙运用行内块元素盒子间本身默认有一定间距的特性

• 绘制白色不等腰直角三角形：给div添加如下CSS代码

  width: 0;
  height: 0;
  border-color: transparent white transparent transparent;
  border-style: solid;
  border-width: 22px 8px 0 0;
  1
  2
  3
  4
  5

• CSS初始化：不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容性，每个网页都必须首先进行CSS初始化，即重设浏览器样式（以京东首页为例，可去京东官网查看源代码）

  * {
      /* 清除所有标签内外边距 */
      margin: 0;
      padding: 0
  }
  
  em,
  i {
      /* em和i标签内斜体文字不倾斜 */
      font-style: normal
  }
  
  li {
      /* 去掉li标签的小圆点 */
      list-style: none
  }
  
  img {
      /* 给img设置border: 0;照顾低版本浏览器图片外边包含了链接会有边框的问题 */
      border: 0;
      /* 取消图片底侧的空白缝隙 */
      vertical-align: middle
  }
  
  button {
      /* 设置鼠标经过botton按钮时，鼠标变为小手 */
      cursor: pointer
  }
  
  a {
      /* 设置链接字体颜色 */
      color: #666;
      /* 取消链接文字的下划线 */
      text-decoration: none
  }
  
  a:hover {
      /* 设置鼠标经过链接时的字体颜色 */
      color: #c81623
  }
  
  button,
  input {
      /* 设置按钮和表单标签的字体 */
      font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
  }
  
  body {
      /* CSS3抗锯齿形让文字显示地更加清晰 */
      -webkit-font-smoothing: antialiased;
      /* 设置body背景颜色 */
      background-color: #fff;
      /* 设置body所有字体默认样式 */
      /* 把中文字体名称用相应的Unicode编码代替，有效避免浏览器解释CSS代码时出现乱码问题，
      如黑体\9ED1\4F53、宋体\5B8B\4F53、微软雅黑\5FAE\8F6F\96C5\9ED1 */
      font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
      /* 设置body所有字体默认颜色 */
      color: #666
  }
  
  .hide,
  .none {
      display: none
  }
  
  /* 清除浮动 */
  .clearfix:after {
      visibility: hidden;
      clear: both;
      display: block;
      content: ".";
      height: 0
  }
  
  .clearfix {
      *zoom: 1
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77

（五）HTML5

（HTML5新特性都有兼容性问题，基本上的IE9+以上版本浏览器才支持，适合在移动端使用）

1）语义化标签

（它们都属于块级元素，IE9中需要把这些元素转换为块级元素）

• header：头部标签
• nav：导航栏标签
• artical：内容标签
• section：定义文档某个区域
• aside：侧边栏标签
• footer：尾部标签

2）多媒体标签

• 视频标签

  • 语法

    <video src="文件地址" controls="controls"></video>
    1

  • 支持MP4、WebM、Ogg三种视频格式，尽量使用MP4，几乎所有浏览器都支持，为了兼容性，可以这样设置：

    <video width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            您的浏览器不支持video标签。
        </video>
    1
    2
    3
    4
    5

  • 常用属性

    • src：值为视频路径
    • autoplay：值为autoplay，视频就绪自动播放（谷歌浏览器把视频自动播放禁止了，需要添加muted来解决自动播放的问题）
    • controls：值为controls，向用户显示播放控件
    • width、height：单位像素，设置播放器宽度和高度
    • loop：值为loop，循环播放
    • preload：值为auto预先加载视频，值为none不应加载视频（如果有了autoplay则忽略该属性）
    • poster：值为图片路径，加载等待的画面图片
    • muted：值为muted，静音播放

• 音频标签

  • 语法

  • 支持MP3、Wav、Ogg三种音频格式，尽量使用MP3，几乎所有浏览器都支持，为了兼容性，可以这样设置：

    <audio controls>
            <source src="horse.ogg" type="audio/ogg">    
            <source src="horse.mp3" type="audio/mp3">
            您的浏览器不支持audio元素。
    </audio>
    1
    2
    3
    4
    5

  • 常用属性

    • src：值为音频路径
    • autoplay：值为autoplay，音频就绪后马上播放（谷歌浏览器把音频自动播放禁止了，需要通过JavaScript解决）
    • controls：值为controls，向用户显示播放控件
    • loop：值为loop，循环播放

3）表单标签

（在验证时必须添加form表单域，并添加提交按钮，当我们点击提交按钮时就能验证表单了）

• type=“email”：限制用户输入必须为Email类型
• type=“url”：限制用户输入必须为URL类型
• type=“date”：限制用户输入必须为日期类型
• type=“time”：限制用户输入必须为时间类型
• type=“month”：限制用户输入必须为月类型
• type=“week”：限制用户输入必须为周类型
• type=“number”：限制用户输入必须为数字类型
• type=“tel”：手机号码
• type=“search”：搜索框
• type=“color”：生成一个颜色选择表单

4）表单属性

• required：值为required，表单内容不能为空
• placeholder：值为提示文本，表单的提示信息，如果存在默认值则不显示；可以通过input::placeholder {color: pink;}来修改placeholder里面的颜色
• autofocus：值为autofocus，页面加载完成后自动聚焦到指定表单
• autocomplete：值为off或on（默认），当用户在字段开始键入时浏览器基于之前键入过的值，显示出在字段中填写的选项；需要放在表单内，同时加上name属性，同时成功提交
• multiple：值为multile，可以多选文件提交

（六）CSS3

（新增CSS3特性有兼容性问题，ie9+才支持，移动端更适合）

1）新增选择器

（属性选择器、结构伪类选择器与类选择器、伪类选择器优先级权重相同，均为(0,0,1,0)）

• 属性选择器

  • E[att]：选择具有att属性的E元素，权重为(0,0,0,1)+(0,0,1,0)=(0,0,1,1)
  • E[att=“val”]：选择具有att属性且属性值等于val的E元素，”“可以没有
  • E[att^=“val”]：匹配具有att属性且值以val开头的E元素，”“可以没有
  • E[att$=“val”]：匹配具有att属性且值以val结尾的E元素，”“可以没有
  • E[att*=“val”]：匹配具有att属性且值中含有val的E元素，”“可以没有

• 结构伪类选择器

  • E:first-child：匹配父元素中的第一个子元素，此子元素必须是E标签，否则无效

  • E:last-child：匹配父元素中的最后一个子元素，此子元素必须是E标签，否则无效

  • E:nth-child(n)：匹配父元素中的第n个子元素，此子元素必须是E标签，否则无效

    • n可以是数字，就是选择第n个元素，数字从1开始
    • n可以是关键字，even偶数，odd奇数
    • n可以是公式，n的值从0算起，但是第0个元素或超出了元素的个数会被忽略；如2n是选第偶数个；2n+1是第奇数个；5n是第5的倍数个；n+5是从第5个开始，包含第5个；-n+5是前5个，包含第5个

  • E:first-of-type：匹配父元素中第一个E元素

  • E:last-of-type：匹配父元素中的最后一个E元素

  • E:nth-of-type(n)：匹配父元素中的第n个E元素

    <head>
    	<style>
    		section div:nth-of-type(1){
    			background-color: blue;
    		}
    	</style>
    </head>
    <body>
        <section>
            <p>光头强</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
    </body>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

• 伪元素选择器

  （创建的伪元素在文档树中找不到，属于行内元素，必须有content属性）

  （伪元素选择器和标签选择器的权重一样，都为(0,0,0,1)）

  • E::before：在E元素内部的前面插入内容，权重为(0,0,0,1)+(0,0,0,1)=(0,0,0,2)

  • E::after：在E元素内部的后面插入内容

  • 使用场景

    • 伪元素字体图标

      div::after {
      	position: absolute;
      	top: 10px;
      	right: 10px;
      	content: '\e91e';
      	color: red;
      	font-size: 18px;
      }
      1
      2
      3
      4
      5
      6
      7
      8

    • 伪元素清除浮动

      .clearfix:after {
      	content: "";
      	display: block; /* 插入的元素必须是块级 */
      	height: 0;
      	clear: both;
      	visibility: hidden;
      }
      .clearfix { /* IE6、7专有 */
      	*zoom: 1;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

      .clearfix:before, .clearfix:after {
      	content: "";
      	display: table; /* 前面后面都插入元素 */
      }
      .clearfix:after {
      	clear: both;
      }
      .clearfix { /* IE6、7专有 */
      	*zoom: 1;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

    • 伪元素仿土豆效果

      .tudou::before {
      	content: '';
      	display: none;
      	position: absolute;
      	top: 0;
      	left: 0;
      	width: 100%;
      	height: 100%;
      	background: rgba(0,0,0,.4) url(images/arr.png) no-repeat center;
      }
      .tudou:hover::before {
      	display: block;
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13

2）盒子模型

• box-sizing属性指定盒子模型
  • 属性值为content-box：盒子大小为width+padding+border（默认）
  • 属性值为border-box：盒子大小为width，padding和border不会撑大盒子（前提是padding和border不会超过width宽度）

3）transition过渡

• 使元素从一种样式变换到另一种样式时为元素添加渐变动画效果，谁做过渡给谁加

（虽然ie9以下版本浏览器不支持，但不会影响页面布局）

（经常和:hover一起搭配使用）

• transition属性的语法：transition: 要过渡的属性 花费时间 运动曲线 何时开始；
  • 要过渡的属性：想要变化的css属性，宽度、高度、背景颜色、内外边距都可以，如果想要所有属性都变化过渡，写一个all就可以
  • 花费时间：单位是秒，必须写单位
  • 运动曲线：属性值有linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速后减速，默认是ease，可以省略
  • 何时开始：用来设置延迟触发时间，单位是秒，必须写单位，默认是0s，可以省略

div {
	width: 200px;
	height: 100px;
	background-color: pink;
	transition: width .5s ease 0s, height .5s ease 1s; 
}
div:hover {
	width: 400px;
	height: 200px;
}
1
2
3
4
5
6
7
8
9
10

4）CSS3 2D转换

• translate（移动）：不会影响到其他元素的位置，参数可以是像素，可以是百分比(相对于自身元素，常用于盒子中的盒子居中对齐)，对行内标签没有效果

  • transform:translate(x,y);
  • transform:translateX(n);
  • transform:translateY(n);

• rotate（旋转）：单位deg，必须写，角度为正顺时针，角度为负逆时针，默认旋转中心点是元素中心点（可以用于做三角，代替字体图标）

  • transform:rotate(度数);

• transform-origin（设置转换中心点）：x y默认转换中心点是(50%,50%)，x和y的取值可以是百分比，像素或方位名词（top bottom left right center）

  • transform-origin:x y;

• scale（缩放）：x和y如果是整数，意思是放大多少倍，小数意思是缩小，如果只写一个参数，则第二个参数和第一个参数一样；可以设置转换中心点缩放，默认以盒子中心点缩放，不影响其他盒子；scale会让阴影变大

  • transform:scale(x,y);

• 2D转换综合写法

  • 同时使用多个转换的格式为：transform:translate() rotate() scale() …等
  • 其顺序会影响转换效果，旋转会改变坐标轴方向，通常把位移放在最前面，即先位移再旋转，当然有时也先旋转再位移

5）CSS3 动画

（相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果）

• keyframes（定义动画）：用from和to等同于0%和100%，百分比是总时间的划分

  @keyframes 动画名称 {
  	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);
  		margin-left: 100px;
  	}
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

• animation（调用动画）：谁用谁调用

  • animation: name duration timing-function delay iteration-count direction fill-mode；简写属性，前两个属性一定要写；为元素添加多个动画，用逗号分隔，如animation: bear 1s steps(8) infinite, move 3s forwards;
  • animation-name：动画名称
  • animation-duration：持续时间
  • animation-timing-function：规定动画速度曲线，默认是ease
    • linear：匀速
    • ease：慢快慢
    • ease-in：慢快
    • ease-out：快慢
    • ease-in-out：慢快慢
    • steps()：指定时间函数中的间隔数量（步长），参数意思是整个动画分几步完成
  • animation-delay：规定动画何时开始，默认是0
  • animation-iteration-count：规定动画重复次数，默认1，还有infinite
  • animation-direction：规定动画是否在下一周期逆向播放，默认normal不逆向，还有alternate逆向播放
  • animation-play-state：规定动画 是否正在运行或暂停，默认running，还有paused，简写属性中不包含animation-play-state，animation-play-state经常搭配伪类选择器使用，如鼠标经过时暂停
  • animation-fill-mode：规定动画结束后状态，保持forwards，回到起始状态backwords

6）CSS3 3D转换

• translate3d（3D移动）:

  • transform:translateX()：仅仅在X轴上移动，正方向朝右
  • transform:translateY()：仅仅在Y轴上移动，正方向朝下
  • transform:translateZ()：仅仅在Z轴上移动，正方向朝我们
  • transform:translate3d(x,y,z)：其中x，y，z分别指要移动的轴的方向的距离，不能省略，没有就写0

• perspective（透视）

  • 也可以称为视距，即人眼到屏幕的距离，数值越大，成像越小，单位是像素
  • 透视要写到被观察元素的父盒子上面，父盒子的父盒子等也行，不写透视就没有3D效果
  • 透视不影响父盒子大小，如旋转木马案例给父盒子添加背景图片，就形成一群添加了旋转位移透视的图片围绕着一张中心图片在旋转的效果

• rotate3d（3D旋转）：

  • transform:rotateX(45deg)：沿着x轴正方向旋转45度；方向判断符合左手准则，左手拇指指向x轴的正方向，其余手指弯曲方向就是该元素沿着x轴旋转的正方向
  • transform:rotateY(45deg)：沿着y轴正方向旋转45度；方向判断符合左手准则，同上
  • transform:rotateZ(45deg)：沿着z轴正方向旋转45度；方向判断符合左手准则，同上
  • transform:rotate3d(x，y，z，deg)：沿着自定义轴旋转deg度，如沿对角线旋转；其中x y z表示旋转轴的矢量，标示是否沿该轴旋转，1表示旋转，0表示不旋转，最后一个参数表示旋转的角度

• transform-style（3D呈现）：代码写给父级，影响子盒子，控制子元素是否开启三维立体环境，默认flat子元素不开启3d立体空间，还有preserve-3d开启3d立体空间

7）浏览器私有前缀

（为了兼容老版本）

• -moz-：代表firefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari、chrome私有属性
• -o-：代表Opera私有属性

/* 提倡的写法 */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
1
2
3
4
5

8）其他特性

• filter属性：CSS3滤镜，将模糊或颜色偏移等图形效果应用于元素，如filter: blur(5px); 模糊处理，blur是一个函数，小括号里数值越大越模糊
• calc函数：在声明CSS属性值时执行一些计算，如width: calc(100%-80px); 括号里可以使用±*/来计算
• HTML5 MDN介绍：https://develop.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

（七）HTML和CSS工具

1）Chrome调试工具

• 打开调试工具：打开Chrome浏览器，按下F12键或右击页面空白处 -> 检查 -> Elements -> 左边是html，右边是css
• 使用调试工具：
  • Ctrl+滚轮：放大开发者工具代码大小
  • Ctrl+0：复原浏览器大小
  • 检查元素：点击Element左边的左边选择按钮，再选择网页中元素，则对应的html代码和css样式就出现了，可以检查该元素的结构和样式，还可以修改其结构和样式（改动时用左右上下箭头或直接输入都可以），但是刷新页面后会复原

2）Emmet语法

• VS Code快速生成html结构语法

  • 生成标签：标签名+Tab
  • 生成多个相同标签：标签名*数量+Tab
  • 父子级标签：ul>li+Tab、div>span+Tab
  • 兄弟级标签：div+p+Tab
  • 生成带有类名和id名的标签：标签名.类名+Tab、标签名#id+Tab（div可以省略标签名）
  • 生成多个类名有顺序标签：标签名.类名$*数量+Tab
  • 生成内部有内容的标签：标签名(内容)

• VS Code快速生成CSS样式语法

  • 如text-indent:的简写：ti+Tab
  • 如width:的简写：w+Tab
  • 如height:的简写：h+Tab
  • 如width:200px的简写：w200+Tab
  • 如line-height:26px的简写：lh26+Tab
  • 如text-align:center的简写：tac+Tab
  • 如text-decoration:none的简写：tdn+Tab

• 快速格式化代码：

  • 手动格式化代码：右键 -> 格式化文档 或 Shift+Alt+F

  • 设置保存页面时自动格式化代码：文件 -> 首选项 -> 设置

    • 搜索emmet.include -> setting.json下的用户中添加语句"editor.formatOnType":true 和 “editor.formatOnSave”:true

    • 或搜索editor:format将Editor:Format On Save 和 Editor:Format On Type勾选

3）snipaste截图工具

• F1截图，同时测量大小、设置箭头、书写文字等
• F3在桌面上置顶显示
• 点击图片 -> alt取色（shift切换取色模式）
• esc取消图片显示

（八）品优购项目练习

1）项目规划

• 模块化开发：最典型的应用就是common.css公共样式，包含版心宽度、清除浮动、页面文字颜色等公共样式

• 网站favicon图标：favicon.ico一般用于作为缩略的网站标志，显示在浏览器的地址栏或标签上

  • 把品优购图标切成png图片

  • 把png图片转换为ico图标，需借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

  • 在html页面里面的<head></head>标签里引入代码

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    1

• 网站首页TDK三大标签SEO优化：Search Engine Optimization搜索引擎优化，利用搜索引擎的规则提高网站在有关搜索引擎内自然排名

  • title标签：具有不可替代性，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点，建议：网站名(产品名)-网站介绍（尽量不要超过30个汉字）

    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    1

  • description标签：简要说明网站主要是做什么的

    <meta name="description" content="品优购商城-专业的综合网上购物商城，销售加点、数码通讯、电脑、家具百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    1

  • keyword标签：页面关键词，是搜索引擎的关注点之一

    <meta name="keyword" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东“ />
    1

• 首页LOGO SEO优化

  • logo里面先放一个h1标签，目的是为了提权，高速搜索引擎，这个地方很重要
  • h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可
  • 为了搜索引擎收录我们，我们链接里要放文字（网站名称），但文字不要显示出来
    • 方法1：text-indent移到盒子外面（text-indent:-9999px），然后overflow:hidden（淘宝的做法）
    • 方法2：直接给font-size:0; 这样就看不到文字了（京东的做法）
  • 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

• 首页类名参考

  • 快捷导航栏（shortcut）

  • 头部模块（header）

    • 热点词（hotwords）
    • 登录条（loginbar）
    • 购物车（shopcar）
    • 搜索（search）
    • 标志（logo）

  • 导航模块（nav）

    • 导航左侧（dropdown包含.dd .dt）
    • 导航右侧（navitems）

  • 页面主体（main）

    • 焦点图（focus）

    • 新闻模块（news）

      1. 新闻头部模块（news-hd）

      2. 新闻主题部分（news-bd）

      3. 新闻快报模块（newflash）

    • 生活服务模块（lifeservice）

    • 特价商品（bargain）

  • 今日推荐模块（recom）

    • 推荐头部模块（recom-hd）

    • 推荐主体部分（recom-bd）

  • 楼层区（floor）

    • 楼层区头部（box-hd）

    • Tab栏

    • 楼层区主体（box-bd）

  • 广告（banner）

  • 侧栏（sidebar）

  • 页面底部（footer）

    • 页面底部服务模块（mod_service）
    • 页面底部帮助模块（mod_help）
    • 页面底部版权模块（mod_copyright）

• 注册页类名参考

  • 注册专区（registarea）
  • 注册内容（reg-form）
  • 错误的（error）
  • 成功的（success）
  • 默认的（default）

• 页面外围控制整体布局宽度（wrapper）

• 页面中多个红色字（style_red）

• 选项卡内要求精确的子盒子宽度（col_210）

2）将自己的网站上传到远程服务器

• 一般稳定的服务器都是要收费的，如阿里云
• 推荐一个免费的远程服务器（免费空间）http://free.3v.do/
  • 去免费空间网站注册账号（注册完账号之后一定要去管理中心FTP管理开通FTP）
  • 记录下主机名、用户名、密码、域名
  • 利用cutftp软件上传网站到远程服务器
  • 在浏览器中输入域名，即可访问我们的网站了

---

二、移动端CSS

（一）移动端基础

1）webkit内核

• 移动端浏览器主要对webkit内核进行兼容

2）屏幕尺寸

• 常见移动端屏幕尺寸：http://material.io/devices/

3）移动端调试方法

• Chrome DevTools（谷歌浏览器）模拟手机调试
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

（二）移动端技术解决方案

1）移动端兼容性

• 移动端浏览器：基本以webkit内核为主，因此我们就只考虑webkit兼容性问题，可以放心使用H5标签和CSS3样式，同时我们浏览器的私有前缀只需要考虑添加webkit即可

2）移动端特殊样式

• CSS初始化normalize.css：移动端CSS初始化推荐使用normalize.css，保护了有价值的默认值，恢复了浏览器的bug，是模块化的，拥有详细的文档，官网地址：http://necolas.github.io/normalize.css/

• 传统盒子模型：box-sizing: content-box;

• CSS3盒子模型：box-sizing: border-box;

• 特殊样式

  div {
      /* css3盒子模型 */
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      /* 清除点击高亮，设置为transparent完成透明 */
      -webkit-tap-highlight-color: transparent;
      /* 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
      -webkit-appearance: none;
  }
  
  img,
  a {
      /* 禁用长按页面时的弹出菜单 */
      -webkit-touch-callout: none;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

3）视口

（当用户没有缩放行为的情况下，布局视口=视觉视口=独立设备像素）

• 布局视口layout viewport：iOS，Android基本都将这个视口分辨率设置为980px，所以PC的网页大多能在手机上呈现，一般默认可以通过可以手动缩放网页，一般移动设备都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题

• 视觉视口visual viewport：是用户正在看到的网站区域，可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

• 理想视口ideal viewport：对于移动设备来说，最理想的情况是用户刚进入页面时不再需要缩放，这就是引进理想视口的原因。对设备来讲是最理想的视口尺寸，需要动手添写meta视口标签通知浏览器操作：

  • meta视口标签主要目的：布局视口的宽度应该与理想视口的宽度一致，即设备有多宽，我们布局的视口就多宽

  • 语法

     <meta name="viewport" content="width=device-width",user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    1

  • 属性

    • width：宽度设置的是viewport宽度，可以设置device-width特殊值
    • initial-scale：初始缩放比，大于0的数字
    • maximum-scale：最大缩放比，大于0的数字
    • minimum-scale：最小缩放比，大于0的数字
    • user-scalable：用户是否可以缩放，yes或no（1或0）

4）二倍图

• 物理像素点：指屏幕显示的最小颗粒，是物理真实存在的，是厂商在出厂时就设置好的，比如苹果6\7\8是750*1334

• 物理像素比：开发时1px不一定等于1个物理像素，PC端页面1px等于1个物理像素，移动端不尽相同；1px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

• Retina（视网膜屏幕）是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

• 多倍图：在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，通常使用2倍图（因为iPhone6\7\8的影响，现在还存在3倍图4倍图的情况）

  /* 在iphone8下面 */
  img {
  		/* 原始图片100*100px */
  		width: 50px;
  		height: 50px;
  }
  .box {
  		/* 原始图片100*100px */
  		background-size: 50px 50px;
  /* 只写一个参数肯定是宽度高度省略了，会等比例缩放 */
  /* 属性值可以是百分比，是相对于父盒子来说的 */
  /* 属性值可以是cover，完全覆盖盒子，可能有部分背景图片显示不全 */
  /* 属性值可以是contain，高度宽度等比例拉伸，当宽度或高度铺满盒子就不再进行拉伸了，可能有部分空白区域 */
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

• 多倍图切图：使用cutterman切图工具，如选择iOS，@3X是3倍图，@2X是2倍图，@1X是一倍图

5）移动端技术选型

• 单独制作移动端页面（主流）：如京东商城手机版、淘宝触屏版、苏宁易购手机版等，通常情况下，网址域名前面加m(mobile)可以打开移动端，通过判断设备，如果是移动设备打开，则跳到移动端页面
  • 流式布局（百分比布局、非固定像素布局）
  • flex弹性布局（推荐）
  • less+rem+媒体查询布局（推荐）
  • vw和vh布局（更简便）
  • 混合布局（通常多种布局方式混合使用）
• 响应式兼容PC移动端：如三星手机官网，通过判断屏幕宽度来改变样式，以适应不同终端，制作麻烦，需要花很大精力去调兼容性问题
  • Bootstarp响应式布局（基于Bootstrap前端开发框架）
  • 混合布局（通常多种布局方式混合使用）

（三）移动端常见布局

1）流式布局（百分比布局、非固定像素布局）

• 通过盒子的宽度设置成百分比来根据屏幕宽度进行伸缩（如50%、200%），不受固定像素的限制，内容向两侧填充

• max-width：最大宽度

• max-height：最大高度

• min-width：最小宽度

• min-height：最小高度

• 常用初始化样式（以京东移动端首页为例）

  body {
      margin: 0 auto;
      min-width: 320px;
      max-width: 640px;
      background: #fff;
      font-size: 14px;
      font-family: -apple-system, Helvetica, sans-serif;
      line-height: 1.5;
      color: #666;
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 二倍精灵图做法

  • 在firework里面吧精灵图等比例缩放为原来的一半，约为也行

  • 之后根据大小测量坐标

  • 代码里面background-size设置为精灵图原来宽度的一半，约为也行，只要和第一步对应就行，如

    .sou {
        position: absolute;
        top: 8px;
        left: 50px;
        width: 18px;
        height: 15px;
        background: url(../images/jd-sprites.png) no-repeat -81px 0;
        background-size: 200px auto;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9

• 图片格式

  • DPG图片压缩技术：京东自主研发推出的DPG图片压缩技术，可以省50%的流量，提高用户网页打开速度，能够兼容jpeg，实现全平台、全部浏览器的兼容支持，压缩后的图片和webp的清晰度对比没有差距
  • webp图片格式：谷歌开发的一种旨在加快图片加载速度的图片格式，图片压缩体积大约只有JPEG的2/3，并能结婚时呢个大量的服务器宽带资源和数据空间

2）flex布局（推荐）

（也称伸缩布局、伸缩盒布局、弹性布局、弹性盒布局）

• 操作方便，布局简单，移动端应用广泛，PC端浏览器支持情况较差，IE11或更低版本不支持或仅部分支持

• flexible Box的缩写，为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局，当父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

• 通过给父盒子添加flex属性来控制子盒子的位置和排列方式，采用flex布局的元素，称为flex容器(container)，所有子元素称为flex项目

• 常见父元素属性

  • flex-direction：设置主轴的方向

    （默认主轴方向就是x轴方向，水平向右；默认侧轴方向就是y轴方向，水平向下）

    • 属性值为row：从左到右（默认值）
    • 属性值为row-reverse：从右到左
    • 属性值为column：从上到下
    • 属性值为column-reverse：从上到下

  • justify-content：设置主轴上子元素排列方式

    • 属性值为flex-start：从头部开始排列，如果主轴是x轴，则从左到右（默认值）
    • 属性值为flex-end：从尾部开始排列
    • 属性值为center：在主轴居中对齐，如果主轴是x轴，则水平居中
    • 属性值为space-around：平分剩余空间，就像给所有盒子加了相同的margin值
    • 属性值为space-between：先两边贴边，再平分剩余空间（重要）

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

    • 属性值为nowrap：不换行，如果一行装不开，会缩小子元素宽度，放到父元素里面（默认值）
    • 属性值为wrap：换行

  • align-content：设置侧轴上的子元素排列方式（多行，即只能用于子项出现换行的情况，在单行下是没有效果的）

    • 属性值为flex-start：在侧轴的头部开始排列（默认值）
    • 属性值为flex-end：在侧轴的尾部开始排列
    • 属性值为center：在侧轴中间显示
    • 属性值为space-around：子项在侧轴平分剩余空间
    • 属性值为space-between：子项在侧轴先分布在两头，再平分剩余空间
    • 属性值为stretch：设置子项元素高度平分父元素高度

  • align-items：设置侧轴上的子元素排列方式（单行，即在子项为单项时使用）

    • 属性值为flex-start：从上到下
    • 属性值为flex-end：从下到上
    • 属性值为center：挤在一起居中
    • 属性值为stretch：拉伸（默认值，子盒子不要给高度）

  • flex-flow：复合属性，相当于同时设置了flex-direction（设置主轴方向）和flex-wrap（设置子元素是否换行）

    flex-flow: column wrap;
    1

• 常见子元素属性

  • flex属性：定义子项目分配剩余空间，用flex表示子项目占的份数，默认0

  • align-self：控制子项自己在侧轴的排列方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；属性值同align-items

  • order：定义子项的排列顺序（前后顺序），数值越小，排列越靠前，默认为0

    div span:nth-child(2) {
    		order: -1;
    }
    1
    2
    3

3）less+rem媒体查询布局（推荐）

• rem基础

  • em：相对于父元素字体大小的倍数
  • rem：（root em）相对于html元素的字体大小的倍数

• 媒体查询（Media Query）（CSS3新语法）

  • 可针对不同媒体类型或屏幕尺寸定义不同样式，多用于苹果手机、Android手机、平板等设备

  • 语法规范

    @media mediatype and|not|only (media feature) {
    		css-code;
    }
    1
    2
    3

  • mediatype

    • all：用于所有设备
    • print：用于打印机和打印预览
    • screen：用于电脑屏幕，平板电脑，智能手机等

  • 关键字

    • and：可以将多个媒体特性连接到一起，相当于且
    • not：排除某个媒体类型，相当于非，可以省略
    • only：指定某个特定的媒体类型，可以省略

  • 媒体特性（只展示三个）

    • width：定义输出设备中页面可见区域宽度
    • min-width：定义输出设备中页面最小可见区域宽度
    • max-width：定义输出设备中页面最大可见区域宽度

  • 一个CSS文件中多个媒体查询一般按照从大到小或从小到大的思路来写，我们最喜欢的还是从小到大来写，如果有冲突，则后写的可以层叠掉先写的，可以使代码更简洁

• 使用媒体查询引入资源

  • 针对不同的媒体使用不同stylesheets样式表

  • 直接在link中判断设备的尺寸，然后引用不同的css文件

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
    1

  • 一个建议：我们媒体查询最好的方法是从小到大，如先写media feature为min-width：320px的媒体查询引入，再写min-width：640px的媒体查询引入

• Less基础（Leaner Style Sheets）（CSS预处理器的一种，扩展了CSS的动态特性）

  • Less中文网址：http://lesscss.cn/

  • 常见的CSS预处理器：Sass、Less、Stylus

  • Less的使用：新建一个后缀名为less的文件，在这个文件里面书写less语句

    • Less变量：@变量名:值（变量名不能包含特殊字符，不能以数字开头，对大小写敏感）

    • Less编译：本质上Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器编译生成对应的CSS文件，这样我们的html页面才能使用

      （借助EasyLESS插件来实现，只要保存一下Less文件，会自动生成CSS文件）

      （更改EasyLESS插件自动保存位置：EasyLESS插件 -> 设置 -> 扩展设置 -> 在settings.json中编辑 -> “less.compile”: {“out”: “…/css/”}）

    • Less嵌套：内层选择器前面没有&符号则被解析为父选择器的后代，如果有&符号则被解析成父元素或父元素的伪类

      a{
      	color: blue;
      	&:hover { //如果有伪类选择器、交集选择器、伪元素选择器，我们内层选择器前面需要加&
      		color: red;
      	}
      }
      1
      2
      3
      4
      5
      6

    • Less运算：任何数字、颜色或者变量都可以参加运算，加(+)减(-)乘(*)除(/)，可以使用小括号，可以引用定义的变量

      （运算符左右两侧必须敲一个空格隔开）

      （两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准）

      （两个数参与运算，如果2个数有不同的单位，则最后的结果以第一个单位为准）

• 媒体查询+rem+less

  • 媒体查询+less：按照设计稿与设备宽度的比例，动态计算并设置html根标签的fontsize大小

    • common.less中

    @no: 15;
    @media screen and (min-width: 320px) {
    	html {
    		font-size: 320px / @no;
    	}
    }
    @media screen and (min-width: 360px) {
    	html {
    		font-size: 360px / @no;
    	}
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

    • index.less文件中引入common.less文件：@import “common”

  • rem：CSS中设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值

    @baseFont: 50;
    .search-content {
    	position: fixed;
    	top: 0;
    	left: 50%;
    	transform:translateX(50%);
    	width: 15rem;
    	height: 88rem / @baseFont;
    	background-color: #FFC001;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

• flexible.js+rem（更简单）github地址：http://github.com/amfe/lib-flexible

  • 原理：把当前设备划分为10等份，但不同设备下比例是一致的，我们只需确定好参考设计稿的html文字大小就可以了，如设计稿750px，则设置html文字大小为75px（步骤见第三点）

  • 不需要写不同屏幕的媒体查询，这些都在flexible.js中做了处理

    （需要下载flexible.js文件，并在html中引入这个文件：<script src=“js/flexible.js”> </script>）

  • 不需要在less中手动写公式计算rem值，让flexible.js来计算

    （借助cssrem插件来实现px自动转换rem的操作）

    （需要ctrl+逗号或vscode左下角打开设置 -> 打开settings.json -> 修改对应行为“cssrem.rootFontSize": 75 -> 重启生效）

4）vw/vh布局

• 简介

  • vw：viewport width，视口宽度单位，1vw=1/100视口宽度
  • vh：viewport height，视口高度单位，1vh=1/100视口高度

• 使用

  • 元素单位直接使用新单位vw/vh即可（一般只使用vw，实现等比例缩放）
  • 因为vw/vh是相对单位，所以不同视口（屏幕下），宽高一起变化完成适配

• 像素大厨+vm/vh：https://www.fancynode.com.cn/pxcook

  • 需要切换设计图为2x模式
  • 需要切换单位为vw/vh

• less+vw/vh

  • px2vw插件：将px单位转成vw的VSCode插件
  • 根据设计稿的尺寸设置px2vw插件基准宽度值：px2vw插件 -> 扩展设置 -> 将Px2vw: Width设置为设计稿的宽度

5）Bootstarp响应式布局

• 响应式开发：使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备

• Bootstrap前端开发框架：基于HTML、CSS和JAVASCRIPT

  • 中文官网：http://www.bootcss.com/
  • 官网：http://getbootstrap.com/
  • 推荐使用：http://bootstrap.css88.com/

• Bootstrap使用四步曲

  • 创建文件结构：加一个官网下载的bootstrap文件夹

  • 创建html骨架结构

    <meta charset="UTF-8">
        <!-- 要求当前网页使用IE浏览器最高版本的内核渲染 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-acalable=0">
        <!-- 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
        <!-- 解决ie9以下浏览器对css3 Media Query的不识别 -->
        <!--[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]-->
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 引入相关样式文件

    <!-- 一定不要忘记引入bootstrap的样式文件 -->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    1
    2

  • 书写内容

• 响应式布局容器：在不同屏幕下通过媒体查询来改变这个布局容器的大小，可以自定义，通过给盒子添加预定义类container和container-fluid实现

  • container适合响应式布局容器，固定宽度
  • container-fluid类：适合流式布局容器，百分百宽度，占据全部视口的容器，适合做单独移动端开发

• Bootstrap流式栅格系统（grid systems，网格系统）（以下均为container布局容器）

  • Bootstrap里container宽度固定，但不同屏幕下container宽度不同，把不同宽度的container划分为12等份，通过一系列行(row)与列(column)的组合来创建页面布局）

    • 超小屏幕（手机，小于768px）：设置宽度为100%（栅格系统类前缀：.col-xs-）

    • 小屏幕（平板，大于等于768px）：设置宽度为750px（栅格系统类前缀：.col-sm-）

    • 中等屏幕（桌面显示器，大于等于992px）：宽度设置为970px（栅格系统类前缀：.col-md-）

    • 大屏幕（大桌面显示器，大于等于1200px）：宽度设置为1170px（栅格系统类前缀：.col-lg-）

  • 可以同时为一列指定多个设备的类名，以便划分不同份数，份数小于12份占不满，大于12份换行，行（row）必须放到container布局容器里面

  <div class="container">
          <div class="row">
              <div class="col-xs-2 col-sm-6 col-md-4 col-lg-8"></div>
              <div class="col-xs-10 col-sm-6 col-md-8 col-lg-4"></div>
          </div>
          <div class="row">
              <div class="col-xs-2 col-sm-6 col-md-4 col-lg-8"></div>
              <div class="col-xs-10 col-sm-6 col-md-8 col-lg-4"></div>
          </div>
  </div>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

  • 每一列默认有15像素的padding，列嵌套最好加一个行（row），可以取消父元素的padding值，而且高度自动和父级一样高

  <div class="container">
          <div class="row">
              <!-- 列嵌套 -->
              <div class="col-sm-4">
                  <div class="row">
                      <div class="col-sm-6">小列1</div>
                      <div class="col-sm-6">小列2</div>
                  </div>
              </div>
              <div class="col-sm-4"></div>
              <div class="col-sm-4"></div>
         </div>
  </div>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  • 列偏移：实际是通过使用*选择器为当前元素增加了左侧的外边距

  <div class="container">
          <!-- 列偏移 -->
          <div class="row">
              <div class="col-lg-4">列1</div>
              <div class="col-lg-4 col-lg-offset-4">列2</div>
          </div>
  </div>
  1
  2
  3
  4
  5
  6
  7

  • 列排序：push往右推，pull往左拉

  <div class="container">
          <!-- 列排序 -->
          <div class="row">
              <div class="col-md-4 col-md-push-8">列1</div>
              <div class="col-lg-8 col-md-pull-4">列2</div>
          </div>
  </div>
  1
  2
  3
  4
  5
  6
  7

  • 响应式工具
    • 特定屏幕大小下隐藏，其他可见：.hidden-xs .hidden-sm .hidden-md .hidden-lg
    • 特定屏幕大小下显示，其他隐藏：.visible-xs .visible-sm .visible-md .visible-lg

• Bootstrap手动修改container宽度

  /* Bootstrap里container宽度最大1170px，如果效果图是1280px宽度，需手动修改container宽度 */
  @media screen and (min-width: 1280px) {
      .container {
          width: 1280px;
      }
  }
  1
  2
  3
  4
  5
  6

• Bootstrap引入字体图标：只需要去官网查找相应字体图标类名，加在标签上就行了

  /* 修改a标签字体标签的位置等属性 */
  .nav a::before {
      vertical-align: middle;
      padding-right: 5px;
  }
  1
  2
  3
  4
  5

• Bootstrap添加预定义样式：只需要去官网查找相应样式类名，加在标签上就行了

（四）字体图标

1）图标字体上传下载

• 上传步骤：（阿里云图标库官网地址：https://www.iconfont.cn/）
  • UI美工准备好图标字体（必须是svg格式）
  • 点击右上方上传按钮（保留颜色并提交）
• 下载步骤
  • 字体图标生成之后可加入购物车
  • 点击下载 -> 下载代码

2）从网上扒字体图标

• 网页右键检查 -> 选中字体图标 -> 点击右边对应的css样式中带有下划线的链接 -> 右键Open in new tab -> 选中如//s1.hdslb.com/bfs/static/jinkela/mstation-h5/assets/iconfont.eot的链接 -> 右键在新标签页中打开 -> 字体图标下载成功

（五）常用工具

1）蓝湖/慕客协作平台

• UI设计师psd效果图完成后，会长传到蓝湖/慕客里，同时会拉前端工程师进入开发（大部分情况下，UI会把图片按照前端设计要求给切好）
  • 慕客官网地址：https://www.mockplus.cn/ 注册一个账号
  • 下载moke ps插件
  • ps安装慕客/蓝湖插件
  • 上传（需要切图，需要先标注切图）
  • 查看项目
  • 邀请成员进入（分享按钮，链接地址）
• 前端设计师可以直接蓝湖/慕客测量取值

2）swiper插件

• 简介：开源、免费、强大的触摸滑动插件
• 下载地址：https://www.swiper.com.cn/
• 使用方法：
  • 引入相应的css和js文件
    • swiper.min.css
    • swiper.min.js
  • 官网找到类似的案例（或者在下载的资源中找到相应的demo实例文件），复制html结构，css样式，js语法
    • 复制html结构代码到我们的html文件相应位置
    • 复制css样式代码到我们的css文件
    • 复制js语法代码到到我们的html文件相应位置
  • 根据需求定制修改模块
    • 可以对代码进行手动修改
    • 也可以将多个案例结合使用

3）兼容性查询网站

（https://caniuse.com/）

4）上传码云发布部署静态网站

• git可以把我们的本地网站提交上传到远程仓库（码云gitee）里面

  • git软件下载：https://git-scm.com/
  • 码云账号注册：https://gitee.com/

• 利用git提交本地网站到码云新建的仓库里（新建时不勾选使用readme文件初始化这个仓库）

  • 网站根目录右键 -> 点击Git Bash Here
  • 如果是第一次利用git提交，需配置好全局选项
    • git config --global user.name “用户名”
    • git config --global user.email “你的邮箱地址”
  • 初始化仓库：git init
  • 把本地文件放到暂存区：git add
  • 把本地文件放到本地仓库里：git commit -m ‘提交某网站’
  • 链接远程仓库：git remote add origin 新建的仓库地址

• 提交码云仓库另一种方式（新建仓库时勾选使用readme文件初始化这个仓库）

  • 当前仓库 -> 文件 -> 上传文件
  • 一次最多只能上传20个文件，并且隔一段时间才能上传一次，对大型网站不友好

• 码云部署发布静态网站

  • 当前仓库 -> 点击右上角服务 -> 点击Gitee Pages -> 点击启动
  • 复制生成的网址地址 -> 通过访问该网址就能看到我们的网站了

• 草料二维码生成网址对应的二维码：https://cli.im
  div class=“col-lg-4”>列1
  

  列2
  
  
  ```
  • 列排序：push往右推，pull往左拉

  <div class="container">
          <!-- 列排序 -->
          <div class="row">
              <div class="col-md-4 col-md-push-8">列1</div>
              <div class="col-lg-8 col-md-pull-4">列2</div>
          </div>
  </div>
  1
  2
  3
  4
  5
  6
  7

  • 响应式工具
    • 特定屏幕大小下隐藏，其他可见：.hidden-xs .hidden-sm .hidden-md .hidden-lg
    • 特定屏幕大小下显示，其他隐藏：.visible-xs .visible-sm .visible-md .visible-lg

• Bootstrap手动修改container宽度

  /* Bootstrap里container宽度最大1170px，如果效果图是1280px宽度，需手动修改container宽度 */
  @media screen and (min-width: 1280px) {
      .container {
          width: 1280px;
      }
  }
  1
  2
  3
  4
  5
  6

• Bootstrap引入字体图标：只需要去官网查找相应字体图标类名，加在标签上就行了

  /* 修改a标签字体标签的位置等属性 */
  .nav a::before {
      vertical-align: middle;
      padding-right: 5px;
  }
  1
  2
  3
  4
  5

• Bootstrap添加预定义样式：只需要去官网查找相应样式类名，加在标签上就行了

（四）字体图标

1）图标字体上传下载

• 上传步骤：（阿里云图标库官网地址：https://www.iconfont.cn/）
  • UI美工准备好图标字体（必须是svg格式）
  • 点击右上方上传按钮（保留颜色并提交）
• 下载步骤
  • 字体图标生成之后可加入购物车
  • 点击下载 -> 下载代码

2）从网上扒字体图标

• 网页右键检查 -> 选中字体图标 -> 点击右边对应的css样式中带有下划线的链接 -> 右键Open in new tab -> 选中如//s1.hdslb.com/bfs/static/jinkela/mstation-h5/assets/iconfont.eot的链接 -> 右键在新标签页中打开 -> 字体图标下载成功

（五）常用工具

1）蓝湖/慕客协作平台

• UI设计师psd效果图完成后，会长传到蓝湖/慕客里，同时会拉前端工程师进入开发（大部分情况下，UI会把图片按照前端设计要求给切好）
  • 慕客官网地址：https://www.mockplus.cn/ 注册一个账号
  • 下载moke ps插件
  • ps安装慕客/蓝湖插件
  • 上传（需要切图，需要先标注切图）
  • 查看项目
  • 邀请成员进入（分享按钮，链接地址）
• 前端设计师可以直接蓝湖/慕客测量取值

2）swiper插件

• 简介：开源、免费、强大的触摸滑动插件
• 下载地址：https://www.swiper.com.cn/
• 使用方法：
  • 引入相应的css和js文件
    • swiper.min.css
    • swiper.min.js
  • 官网找到类似的案例（或者在下载的资源中找到相应的demo实例文件），复制html结构，css样式，js语法
    • 复制html结构代码到我们的html文件相应位置
    • 复制css样式代码到我们的css文件
    • 复制js语法代码到到我们的html文件相应位置
  • 根据需求定制修改模块
    • 可以对代码进行手动修改
    • 也可以将多个案例结合使用

3）兼容性查询网站

（https://caniuse.com/）

4）上传码云发布部署静态网站

• git可以把我们的本地网站提交上传到远程仓库（码云gitee）里面

  • git软件下载：https://git-scm.com/
  • 码云账号注册：https://gitee.com/

• 利用git提交本地网站到码云新建的仓库里（新建时不勾选使用readme文件初始化这个仓库）

  • 网站根目录右键 -> 点击Git Bash Here
  • 如果是第一次利用git提交，需配置好全局选项
    • git config --global user.name “用户名”
    • git config --global user.email “你的邮箱地址”
  • 初始化仓库：git init
  • 把本地文件放到暂存区：git add
  • 把本地文件放到本地仓库里：git commit -m ‘提交某网站’
  • 链接远程仓库：git remote add origin 新建的仓库地址

• 提交码云仓库另一种方式（新建仓库时勾选使用readme文件初始化这个仓库）

  • 当前仓库 -> 文件 -> 上传文件
  • 一次最多只能上传20个文件，并且隔一段时间才能上传一次，对大型网站不友好

• 码云部署发布静态网站

  • 当前仓库 -> 点击右上角服务 -> 点击Gitee Pages -> 点击启动
  • 复制生成的网址地址 -> 通过访问该网址就能看到我们的网站了

• 草料二维码生成网址对应的二维码：https://cli.im