传统企业站开发 - 页面布局

HTML5学堂

发布于 2018-03-13 11:28:05

1.2K0

前几期我们讲解了HTML+CSS的基本知识点，也带着大家分析过一些案例。从简单的页面结构到页面布局的实现，再到页面的优化。我们学习到的东西挺多的，但是在实战开发中如何去应用它仍然有很多不理解的地方，所以今天这篇文章就以项目的首页制作来带着大家把之前学习过的知识点运用起来。

本文内容概要：

1 页面的开发流程

2 页面效果展示

3 项目首页的基本布局

4 课后总结

5 课后作业

1 页面的开发流程

——>PSD图的分析

——>基本的前期准备

——>页面的基本布局（一级布局与二级布局）

——>针对公共模块进行开发

——>具体模块开发

——>页面的优化

2 页面效果展示

在开始制作之前，我们先来看看要做的项目首页长什么样，请往下看！

上面的这张图就是我们今天需要完成的内容，在制作之前需要提醒大家一点，那就是之前讲解的东西还不足以完成整个页面的实现，所以我们主要去实现整个页面的大框架布局即可（文字和图片的样式处理后期的文章会进行讲解）。

接下来我们就不再讲解别的了，与大家一起来用代码实现上图吧！~~~

3 项目首页的基本布局

首先需要与大家说明一点的是页面的制作我们是参照页面的PSD图来进行实现的，也就是说小编后面用到的数据是通过把PSD图放到在PS软件里面测量出来的，这一点也是我们前端开发工程师需要严格遵守的规则——保证实现出来的页面是对PSD图的100%还原（1px不差）。

页面的一级布局

参照PSD图，分析页面制作的思路。看上图，我们会发现，页面呈现出来的效果层次分明，分别由头部、导航栏、页面主体、尾部等构成。所以接下来我们的代码实现就比较方便了。一起看下面的代码吧！

页面的结构代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
    <div class="wrap">
        <!-- 头部 -->
        <div class="header"></div>
        <!-- 导航 -->
        <div class="nav"></div>
        <!-- 页面主体 -->
        <div class="main"></div>
        <!-- 尾部 -->
        <div class="copyright"></div>
    </div>
</body>
</html>

相对于页面开发，我们会把CSS样式做成外部引入，即我们上面结构代码里面引入的index.css文件，所以CSS代码如下：

/* layout 书写注释，方便后期查阅*/
/*layout start*/
.wrap {
    width: 980px;
    height: 1046px;
    margin: 0 auto;
    background: black;
}
.header {
    height: 65px;
    border-top: 7px solid #000;
    background-color: yellow;
}
/*导航栏制作*/
.nav {
    height: 34px;
    padding: 4px 0 0 88px;
    background-color: green;
}
.main {
    width: 960px;
    height: 818px;
    padding: 10px;
}
.copyright {
    width: 960px;
    height: 60px;
    margin: 0 auto;
    padding-top: 28px;
    background-color: #044b55;
}

对应的效果展示如下：

在上面的代码文件中，我们完成了页面主体框架的搭建。接下来我们要考虑的就是模块布局的制作了。

页面的二级布局

完成页面一级布局之后，我们需要处理的就是模块部分的布局了，一起来写一写吧~~~

页面的结构代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
    <div class="wrap">
        <!-- 头部 -->
        <div class="header">
        </div>
        <!-- 导航 -->
        <div class="nav">
        </div>
        <!-- 页面主体 -->
        <div class="main clearfix">
            <div class="bigpic"></div>
            <div class="manage">
            </div>
            <div class="message"></div>
            <div class="about indexcom">
            </div>
            <div class="ensure indexcom">
            </div>
            <div class="boater indexcom">
            </div>
            <div class="goods indexcom">
            </div>
            <div class="news">
            </div>
            <div class="contact">
            </div>
        </div>
        <!-- 尾部 -->
        <div class="copyright">
        </div>
    </div>
</body>
</html>

对应的CSS样式如下：

.wrap {
    width: 980px;
    height: 1046px;
    margin: 0 auto;
    background: black;
}
/*页面主体*/
.main {
    width: 960px;
    padding: 10px;
}
/******公共模块布局******/
/*头部*/
.header {
    height: 65px;
    border-top: 7px solid #000;
    background-color: yellow;
}
/*导航*/
.nav {
    height: 38px;
    background-color: green;
}
/*尾部*/
.copyright {
    width: 960px;
    height: 60px;
    margin: 0 auto;
    padding-top: 28px;
    background-color: #044b55;
}
/******具体模块布局******/
.bigpic {
    float: left;
    width: 722px;
    height: 256px;
    margin-bottom: 9px;
    padding: 5px;
}
.manage {
    float: right;
    width: 219px;
    height: 266px;
    margin-bottom: 9px;
}
.message {
    float: left;
    width: 100%;
    height: 35px;
    margin-bottom: 9px;
}
.about {
    float: left;
    width: 276px;
    height: 266px;
    margin-bottom: 9px;
}
.ensure, 
.boater, 
.goods {
    float: left;
    width: 219px;
    height: 266px;
    margin: 0 0 9px 9px;
}
.news {
    float: left;
    width: 732px;
    height: 224px;
}
.contact {
    float: right;
    width: 219px;
    height: 224px;
}
.bigpic,
.manage,
.message,
.about,
.ensure,
.boater,
.goods,
.news,
.contact {
    background-color: #fff;
}

对应的效果展示如下：

写到现在，我们会发现整个页面的基本布局已经基本完成，接下来需要制作并完善的就是每个模块中图片、文字内容等的处理了，那这些我们会在后期的文章再来给大家做讲解。

页面的兼容性测试

测试IE系列、Chrome、Firefox等浏览器

Tips：制作页面的时候，需要及时的测试页面的兼容性，切忌放到最后再进行测试；

4 课程总结

在制作页面之前，我们需要准备大量的前期工作，比如：reset文件的基本调整、典型的布局选用和基本的布局操作等。如果想具体了解HTML5项目开发备忘录的请发送“备忘录”到HTML5学堂公众号。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2016-05-30，如有侵权请联系 cloudcommunity@tencent.com 删除

html

css

本文分享自懂点君微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

css

登录后参与评论

0 条评论

热度