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

前几期我们讲解了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学堂公众号。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-05-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小白课代表

更新|PC截图工具的最佳选择。

说到截图,最常用的可能就是QQ自带的截图功能了,简单流畅能满足我们的日常需求,依附于QQ,没有特殊的需求甚至不需要其他的截图软件。

1330
来自专栏Alan's Lab

Angular2 返回时组件生命周期函数不被调用的解决方法

这两天使用 Angular2 遇到的一个 @angular/router 的 bug:

1574
来自专栏Android小菜鸡

自定义组件——TitleView

  TitleView是一个常用的顶部标题栏组件,操作简单,可以快速搭建,并实现统一管理标题栏的目的。   采用建造者模式,支持快速构建back按钮、标题名、...

903
来自专栏自动化测试实战

船长带你看书——《selenium2 python 自动化测试实战》(2)

3827
来自专栏前端架构与工程

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translat...

2106
来自专栏ytkah

微信公众平台编辑器可以剪裁和替换正文图片了

  之前微信公众平台后台编辑器上线封面图裁剪功能,时隔近两个月的今天,公众平台编辑器正文图片也可以剪裁和替换了,简单的图片裁剪编辑小编们再也不用放到ps等作图软...

3405
来自专栏Youngxj

自适应导航网页源码

1K2
来自专栏ionic3+

【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

1042
来自专栏静默虚空的博客

详谈如何定制自己的博客园皮肤

如果你仅仅想原封不动的使用本人的定制皮肤,而不想了解实现细节。那么你只需要完成以下几个步骤即可,后面的章节可以忽略。

4270
来自专栏小俊博客

通过JS显示网站运行时间

1544

扫码关注云+社区

领取腾讯云代金券