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

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

本文内容概要:

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 条评论
登录 后参与评论

相关文章

来自专栏木头编程 - moTzxx

找到一款免费的网页天气插件

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

57720
来自专栏星流全栈

微信小程序原理

91730
来自专栏古时的风筝

最简单的数据抓取教程,人人都用得上

这么简单的工具当然对环境的要求也很简单了,只需要一台能联网的电脑,一个版本不是很低的 Chrome 浏览器,具体的版本要求是大于 31 ,当然是越新越好了。目前...

60880
来自专栏架构师之路

Google-优秀移动站点设计10招

Google-优秀移动网站设计10招 1)添加一个醒目的搜索条:在移动终端上,人们希望能够快速找到自己需要的东西 2)把大表格拆分成小块:别搞一个长长的表格页面...

29330
来自专栏优启梦

全平台通用评论神器一键自动填写昵称、邮箱和网址

我们在访问网站时,看到一篇文章,想发表评论时,是否经常要在评论框里手动填写自己的昵称、E-mail 和网址等留言评论信息?重复的打字会让我们感到很乏味。 为了解...

470150
来自专栏编程

vuejs开发H5页面总结

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开...

49290
来自专栏醉程序

网页嵌入Bilibili HTML5视频播放

1.4K10
来自专栏快乐八哥

Single Page Application概览

第一点 :传统web应用遇到的2个问题 1.User Experience 用户体验 2.Performance 性能问题 SPA如何解决这些问题的: 不重新加...

19570
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

快速创建React Native App

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

45540
来自专栏Youngxj

全平台通用评论神器一键自动填写昵称、邮箱和网址

20230

扫码关注云+社区

领取腾讯云代金券