要求：实现下图的布局
项目经过
项目准备
一、编码准备：首先建立好相关项目文件夹
二、分析网页：要实现的网页构成主要分为三大板块、六个盒子，分别是导航栏、轮播图、页面详情。
具体划分如下：
导航栏实现
1）导航栏的实现观察导航栏结构，导航栏主要分为三个板块，分别是导航栏顶部的红色线条，左边的logo部分和右边的具体导航部分，右边具体导航部分会有hover效果。 根据分析，首先设置一个盒子，属性为命名为nav。导航栏nav的大致层次为文字和logo两个盒子封装。
2）关于导航栏的文字部分，由于这个部分除了文字不重复外，所需要的属性值，动画效果都相同，本部分使用相同的li标签进行导航栏文字的设置。在li标签外，可以将这写标签看作是列表，所以将这些li标签使用ul标签包裹起来，放入div中，在导航栏文字中，需要实现当鼠标移上去，相应板块变色的hover动画效果，定位到相应位置，实现hover效果的代码如图：
最终效果如图：
bannar实现
Banner主要由图片，文字和翻页形状三部分组成，banner部分中，由于展播图由两张图片组成，且使用float容易塌陷，因此此处使用flex布局实现，将图片定位好后，还需要定位文字的位置，由于文字是固定在某一个地方不变的，所以文字采用绝对定位方式，同样，展播按钮也采用绝对定位的方式，具体定位样式如图：
版心实现
经过观察，营业范围主要分为两个主题部分，分别标题居中部分和两栏标题部分，标题部分直接使用h2和h3标签实现，由于两栏标题部分形式较为规范，直接使用table样式，将文字和图片装入table中；
根据原图展示，项目案例板块大致分为三个大方面，分别是文本、图片排列，和翻页效果。文本包含两排，由于文字的大小各不相同，所以用h2，h3标签来表示文本的不同大小；
新闻板块的主要内容板块分为两栏布局，左边板块为新闻标题和详情，右边板块为介绍和留言。设置左边盒子的右边框，实现中间竖线的布局，右边板块分为三个盒子，中间文字颜色改变利用h3和span标签的拼接实现，通过拼接来改变颜色。
结尾部分实现
结尾部分主要分为浅黑色的业务详情和深黑色的备案号，首先把业务详情和备案号分别用两个div盒子封装，业务详情又包含5个不同的div盒子，这5个div盒子利用flex的justify-content进行设置。
其他效果
在项目案例和结尾部分，都采用不同的颜色作为背景颜色，将项目案例和新闻动态装入另一个div盒子中，改变背景颜色，结尾部分原理类似。 在style样式中写入重置样式表、清除列表符号、清除下划线、清除倾斜、加粗等各种样式，并设置页面宽度和版心宽度。
