传统企业站开发 - 模块开发

这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理,也懂得了该如何着手进行页面开发。但是上周的标签选择那篇文章当中,我们发现在实现页面中的某个模块的时候,对于标签的使用有很多种选择,所以今天我们就给大家举一个例子来讲解下具体模块开发是如何进行的。

本文内容概要:

1 模块分析&标签选择

2 模块结构搭建

3 模块样式处理

4 模块开发视频讲解

5 课后作业

一、模块分析&标签选择

如上图,页面的头部和导航我们在之前都已经完成了,但是如下图中的“学堂展示”模块,这个模块在具体制作上该如何进行的呢?

参照设计图,我们应该怎么把它实现出来,这时候我们要经历的第一步正好是我们上周说过的标签选择,这时我们有好多种方式来进行制作。最简单的就是把小模块分成上部和下部来制作,上部是标题和More链接,下部是几个展示内容的标题,分别是一个个div,里面包含着一个数据图img和一个标题文字,在右侧还有一个箭头。

上述的这种制作方式也是可以的,不过我们既然学习过了常用的标签,我们今天就带大家使用另外一种方式来制作。模块也一样分成上下两个部分,上部分的制作方式跟原来一样制作。但是下部分制作我们采用dl、dt、dd标签来制作。每一个展示行都是一个dl标签,在里面的数据图放在dt标签里面,文字标题链接放在dd标签里面。

二、模块结构搭建

我们使用了一种新的标签选择方式来制作这个模块,但是具体怎么做结构的搭建呢?这点我们看下面的代码就能够明白了,结构搭建代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>H5course</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
   <div class="wrap">
        <div class="header">
            <img src="images/logo.png" alt="" />
            <h1><a href="" title="HTML5学堂"></a>HTML5学堂——h5Course</h1>
        </div>
        <div class="nav">
            <a class="active-nav" href="" title="">首页</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
            <a href="" title="">H5学堂</a>
        </div>
        <div class="main">
            <div class="bigpic">
            </div>
            <div class="manage">
                <div class="com-black">
                    <h2>学堂展示</h2>
                    <a href="">More</a>
                </div>
                <div class="manage-list">
                    <dl>
                        <dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
                        <dd><a href="">学堂展示案例</a></dd>
                    </dl>
                    <dl>
                        <dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
                        <dd><a href="">学堂展示案例</a></dd>
                    </dl>
                    <dl>
                        <dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
                        <dd><a href="">学堂展示案例</a></dd>
                    </dl>
                    <dl>
                        <dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
                        <dd><a href="">学堂展示案例</a></dd>
                    </dl>
                    <dl>
                        <dt><a href=""><img src="images/logo.png" alt="" /></a></dt>
                        <dd><a href="">学堂展示案例</a></dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

三、模块样式处理

搭建好网页结构之后,我们需要处理的就是相应的样式,这时候我们发现下部分的每个展示条样式基本一致,只有最后一个展示行的底部没有边框,所以在处理的时候我们需要量取这个下部分的高度,然后书写超出隐藏,这样再相应的样式实现时,最后一行的边框就会超出父级而被隐藏掉。具体的代码实现如下:

<style type="text/css">
    .wrap {
        width: 980px;
        height:1046px;
        margin: 0 auto;
        background: url("images/index_bac.jpg") 0 0 repeat;
    }
    .header {
        height: 65px;
        border-top: 7px solid #000;
        background: #fff;
    }
    .nav {
        width: 892px;
        height: 34px;
        margin: 0 auto;
        padding: 4px 0 0 88px;
        background: url("images/nav_bac.jpg") 0 0 repeat-x;
    }
    .main {
        width: 960px;
        height: 817px;
        padding: 10px;
    }
    /*主体内容架构*/
    .bigpic {
        float: left;
        position: relative;
        width: 722px;
        height: 256px;
        margin-bottom: 9px;
        padding: 5px;
        background-color: #fff;
        border-radius: 3px;
    }
    .manage {
        float: right;
        width: 209px;
        height: 256px;
        margin-bottom: 9px;
        padding: 5px;
        background-color: #fff;
        border-radius: 3px;
        background-color: #fff;
        border-radius: 3px;
    }
    /*头部制作*/
    .header img {
        float: left;
        width: 65px;
        height: 65px;
        padding-left: 40px;
    }
    .header h1 {
        float: left;
        padding-left: 20px;
        font-size: 18px;
        line-height: 65px;
        /*字间距*/
        letter-spacing: 0.1em;
    }
    /*导航制作*/
    .nav a {
        float: left;
        height: 34px;
        padding: 0 15px;
        line-height: 34px;
        color: #fff;
    }
    .nav .active-nav, .nav a:hover {
        padding: 0 14px;
        border-left: 1px solid #ac1736;
        border-right: 1px solid #ac1736;
        background: url("images/nav_act_bac.jpg") 0 0 repeat-x;
    }
    /*学堂展示模块上部分制作*/
    .com-black {
        height: 28px;
        padding: 0 10px 0 25px;
        background: #303338 url("images/icon.png") 0 center no-repeat;
        line-height: 28px;
        color: #fff;
        border-radius: 3px;
    }
    .com-white {
        height: 28px;
        padding: 0 10px 0 25px;
        background: url("images/icon.png") 0 center no-repeat;
        line-height: 28px;
        border-radius: 3px;
    }
    .com-black h2 {
        float: left;
        height: 28px;
        font-weight: bold;
    }
    .com-black a {
        float: right;
        height: 28px;
        color: #fff;
    }         
    /*学堂展示模块下部分制作*/
    .manage-list {
        overflow: hidden;
        height: 224px;
        margin-top: 4px;
        padding: 0 4px 0 2px;
    }
    .manage-list dl {
        height: 44px;
        border-bottom: 1px dotted #333;
        background: url("images/arrow.png") right center no-repeat;
        line-height: 44px;
    }
    .manage-list dt {
        float: left;
        width: 42px;
        height: 34px;
        padding: 5px 0;
    }
    .manage-list dd {
        float: left;
        overflow: hidden;
        width: 136px;
        height: 44px;
        margin-left: 8px;
    }
    .manage-list dt a {
        display: block;
        height: 100%;
    }
    .manage-list dt img {
        display: block;
        width: 40px;
        height: 32px;
        border: 1px solid #000;
    }
    .manage-list dd a {
        display: block;
        height: 100%;
    }
</style>

对应的代码效果图如下:

四、模块开发视频讲解

为了让大家能够更好的掌握页面的开发,小编在这边给大家提供了一个HTML5学堂 - 利利录制的视频,由于受到各种因素的影响,视频的声音可能有时候不是很清晰,请大家谅解。

模块开发(上)

视频内容

五、课后作业

参照上述模块的制作方式,对比设计图,完成剩余模块的制作,网页的设计图效果如下:

HTML5学堂小编:祥辉(耗时6.5h),欢迎大家沟通交流~~~

下周我们将继续于周一为大家分享基础知识方面的HTML+CSS,下期的主要内容为:标签选择&单个模块的开发(二)。

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

原文发表时间:2016-06-20

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾老师の博客

手游的登陆流程研究

1133
来自专栏杨建荣的学习笔记

用脚本来讲一个技术生活的故事 (r9笔记第32天)

对于生活,用文字表达是一种非常好的方式,作为技术人,我决定使用一个脚本来映射技术生活中的一些小故事,也是在今天突然想到的。 对的,你没有看错,就是下面这个命令。...

3013
来自专栏DeveWork

WordPress中添加自定义评论表情包的方法(附三套表情包下载)

如果你知道的话,WordPress中的默认评论表情是非常丑陋的。难听点,如果一个不错的主题调用的是WordPress默认的表情包,那么这就成了这个主题的败笔。J...

21910
来自专栏Crossin的编程教室

在BAE上搭建discuz论坛

各位同学,好久不见。假期结束,我们的课程又要继续了。这几天持续高温,让人只想躲在空调房里吃西瓜,你的城市是不是也在火炉上烤着呢?不过我相信,大家学习编程的热情比...

31010
来自专栏小巫技术博客

高效Mac(三)面向程序员的交互设计神器:Framer Studio

583
来自专栏极乐技术社区

『教程』微信小程序--图片相关问题合辑

最近有注意到,很多同学在社区求助图片上传、加载、效果处理等相关的问题,这期专程做这样一个汇总供大家学习参考。 图片上传相关文章 微信小程序多张图片上传功能 微信...

63010
来自专栏听雨堂

JQuery笔记(三) jquery的用途

  近期jquery的学习经历了一些反复:开始时觉得非常强大,比js好用,和css关系密切,一句话:完美。等到把《锋利的JQuery》看完,又有点不知道用它来干...

2109
来自专栏开源FPGA

QuartusII13.0使用教程详解(一个完整的工程建立)

  好久都没有发布自己的博客了,因为最近学校有比赛,从参加到现在都是一脸懵逼,幸亏有bingo大神的教程,让我慢慢走上了VIP之旅,bingo大神的无私奉献精神...

1817
来自专栏微信小程序开发

微信小程序开发常见问题(五)

知晓程序员,专注微信小程序开发的程序员! 一、微信小程序审核未通过,怎么办? 小程序审核不通过的原因很多,微信会给出相应审核不通过 的原因。今天连胜老师给大家...

3097
来自专栏苍云横渡学习笔记

【day 17】python编程:从入门到实践学习笔记-基于Django框架的Web开发-设计样式和部署(一)

学习笔记目录 【day 1】python编程:从入门到实践学习笔记-安装、变量和简单数据类型 【day 2】python编程:从入门到实践学习笔记-列表以及其操...

3668

扫描关注云+社区