专栏首页HTML5学堂传统企业站开发 - 模块开发(二)

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

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

本文内容概要:

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),作者:HTML5学堂

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理...

    HTML5学堂
  • CSS3文本阴影 text-shadow

    HTML5学堂:CSS3文本阴影是给文本添加阴影效果,而在CSS3文本阴影在CSS以及存在了,只是CSS2.1的时候不用了,但是在CSS3又重新使用了,这是因为...

    HTML5学堂
  • 2016.07 第一周 群问题分享

    HTML+CSS 如何用CSS实现一个元素footer一直贴在浏览器底部 2016.06.27~2016.07.01 核心概念 margin-bottom负值、...

    HTML5学堂
  • JavaScript 鼠标悬停图片,显示隐藏文本

    当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

    Nian糕
  • SpringBoot-10-之初阶整合篇(下)

    张风捷特烈
  • 传统企业站开发 - 模块开发

    这几周我们接连讲解了如何实现一个页面的搭建,从最初的各种分析,标签选择,一直到可以实现页面的整体布局。这一系列的知识点讲解中,我们熟知了对一个网页PSD图的处理...

    HTML5学堂
  • 慕课网javascript 进阶篇 第十章 编程练习

    大当家
  • CSS:模拟Windows窗口及DIV居中

      利用CSS,尝试做了一个仿Windows窗口的横向纵向均居中的Div效果:   以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3...

    小李刀刀
  • Javascript+CSS实现影像卷帘效果

    用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一...

    lzugis
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习

扫码关注云+社区

领取腾讯云代金券