传统企业站开发 - 模块开发(二)

上周我们讲解了页面模块的制作,详情可见:传统企业站开发 - 模块开发,我们到底如何更好的实现模块的制作,小编这边继续给大家举一个例子来进行讲解。那今天我们为大家讲解下页面中的信息列表模块又是如何制作的。

本文内容概要:

1 模块分析&标签选择

2 列表模块结构搭建

3 实现列表模块制作

4 模块开发视频讲解

5 课后作业

一、模块分析&标签选择

如上图,是我们之前那个页面中的信息列表模块,我们发现制作这个模块并不难,只是对于底部的那条虚线是如何消失的有点疑惑。

在页面制作开发中,我们可能会有很多种方法来进行实现,例如:单独给最后一条列表信息设置一个类名。这个方法应该是大家会想到的最简单的办法,那不禁要问了,难道我们真的是这样去做的吗?答案当然是否定。

既然不是用添加类名处理,那到底要怎么做呢?先给大家普及一个知识点吧,我们知道类似于这种新闻标题在页面中的展示是会经常发生变化的,那这个变化正是我们后台数据的一个体现(实时性数据交互)。倘若这时候我们后台人员不知道我们页面可以展示几条消息(当前页面展示的是6条),而后台数据传了7条过来,我们就会很尴尬的发现,如果是用类名去处理这条边框的话,我们的第6条底部边框是消失了,但是第7条仍然会有一条边框存在,所以这时候这样的操作对于页面的扩展性就显得非常的不好。

那为了很好的处理这块内容,小编今天为大家介绍了另外一种方法,一起来看看吧!

二、列表模块结构搭建

首先第一件事仍然是结构的搭建,这点我们直接选用ul~li来制作即可,结构搭建代码如下:

<!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">
        </div>
        <div class="nav">    
        </div>
        <div class="main">
            <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 class="com-black">
                    <h2>最新动态</h2>
                    <a href="">More</a>
                </div>
                <ul>
                    <li>
                        <a href="">
                            <strong>HTML5学堂是一个便于大家学习的网站</strong>
                            <span></span>
                            <em>2016-06-24</em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <strong>HTML5学堂是一个便于大家学习的网站</strong>
                            <span></span>
                            <em>2016-06-24</em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <strong>HTML5学堂是一个便于大家学习的网站</strong>
                            <em>2016-06-24</em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <strong>HTML5学堂是一个便于大家学习的网站</strong>
                            <em>2016-06-24</em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <strong>HTML5学堂是一个便于大家学习的网站</strong>
                            <em>2016-06-24</em>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <strong>HTML5学堂是一个便于大家学习的网站</strong>
                            <em>2016-06-24</em>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="contact">
            </div>
        </div>
        <div class="copyright">
        </div>
    </div>
</body>
</html>

三、实现列表模块制作

结构实现了之后,我们要开始书写相应的样式了,这时候我们会发现还是跟以前一样书写,唯一要注意的是对于列表项信息的处理,这时候我们需要对父级设置overflow:hidden,然后利用margin负值进行实现,具体的代码实现如下:

<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;
    }
    /*尾部*/
    .copyright {
        width: 960px;
        height: 60px;
        margin: 0 auto;
        padding-top: 28px;
        background-color: #044b55;
    }
    .news {
        float: left;
        width: 722px;
        height: 214px;
        padding: 5px;
    }
    .bigpic,
    .manage,
    .message,
    .about,
    .ensure,
    .boater,
    .goods,
    .news,
    .contact {
        background-color: #fff;
    }
    /*学堂展示模块上部分制作*/
    .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;
    }
    /*最新动态*/
    .news ul {
        overflow: hidden;
        margin: 6px 0 -1px 0;
        padding: 0 8px;
        height: 173px;
    }
    .news li {
        float: left;
        width: 100%;
        height: 28px;
        border-bottom: 1px dotted #333;
        line-height: 28px;
        background: url("images/icon.png") -11px 0 no-repeat;
    }
    .news li a {
        display: block;
        padding-left: 17px;
        height: 28px;
    }
    .news li em {
        float: right;
        padding-right: 4px;
    }
    .news li strong {
        float: left;
        overflow: hidden;
        height: 28px;
        font-weight: normal;
        /*max-width: 585px;*/
        /*_width: 585px;*/
    }
    .news li span {
        float: left;
        width: 24px;
        height: 16px;
        background: url("images/hot.png") 0 4px no-repeat;
    }
</style>

对应的代码效果图如下:

四、模块开发视频讲解

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

模块开发(下)

视频内容

五、课后作业

参照原始图,完成整个页面的构建,制作的参考效果如下:

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

下周我们将继续于周一为大家分享基础知识方面的HTML+CSS,下期的主要内容为:SEO与后台考虑

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

Mockplus演示和分享原型设计的8种方式

Mockplus目前是国内比较流行的原型设计工具,功能上,相比Axure不算全面和强大,但在不少功能上有它独到之处。 Axure有个比较让人头疼的地方,就是对于...

3566
来自专栏青枫的专栏

Github上如何在组织中的代码仓库里,为组织中的小组创建Pull Request(拉取请求/下载请求)?

如何在组织中的代码仓库里,为组织中的小组创建Pull Request(拉取请求/下载请求)?   当你在一个更大的组织中工作时,良好的创建Pull Reque...

533
来自专栏木子昭的博客

Chrome与vim双神器融合, vimium完全攻略

2474
来自专栏刘君君

Rest Notes-REST架构的元素

1325
来自专栏有趣的django

Django+xadmin打造在线教育平台(十)

代码 github下载 十四、xadmin的进阶开发 14.1.权限管理 (1)用户权限 超级用户拥有所有权限,其它添加的用户默认没有任何权限 进后台添加一个...

65610
来自专栏竹清助手

深入理解什么是RESTful API ?

越来越多的人开始意识到,网站即软件,而且是一种新型的软件。   这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(hig...

582
来自专栏疯狂的小程序

无痛的微信小程序开发体验

在小程序之初便开发应用了,现在小程序的开发也越来越成熟了,完善了很多的API、组件、架构等,社区也由原来的零星点点到现在的不大不小,但也算是有了,期间也诞生了很...

3365
来自专栏Django中文社区

前言

Django 是使用 Python 编写的一个开源 Web 框架,可以用它来快速搭建一个高性能的网站。 Django makes it easier to b...

2716
来自专栏Flutter入门到实战

深入理解什么是RESTful API ?

越来越多的人开始意识到,网站即软件,而且是一种新型的软件。   这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(hi...

942
来自专栏移动开发之家

移动端跨平台开发的深度解析

跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

662

扫码关注云+社区