html+css+element网站布局
此网站静态页面分为三大部分（六小部分），头部、中部（包含4小部分）、底部。
第一部分（头部）：
-
背景图：首先，创建一个大的<div>，第一部分的所有代码在此<div>中进行编写。
采用 element组件中的<el-image> require来引入 背景图，使用相对路径，看图
相对路径：是指当前文件路径，一般相对路径有一个./ 表示“当前目录”，一般情况下使
用相对路径，因为在其它人的电脑中也能正常显示，不会出现bug。
绝对路径：是指当前文件的根目录开始，这只可以在自己的电脑里显示，因为别人的电
脑路径跟你的不一定相同。
image.png
-
显示在背景图上的导航栏？
首先创建一个父<div>，根据导航栏的数量来创建相应的子<div>，给父<div>设置绝对
定位 position: absolute，并按导航栏的位置来设置相应的参数，然后导航栏就会显示
在相应的位置了，看图~
image.png
image.png
-
点击导航栏上的文字时出现白色背景色，不点击时默认无，如何实现了？看图~
3.1 需提前设置好两种css样式，设置一个不点击时只显示白色字体、另一个点击时字体变成黑色，白色背
景色显示的css样式；
image.png
3.2 在导航栏上的文字设置动态class属性；
image.png
image.png
3.3 最后都绑字v-on:click事件来触发函数达到效果；
image.png
image.png
-
导航栏上单独有一个带下拉列表的导航？
采用element组件中的<el-dropdown>来实现此功能，看图~
image.png
image.png
-
在一个div中，如何使多行的文件全部靠左对齐呢？
使用css样式中 align="left"属性，看图~
image.png
image.png
第二部分（中部）：
小部分（1）：
-
同样先创建一个大的<div>，第小部分（1）的所有代码在此<div>中进行编写。图片同样采用element组件中的<el-image> require来引入，因第二部分图片下的文字较少，直接都写在<p>标签里了，按设计图的格式来排版，看图~
image.png
image.png
-
如何使3个div在同一行水平排列对齐呢？
使用css样式中display:inline-block属性，看图~
image.png
image.png
小部分（2）：
-
<div>的创建及布局一致。但区别在于这部分div里的文字增多、统一朝左对齐，并且4个单独的div要同一行水平排列对齐，如何实现了？
创建一个大的div，来包裹其子div，把相关的图片及文字引入设置完成。 使用css样式
中 display: table-cell属性，看图~
image.png
image.png
小部分（3）：
-
这部分只有一张图片和一个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）：
-
此部分由4组图片 + 文字组成，并水平排列对齐，看图~
使用相同的方法引入4组图片，给每多组片的宽度为22%均匀分布在div中，同时设置
css样式display:inline-block属性。文字部分采用 css样式display: table-cell属性。
image.png
image.png
image.png
第三部分：
- 底部一些简单的信息及备案的域名。
采用element组件中的<el-footer>，新建<span>标签，并填写相关文字，设置及css样
式即可。
