html+css+element网站布局

此网站静态页面分为三大部分（六小部分），头部、中部（包含4小部分）、底部。

第一部分（头部）：

1. 背景图：首先，创建一个大的<div>，第一部分的所有代码在此<div>中进行编写。
   采用 element组件中的<el-image> require来引入 背景图，使用相对路径，看图
   相对路径：是指当前文件路径，一般相对路径有一个./ 表示“当前目录”，一般情况下使
   用相对路径，因为在其它人的电脑中也能正常显示，不会出现bug。
   绝对路径：是指当前文件的根目录开始，这只可以在自己的电脑里显示，因为别人的电
   脑路径跟你的不一定相同。
   

   image.png

2. 显示在背景图上的导航栏？
   首先创建一个父<div>，根据导航栏的数量来创建相应的子<div>，给父<div>设置绝对
   定位 position: absolute，并按导航栏的位置来设置相应的参数，然后导航栏就会显示
   在相应的位置了，看图~

   
   image.png
   image.png

3. 点击导航栏上的文字时出现白色背景色，不点击时默认无，如何实现了？看图~
   3.1 需提前设置好两种css样式，设置一个不点击时只显示白色字体、另一个点击时字体变成黑色，白色背
   景色显示的css样式；

   
   image.png

   3.2 在导航栏上的文字设置动态class属性；

   
   image.png
   image.png

   3.3 最后都绑字v-on:click事件来触发函数达到效果；

   
   image.png
   image.png

4. 导航栏上单独有一个带下拉列表的导航？
   采用element组件中的<el-dropdown>来实现此功能，看图~

   
   image.png
   image.png

5. 在一个div中，如何使多行的文件全部靠左对齐呢？
   使用css样式中 align="left"属性，看图~

   
   image.png
   image.png

第二部分（中部）：
小部分（1）：

1. 同样先创建一个大的<div>，第小部分（1）的所有代码在此<div>中进行编写。图片同样采用element组件中的<el-image> require来引入，因第二部分图片下的文字较少，直接都写在<p>标签里了，按设计图的格式来排版，看图~

   
   image.png
   image.png

2. 如何使3个div在同一行水平排列对齐呢？
   使用css样式中display:inline-block属性，看图~

   
   image.png
   image.png

小部分（2）：

1. <div>的创建及布局一致。但区别在于这部分div里的文字增多、统一朝左对齐，并且4个单独的div要同一行水平排列对齐，如何实现了？
   创建一个大的div，来包裹其子div，把相关的图片及文字引入设置完成。 使用css样式
   中 display: table-cell属性，看图~

   
   image.png
   image.png

小部分（3）：

1. 这部分只有一张图片和一个div + 一段文字，如何水平排列了？
   首先引入图片，使用<img src="../assets/img/icon_product.png">，给图片基于div设置
   float: left；并设置css样式中 display: table-cell属性，看图~
   创建一个父<div>，建一个子<div>，子<div>里根据文字内容行数再建相应的<div>。
   给子div使用css样式中 display: table-cell 属性，设置子<div> float: right 来实现水平排
   列，看图~

   
   image.png
   image.png
   image.png

小部分（4）：

1. 此部分由4组图片 + 文字组成，并水平排列对齐，看图~
   使用相同的方法引入4组图片，给每多组片的宽度为22%均匀分布在div中，同时设置
   css样式display:inline-block属性。文字部分采用 css样式display: table-cell属性。

   
   image.png
   image.png
   image.png

第三部分：

1. 底部一些简单的信息及备案的域名。
   采用element组件中的<el-footer>，新建<span>标签，并填写相关文字，设置及css样
   式即可。