专栏首页HTML5学堂传统企业站开发 - 页面布局

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

前几期我们讲解了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),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一步步实现静态页面布局

    本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

    HTML5学堂
  • 浮动之后的那些事儿 - 清浮动操作

    本文内容概要: 1 上周作业讲解 2 浮动之后的特性 3 如何清浮动 4 实例操作 上周我们讲解了如何去实现页面的简单布局,用了三种基本的CSS选择器来控制标签...

    HTML5学堂
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 两个HTML,CSS布局实例

    今天首先仿照某公司页面只做了一个几乎一模一样,连距离都相同的页面。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T...

    二十三年蝉
  • 【CSS】378- [译]44个 CSS 精选知识点

    一个周五的晚上,闲来无事整理下自己的 github(经常做收藏党),今天打算都过一遍,发现一个 star很高的项目,里面有大量的 CSS 片段,而且标题很诱人,...

    pingan8787
  • 全响应式web前端开发

    本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载 ? Responsive web design (RWD) i...

    IMWeb前端团队
  • 常见的手写代码题集

    要求是 yield 后面只能是 Promise 或 Thunk 函数,详见 es6.ruanyifeng.com/#docs/gener…

    前端迷
  • 全响应式web前端开发

    结一老师之前有写过一篇从css角度去实现响应式的文章(下手响应式及断点设置分析),不过真正设计并实现一个全响应式网页(RWD),还需要从一开始的布局设计开始,并...

    IMWeb前端团队
  • (2019)[前端]面试题[6]:水平垂直居中方法

    如果已知子元素宽高度,那么transform: translate(width/2,height/2);一样的效果。

    无道
  • (2019)[前端]面试题[1]:CSS BFC是什么【BFC详解】

    BFC(Block Formatting Context)格式化上下文,是盒模型的一种渲染布局,简言之可以理解为 一个独立的容器,不受外部影响,不影响外部。

    无道

扫码关注云+社区

领取腾讯云代金券