网页布局的综合应用

一、创建项目和文件。

  在开发工具visual studio code打开cjh376文件夹，在创建的项目中创建images、css和img文件夹。

二、引入外部文件。

在index.html中利用link标签引入外部css文件。

 

三、编写代码。

1.头部

观察目标网页，发现头部由logo和导航栏两部分组成。用两个浮动盒子即可完成。使用 ul li 创建一个无序列表，即为一级导航栏，文字处于顶部。在一级导航栏中创建二级菜单栏。

 

 

 

 

2.banner部分。

Banner主要由文案、商品图、模特、背景四项中的至少一项组成。

 

 

3.主体部分。

（1）介绍好信网络部分。

有两个大盒子构成，一个是纯文字，另一个是文字加图标。

 

 使用.cg:hover{background: #2293f5;}让鼠标悬停变成蓝色。

（2）成功案例部分。

由大标题、四张图片和图片介绍组成。

 

 

 

 

4.底部。

底部由二维码、在线留言框和联系我们三个部分组成。

 

 运行结果为：

 四、总体样式