C站能力认证任务关卡1-3 Web基础

Myth丶恋晨 2023-01-17 03:21 258阅读 0赞

#### 了解HTML, CSS, Javascript的技术应用 ####

###### 参考内容：w3 school ([http://www.sz-seo.org/w3cschool/html/index.html][http_www.sz-seo.org_w3cschool_html_index.html]) ######

######  菜鸟教程 ([https://www.runoob.com/html/html-tutorial.html][https_www.runoob.com_html_html-tutorial.html]) ######

##### 根据任务内容简单介绍下相关内容: #####

##### 1. HTML #####

###### HTML 是用来描述网页的一种语言。 ######

*  HTML 指的是超文本标记语言 (Hyper Text Markup Language)
 *  HTML 不是一种编程语言，而是一种标记语言 (markup language)
 *  标记语言是一套标记标签 (markup tag)
 *  HTML 使用标记标签来描述网页

###### 常见的一些标签： ######

*  <html></html>
 *  <head></head>
 *  <body></body>
 *  <h1></h1> //HTML标题
 *  <p></p> //HTML段落
 *  <a href=“http://www.csdn.net”>CSDN</a> //HTML链接
 *  <img src=“logo.jpg” alt=“CSDN”> //HTML图像

###### HTML元素 ######

*  HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
 *  HTML 元素以开始标签起始, 以结束标签终止
 *  元素的内容是开始标签与结束标签之间的内容
 *  某些 HTML 元素具有空内容（empty content）
 *  空元素在开始标签中进行关闭（以开始标签的结束而结束）
 *  大多数 HTML 元素可拥有属性
 *  大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）
 *  HTML 文档由嵌套的 HTML 元素构成

###### HTML属性 ######

*  HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息
 *  属性总是以名称/值对的形式出现，比如：name=“value”
 *  属性总是在 HTML 元素的开始标签中规定。

###### HTML样式 ######

*  HTML 的 style 属性提供了一种改变所有 HTML 元素的样式的通用方法
 *  例如：`<p style="color:red">CSDN</p>`

###### HTML表格 ######

*  表格由 <table> 标签来定义
 *  每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）
 *  字母 td 指表格数据（table data），即数据单元格的内容
 *  数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

###### HTML列表 ######

###### 无序列表 ######

*  无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
 *  无序列表始于 <ul> 标签，每个列表项始于 <li>

*  输出结果如下：  
    ![在这里插入图片描述][20210426221703966.png]

###### 有序列表 ######

*  有序列表也是一列项目，列表项目使用数字进行标记
 *  有序列表始于 <ol> 标签，每个列表项始于 <li> 标签

<ol>
      <li>China</li>
      <li>Japan</li>
    </ol>

*  输出结果如下：  
    ![在这里插入图片描述][20210426221948329.png]

###### 定义列表 ######

*  自定义列表不仅仅是一列项目，而是项目及其注释的组合
 *  自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始

###### HTML块元素 ######

*  HTML <div> 元素是块级元素，它是可用于组合其他HTML元素的容器
 *  <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行
 *  如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性
 *  HTML <span> 元素是内联元素，可用作文本的容器
 *  <span> 元素也没有特定的含义
 *  当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

--------------------

##### 2. CSS #####

*  CSS 指层叠样式表 (Cascading Style Sheets)
 *  样式定义如何显示 HTML 元素
 *  样式通常存储在样式表中
 *  外部样式表可以极大提高工作效率
 *  外部样式表通常存储在 CSS 文件中
 *  多个样式定义可层叠为一个

###### CSS语法 ######

*  CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
 *  选择器通常是您需要改变样式的 HTML 元素
 *  每条声明由一个属性和一个值组成
 *  属性（property）是您希望设置的样式属性（style attribute），每个属性有一个值。属性和值被冒号分开

h1 {
      color:red;
      font-size:14px;
      }

###### id选择器 ######

*  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
 *  id 选择器以 “\#” 来定义
 *  下面的两个 id 选择器，第一个可以定义元素的颜色为蓝色，第二个定义元素的颜色为黄色：

#blue {color:blue;}
    #yellow {color:yellow;}

*  下面的 HTML 代码中，id 属性为 blue 的 p 元素显示为蓝色，而 id 属性为 yellow 的 p 元素显示为黄色

<p id="blue">这个段落是蓝色。</p>
    <p id="yellow">这个段落是黄色。</p>

###### 类选择器 ######

*  在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

*  在上面的例子中，所有拥有 center 类的 HTML 元素均为居中
 *  在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则

<h1 class="center">
    This heading will be center-aligned
    </h1>
    
    <p class="center">
    This paragraph will also be center-aligned.
    </p>

###### 通用选择器 ######

*  通用选择器（\*）选择页面上的所有的 HTML 元素

* {
      text-align: center;
      color: blue;
      }

#  #

--------------------

##### 3. Javascript #####

*  JavaScript 是脚本语言
 *  JavaScript 是一种轻量级的编程语言
 *  JavaScript 是可插入 HTML 页面的编程代码
 *  JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行

###### Javascript用法 ######

*  HTML 中的脚本必须位于 <script> 与 </script> 标签之间
 *  脚本可被放置在 HTML 页面的 <body> 和 </head> 部分中

###### JavaScript 函数和事件 ######

*  通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时
 *  如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数
 *  您可以在 HTML 文档中放入不限数量的脚本
 *  脚本可位于 HTML 的 或 部分中，或者同时存在于两个部分中
 *  通常的做法是把函数放入 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容

###### 外部的 JavaScript ######

*  也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码
 *  外部 JavaScript 文件的文件扩展名是 .js
 *  如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件

###### JavaScript 函数 ######

*  JavaScript 使用关键字 function 定义函数
 *  函数可以通过声明定义，也可以是一个表达式

###### 以上简单介绍了HTML, CSS, Javascript的一些概念，具体使用请参考网络内容学习，下面任务过程中会针对使用到的内容解释。 ######

--------------------

#### 任务一 ####

##### 在开源富文本编辑器(https://summernote.org)中实现以下效果： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center]

##### 1. 实现红色文字 #####

###### 根据HTML段落标签 <p> </p> 和style样式，编写代码如下： ######

<p style="color: red">CSDN能力认证中心</p>

###### 效果如下： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70]

##### 2. 实现表格 #####

###### 根据HTML表格标签 <table> </table> <tr> </tr> <td> </td> 和style样式，编写代码如下： ######

<p style="color: red">CSDN能力认证中心</p>
    <table style="width: 200px">                           /*width属性控制表格宽度*/
      <tbody>
        <tr style="background-color: lightgray">           /*background-color属性控制表格背景颜色*/
          <td style="border: 1px solid">C1</td>            /*border属性控制表格边距、形态和颜色*/
          <td style="border: 1px solid">见习工程师认证</td>
        </tr>
        <tr>
          <td style="border: 1px solid">C4</td>
          <td style="border: 1px solid">专项工程师认证</td>
        </tr>
        <tr style="background-color: lightgray">
          <td style="border: 1px solid">C5</td>
          <td style="border: 1px solid">全栈工程师认证</td>
        </tr>
      </tbody>
    </table>

###### 效果如下： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 1]

##### 3. 实现交互按钮 #####

###### 根据Javascript按钮标签和函数功能，编写代码如下： ######

###### 效果如下： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 2]

###### 其中表格的样式可以通过内部样式表来设定，如下： ######

--------------------

#### 拓展任务 ####

##### 完成下图的CSS盒子模型布局 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 1]

##### 首先，先确定盒子模型内的所有颜色rgb编码，这里借助PS取色器。 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 3]

##### 得到各个颜色rgb编码如下： #####

<table> 
 <thead> 
  <tr> 
   <th>盒子</th> 
   <th>RGB编码</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>外部盒子背景</td> 
   <td>252, 221, 156</td> 
  </tr> 
  <tr> 
   <td>外部盒子边距</td> 
   <td>170, 170, 168</td> 
  </tr> 
  <tr> 
   <td>内部盒子1, 2, 3, 4, 5, 6背景</td> 
   <td>197, 208, 142</td> 
  </tr> 
  <tr> 
   <td>内部盒子1, 2, 3, 4, 5, 6边距</td> 
   <td>170, 170, 168</td> 
  </tr> 
  <tr> 
   <td>内部盒子7, 8背景</td> 
   <td>243, 163, 100</td> 
  </tr> 
  <tr> 
   <td>内部盒子7, 8边距</td> 
   <td>243, 163, 100</td> 
  </tr> 
  <tr> 
   <td>内部盒子9背景</td> 
   <td>248, 204, 157</td> 
  </tr> 
  <tr> 
   <td>内部盒子9边距</td> 
   <td>248, 204, 157</td> 
  </tr> 
 </tbody> 
</table>

##### 使用webstorm建立一个css文件和一个html文件，分别命名为style.css和index.html。 #####

##### 在index.html文件中的 <head> </head> 标签中加入一行引用style.css样式表的代码： #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />   /*引用style.css外部样式表*/
        <title>Index</title>
    </head>
    
    <body>
    
    </body>
    </html>

##### 开始在样式表中设置外部盒子模型，分辨率设置1600:900，根据盒子模型定义，实际占宽和占高分别为1600和900，content的width和height就要分别减去外边距(margin)\*2，边距(border)\*2，内边距(padding)\*2。 #####

##### 在index中加入块元素div，类选择器选择.body类。 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <title>Index</title>
    </head>
    
    <body>
    <div class="body">
    </div>
    </body>
    </html>

##### 在chrome中预览效果： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 4]

##### 在样式表中设置内部盒子1和2的模型，content的width和height都是减去四周的margin，border和padding后得出的。 #####

/*内盒1设定宽高为506：205，实际占宽是根据body-width均分3份得出，实际占高是根据body-height均分4份得出*/
    .inner1 {
        
      width: 464px;
      height: 163px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      margin-bottom: 20px;     /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，
                               设定下部外边距为20px，防止与内盒2合并外边距*/
      line-height: 163px;      /*此处设置的是盒子内文本的垂直居中，只需line-height设定与content-height
                               一致即可*/
    }
    
    /*内盒2设定宽高为506：615，实际占宽等同内盒1，实际占高是body-height减去内盒1实际占高*/
    .inner2 {
        
      width: 464px;
      height: 573px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding:10px;
      margin: 10px;
      line-height: 573px;
    }

##### 在index.html中加入内部盒子1和2的块元素，注意内部盒子1，2，3，4，5，6，7，8，9都是全部嵌套在外部盒子中的，所以代码也是嵌套在body内。 #####

##### 预览效果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 5]

##### 设置内部盒子3的模型，这里注意加入了位置属性，设置为可移动，方便自由布局，同时还加入了margin-bottom，这个是由于相同的盒子并列时会出现外边距合并的状况，所以特别用一个小属性覆盖掉大属性，保证边距为20px。 #####

/*内盒3设定宽高为1014：307，实际占宽是body-width减去内盒1的实际占宽，
    实际占高是内盒1的实际占高加上内盒1的实际占高的一半*/
    .inner3 {
        
      width: 972px;
      height: 265px;
      position: relative;       /*此处内盒设定为可以移动*/
      left: 506px;              /*距离左边距是根据内盒1的实际占宽得出*/
      top: -810px;              /*由于内盒是默认纵向排列，根据上面右移后，
                                 距离顶部为body-height减去边距10px*/
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      margin-bottom: 20px;      /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，
                                 设定下部外边距为20px，防止与内盒4和5合并外边距*/
      line-height: 265px;
    }

##### 在index.html加入内部盒子3的块元素。 #####

##### 预览效果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 6]

##### 设置内部盒子4，5，6的模型，同之前的步骤。 #####

/*内盒4设定宽高为507：513，实际占宽根据内盒3的实际占宽的一半得出，实际占高是body-width减去内盒3的实际占高*/
    .inner4 {
        
      width: 465px;
      height: 471px;
      position: relative;
      left: 506px;
      top: -810px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      line-height: 471px;
    }
    
    /*内盒5设定宽高为507：256，实际占宽与内盒4一致，实际占高是内盒4的实际占高的一半*/
    .inner5 {
        
      width: 465px;
      height: 214px;
      position: relative;
      left: 1013px;        /*根据内盒2和内盒4的实际占宽得出*/
      top: -1313px;        /*根据内盒4的top加上内盒4的实际占高，再减去外边距10px得出*/
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      margin-bottom: 20px;
      line-height: 214px;
    }
    
    /*内盒6设定宽高为507：257， 实际占宽与内盒5一致，实际占高是内盒4的实际占高减去内盒5的实际占高*/
    .inner6 {
        
      width: 465px;
      height: 215px;
      position: relative;
      left: 1013px;
      top: -1313px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      line-height: 215px;
    }

##### 在index.html中加入内部盒子4，5，6的块元素。 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <title>Index</title>
    </head>
    
    <body>
    <div class="body">
        <div class="inner1">1</div>
        <div class="inner2">2</div>
        <div class="inner3">3</div>
        <div class="inner4">4</div>
        <div class="inner5">5</div>
        <div class="inner6">6</div>
    </div>
    </body>
    </html>

##### 预览效果如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 7]

##### 设置内部盒子7，8，9的模型。 #####

/*内盒7，8，9的宽高设定为307：230*/
    .inner7 {
        
      width: 267px;
      height: 190px;
      position: relative;
      left: 526px;         /*根据内盒3的左边距离加上左外边距10px得出*/
      top: -2083px;        /*根据内盒6的top加上一定数值得出*/
      background-color: rgb(243, 163, 100);
      border: 1px solid rgb(243, 163, 100);
      padding: 10px;
      margin: 10px;
      line-height: 190px;
    }
    
    .inner8 {
        
      width: 267px;
      height: 190px;
      position: relative;
      left: 1192px;        /*根据内盒3实际占宽减去内盒8实际占宽，再加上内盒1实际占宽，减去外边距、内边距和border之和21px得出，距离右边距20px*/
      top: -2500px;
      background-color: rgb(243, 163, 100);
      border: 1px solid rgb(243, 163, 100);
      padding: 10px;
      margin: 10px;
      line-height: 190px;
    }
    
    .inner9 {
        
      width: 267px;
      height: 190px;
      position: relative;
      left: 506px;         /*由于内盒9嵌套与内盒2，所以左边距离等同内盒4的*/
      top: -80px;
      background-color: rgb(248, 204, 157);
      border: 1px solid rgb(248, 204, 157);
      padding: 10px;
      margin: 10px;
      line-height: 190px;
    }

##### 在index.html中加入内部盒子7，8，9的块元素。注意盒子9是嵌套在盒子2的内部，这样才能实现盒子9掩藏在盒子4下面，同时，top和left属性要调整，index.html文件全部完成。 #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" />
        <title>Index</title>
    </head>
    
    <body>
    <div class="body">
        <div class="inner1">1</div>
        <div class="inner2">2
            <div class="inner9">9</div>
        </div>
        <div class="inner3">3</div>
        <div class="inner4">4</div>
        <div class="inner5">5</div>
        <div class="inner6">6</div>
        <div class="inner7">7</div>
        <div class="inner8">8</div>
    </div>
    </body>
    </html>

##### 附上完整的style.css文件 #####

@charset "utf-8";
    /* CSS Document */
    
    /*外盒设定宽高为1600：900，所以content的宽高为分别减去2倍border，2倍padding，2倍margin*/
    .body {
        
      width: 1520px;
      height: 820px;
      background-color: rgb(252, 221, 156);
      border: 10px solid rgb(170, 170, 168);
      padding: 10px;                          /*要求边距为20px，由于body盒子内部还有嵌套的盒子，margin设定为10px，所以相加为20px*/
      margin: 20px;
      font-size: 36px;
      font-family: sans-serif;
      color: white;
      text-align: center;                     /*盒子内文本设定为水平居中*/
    }
    
    /*内盒1设定宽高为506：205，实际占宽是根据body-width均分3份得出，实际占高是根据body-height均分4份得出*/
    .inner1 {
        
      width: 464px;
      height: 163px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      margin-bottom: 20px;     /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，设定下部外边距为20px，防止与内盒2合并外边距*/
      line-height: 163px;      /*此处设置的是盒子内文本的垂直居中，只需line-height设定与content height一致即可*/
    }
    
    /*内盒2设定宽高为506：615，实际占宽等同内盒1，实际占高是body-height减去内盒1实际占高*/
    .inner2 {
        
      width: 464px;
      height: 573px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding:10px;
      margin: 10px;
      line-height: 573px;
    }
    
    /*内盒3设定宽高为1014：307，实际占宽是body-width减去内盒1的实际占宽，实际占高是内盒1的实际占高加上内盒1的实际占高的一半*/
    .inner3 {
        
      width: 972px;
      height: 265px;
      position: relative;       /*此处内盒设定为可以移动*/
      left: 506px;              /*距离左边距是根据内盒1的实际占宽得出*/
      top: -810px;              /*由于内盒是默认纵向排列，根据上面右移后，距离顶部为body-height减去边距10px*/
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      margin-bottom: 20px;      /*由于两个内盒并列会出现外边距合并的情况，所以此处加入小属性层叠覆盖大属性，设定下部外边距为20px，防止与内盒4和5合并外边距*/
      line-height: 265px;
    }
    
    /*内盒4设定宽高为507：513，实际占宽根据内盒3的实际占宽的一半得出，实际占高是body-width减去内盒3的实际占高*/
    .inner4 {
        
      width: 465px;
      height: 471px;
      position: relative;
      left: 506px;
      top: -810px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      line-height: 471px;
    }
    
    /*内盒5设定宽高为507：256，实际占宽与内盒4一致，实际占高是内盒4的实际占高的一半*/
    .inner5 {
        
      width: 465px;
      height: 214px;
      position: relative;
      left: 1013px;        /*根据内盒2和内盒4的实际占宽得出*/
      top: -1313px;        /*根据内盒4的top加上内盒4的实际占高，再减去外边距10px得出*/
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      margin-bottom: 20px;
      line-height: 214px;
    }
    
    /*内盒6设定宽高为507：257， 实际占宽与内盒5一致，实际占高是内盒4的实际占高减去内盒5的实际占高*/
    .inner6 {
        
      width: 465px;
      height: 215px;
      position: relative;
      left: 1013px;
      top: -1313px;
      background-color: rgb(197, 208, 142);
      border: 1px solid rgb(170, 170, 168);
      padding: 10px;
      margin: 10px;
      line-height: 215px;
    }
    
    /*内盒7，8，9的宽高设定为307：230*/
    .inner7 {
        
      width: 267px;
      height: 190px;
      position: relative;
      left: 526px;         /*根据内盒3的左边距离加上左外边距10px得出*/
      top: -2083px;        /*根据内盒6的top加上一定数值得出*/
      background-color: rgb(243, 163, 100);
      border: 1px solid rgb(243, 163, 100);
      padding: 10px;
      margin: 10px;
      line-height: 190px;
    }
    
    .inner8 {
        
      width: 267px;
      height: 190px;
      position: relative;
      left: 1192px;        /*根据内盒3实际占宽减去内盒8实际占宽，再加上内盒1实际占宽，减去外边距、内边距和border之和21px得出，距离右边距20px*/
      top: -2500px;
      background-color: rgb(243, 163, 100);
      border: 1px solid rgb(243, 163, 100);
      padding: 10px;
      margin: 10px;
      line-height: 190px;
    }
    
    .inner9 {
        
      width: 267px;
      height: 190px;
      position: relative;
      left: 506px;         /*由于内盒9嵌套与内盒2，所以左边距离等同内盒4的*/
      top: -80px;
      background-color: rgb(248, 204, 157);
      border: 1px solid rgb(248, 204, 157);
      padding: 10px;
      margin: 10px;
      line-height: 190px;
    }

##### 预览效果如下：（超出浏览器不显示） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 8]

--------------------

#### 题外：几种学习html+css+javascript的个人方式 ####

#### 1. 通过模板之家等网站下载一些简单的网站模板，在window下，利用IIS搭建本地环境，运行网站，通过分析或修改网站的文件，实现个人建立一个简单的网站。通过网站文件我们可以了解到网站文件的一些基本框架，比如以下模板站： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 2]

##### 目前主流网站为了适应PC端，移动端，平板设备的访问，都已经采用了响应式设计，在屏幕尺寸不同的情况下，仍然能有效的展示网站内容。以上网站的文件内容如下： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 10]

##### 首页一般都是以index.html文件为主，这个页面也是所有网站的入口 #####

##### css文件夹，包含网页的各种样式表 #####

##### fonts字体文件夹，用于设定网站文字 #####

##### img文件夹，里面包含网站所有用到的图片 #####

##### js文件夹，包含网站所有涉及的Javascript内容 #####

##### 除此之外，一般还有除首页外的其他页面，404页面等 #####

##### 为了便于客户管理网站，如上传产品信息，上传文章等等，一般会在网站文件内制作一个管理后台文件夹，通过后台对前台网站进行维护，使网站管理更直观简便。 #####

#### 2. 利用大型平台的Saas模板建站，在疫情期间创建公司下属的医疗耗材网站便是利用百度的AIPage搭建，通过对PC端和手机端的前端设计来进行调整网页，这种方式操作方便，上手较快，通过搭积木的方式建站，比写代码更直观。缺点是模板固定，选择有限，个性化偏弱，同时后台的一些设定不够灵活，比如独立部署必须使用百度的服务，需要三方网站插入追踪代码比较麻烦。 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 3]

##### 后台仪表板基本覆盖所需的模块 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 11]

##### 在设计后台，可以看到能够设计PC端，手机端和小程序，同时包含了SEO的一些设置模块 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 12]

#### 3. 利用小飞兔等抓取整站工具对网站进行抓取，或者直接用chrome检查网站元素查看网站代码，然后分析和学习设计内容。 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 13]

#### 除了以上内容外，我们还需要明白，建站的目的是为了让人访问，让更多的人了解到这个网站，并获取到所需的信息，这就涉及到网站的推广，吸引流量，这些跟搜索引擎相关，涉及到SEO和SEM这两个概念。 ####

##### 1. SEO（Search Engine Optimization）搜索引擎优化 #####

###### 是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的访问量，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。 ######

###### 网站优化的基础部分，涉及到网站代码中的一些标签内容，如 <meta>, <title> </title>, 其中的content和description要根据搜索引擎上的相关热度，专业度，搜索频率来进行编写，优化和调整。还有关键词的设置，内链外链等等。 ######

##### 2. SEM（Search Engine Marketing）搜索引擎营销 #####

###### 这里的SEM涉及范围很广，我们简单说下其中的点击付费推广，这种方式在完成网站的基础SEO设置后，可以通过服务商来进行网站的广告付费推广，通过广告的形式把网站推向某个关键词结果的前几页，使感兴趣的用户发现并点击进入网站。 ######

###### 所以，网站的基础SEO设置很重要，首先你的网站一定是内容丰富，包含了用户所需的相关信息，以及用户习惯搜索的关键词，页面设计让人舒服，跳转其他页面的链接很方便，网站访问打开速度要快，这些是提升你网站在搜索引擎权重的基础。 ######

###### 当今，各种搜索引擎的发展已经越来越成熟，算法的优化越来越贴近以用户为主的服务理念，同时有效打击了黑帽SEO各种违规和走捷径的方式，使我们回归到以网站内容质量为重心，以用户为中心的方式，真正打造一个高品质的网站。 ######

###### 以下是公司网站在Google Adwards的后台推广情况，还有分析工具Google Analytics的后台分析情况。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 5]

[http_www.sz-seo.org_w3cschool_html_index.html]: http://www.sz-seo.org/w3cschool/html/index.html
[https_www.runoob.com_html_html-tutorial.html]: https://www.runoob.com/html/html-tutorial.html
[20210426221703966.png]: /images/20221022/791bdef54c4f4e1c9a70f7684e405990.png
[20210426221948329.png]: /images/20221022/73e023e014f84622ba43bd413c096e34.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/a63c63552fe3404c9e9fc4ed4dd0f958.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70]: /images/20221022/5ace128d11d149e8adf2bd4a50959130.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 1]: /images/20221022/1e0583fd78f6426cad2039be8f3457c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 2]: /images/20221022/b70d89df40fc416aad591cfc6f4b0309.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/7dc3d383d74e4ca69c5d22d5d59d0135.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 3]: /images/20221022/19ec5cbe0bee4151b40d9a872fa0a66c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 4]: /images/20221022/42ff2bf8dab54a4daa50b6cc086f7cee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 5]: /images/20221022/d78ac2cbd3df434f946fe7953462d8c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 6]: /images/20221022/cb67b290b9294a869b0e86db621a6929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 7]: /images/20221022/6dc0a44a503f424388081bf4e9a0e568.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 8]: /images/20221022/a83fc722f3654f43b63f487dd75e1839.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 9]: /images/20221022/4595918866184d3bac1a584833add9f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/8ae69f033e0049178d86d6931c3ba1b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 10]: /images/20221022/67a789637ad347cab6982a84975caa7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221022/a362bb21f36c498688d1573889464633.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 11]: /images/20221022/8da5db39f83841fa997cfe390d624caa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 12]: /images/20221022/8eb20d67481e44d181686291cc1cea62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70 13]: /images/20221022/a650c6999c3a4802b91b40bad22bf6f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221022/2b37cbeef5f249e194cf965c2bf0b503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25hdmljaGV1bmc_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221022/651cfbca1da64a6487921181aec21a40.png