- 掌握盒子模型属性、Flex布局等CSS属性在网页布局案例中的应用方法和技巧。
- 掌握HTML常用标签在页面布局中的应用。
- 掌握PS切片工具在网页整体布局中的应用。 实验原理（技术） | 1.利用PS完成页面图片的切片。 2.利用HTML标签完成页面各个部分的结构。 3.利用CSS相关属性完成页面结构布局。 1.在开发工具（Webstorm或者HBuilder）创建项目。项目目录正确，至少应该有 index.html 文件，images文件夹和css文件夹。 2.在css文件夹中创建style.css文件。
3.在index.html中利用 link 标签引入外部css文件。
4.在index.html中，使用恰当的标签完成页面HTML布局。页面整体应该分为头部、banner、主体以及底部等部分。各个部分结构采用适当的HTML标签完成。
（1）头部作出导航列表，将首页、走进我们、服务产品、项目提示、新闻动态、企业文化、联系我们水平排列，并对其实现hover点击时背景为红色
border-top : 2px red solid;画出红色的实线用overflow: hidden; 用于嵌套的盒字margin合并消除影响 用margin: 30px auto; 嵌套的子盒子margin合并 用line-height: 42px; 让文字水平居中，行高给父亲，行高可以继承 对navbar li a标签进行 display: block; 行内元素给高需要转化为行内块 padding: 0 15px;行内元素不给上下内边距，左右给内边距 text-decoration: none;消除自带下划线格式
（2）banner部分插入图片并插上广告语“专心关注您的生活与工作，把繁杂的事情交给我们”
将两张图片放置在不同的盒子中，对盒子position: absolute; 进行绝对定位控制图片的位置,text-align:left向左对齐，background-sizeBackground-size是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。Transform:tteanslate();控制盒子的位置。
实现效果
（3）通过p标签按要求排列各物业项目，将每一个图片放一个盒子进行css的设置，控制绝对位置，用font-size设置字体的大小。
对于四个小红叉在CSS中进行设置，transform: rotate(35deg); 进行旋转设置小叉的角度，用right: 9px; 设置top和right使图像在20*20框中居中。
实现效果：
（4）插入项目案例各地点图片并进行排列并实现灰色背景实现效果：
（5）新闻动态部分的介绍并实现灰色背景：将格式不同的设置为不同的盒子，由于六排内容三排格式相同，则将一三五排新闻放进一个位置设置固定的行高，将二四六的新闻内容放进一个盒子，设置固定行高，设置一定大小的字体。 实现效果：
6）底部部分字体设置为白色，实现并加上黑色背景：
实现效果： | |
6）底部部分字体设置为白色，实现并加上黑色背景：
实现效果： | |
