年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2042|回复: 0

[电子商务] 9、商城首页制作实战训练--video模块实现

[复制链接]
  • TA的每日心情
    奋斗
    2022-12-13 21:26
  • 签到天数: 371 天

    [LV.9]以坛为家II

    发表于 2016-2-23 10:02:07 | 显示全部楼层 |阅读模式
    本帖最后由 Sian 于 2016-2-23 15:05 编辑

    1、先看效果图:
    QQ20160223-0.png
    2、整体分为上中下三个部分:title,video,video_list;
    3、title部分设计成一个h2标签,后面图标为设置了偏移量的h2标签,调整文字样式;
    4、中间video暂时用图片代替;
    5、video_list为ul+li的布局,li前面红色小点为li的背景,文字首行缩进;
    6、ul设置padding-left将li整体右移,然后设置ul背景
    7、部分CSS代码:
    [CSS] 纯文本查看 复制代码
    .video{margin-bottom: 13px;}
    .video_title{height: 42px; line-height: 42px; background: url('../img/video_bg.gif') no-repeat 105px 10px; font-size: 18px; color: #d90000}
    .video_list{padding-left: 75px; height: 78px; background: url('../img/video_bg.gif') no-repeat 3px -47px;}
    .video_list li{text-indent: 14px;background: url('../img/dot.gif') no-repeat 5px center; line-height: 20px;}
    .video_list a{color: #4d4d4d;}
    .video_list a:hover{text-decoration: underline;}
    8、部分html代码
    [HTML] 纯文本查看 复制代码
                                    <div class="section fl">
                                            <h2 class="video_title">WHAT' HOT</h2>
                                            <div class="video"><img src="img/play_bg.gif" /></div>
                                            <ul class="video_list">
                                                    <li><a href="">现场实录:杭州机场国际系统的崩溃</a></li>
                                                    <li><a href="">现场实录:杭州机场国际系统的崩溃</a></li>
                                                    <li><a href="">现场实录:杭州机场国际系统的崩溃</a></li>
                                            </ul>
                                    </div>
    9、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    手机版|小黑屋|Archiver|iOS开发笔记 ( 湘ICP备14010846号 )

    GMT+8, 2024-3-19 10:31 , Processed in 0.054843 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表