年年有"余"

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1310|回复: 0

[电子商务] 15、商城首页制作实战训练--类表格内容制作

[复制链接]
  • TA的每日心情
    倒霉
    2021-4-22 22:52
  • 签到天数: 369 天

    [LV.9]以坛为家II

    发表于 2016-2-25 16:48:55 | 显示全部楼层 |阅读模式
    1、无图不说话:
    01.jpg 02.jpg
    2、类似这种表格式的列表,在页面中多处出现,所以很有必要对其进行抽象出来;
    3、观察其样式一定是通过ul标签来实现,但有一列两列三列类似表格样式;
    4、由于展示内容为实际数据部分,因此数据格式是动态的;
    5、在li中通过固定的标签加类来完成结果展示,在li内部通过class来定位数据具体属于第几列
    6、如两列数据可通过格式化为<li><span class="col21"></span><span class="col22"></span></li>;
    7、这样即能知道是第几列,也能知道一共多少列,一般也就几种情况,如果2列、3列或1列;
    8、提取公共特征写成公共样式,特殊表现通过组合标签单独定义;
    9、以【知道分子】这个模块为例,中间表格部分html内容
    [HTML] 纯文本查看 复制代码
    <ul class="list_section">
            <li class="title">
                    <span class="col21">标题</span>
                    <span class="col22">状态</span>
            </li>
            <li>
                    <span class="col21"><a href="#"><span>[<em>美食</em>]</span>老北京一尊皇牛</a></span>
                    <span class="col22"><img src="img/ico1.gif"/></span>
            </li>
            <li>
                    <span class="col21"><a href="#"><span>[<em>美食</em>]</span>老北京一尊皇牛</a></span>
                    <span class="col22"><img src="img/ico2.gif"/></span>
            </li>
            <li>
                    <span class="col21"><a href="#"><span>[<em>美食</em>]</span>老北京一尊皇牛</a></span>
                    <span class="col22"><img src="img/ico1.gif"/></span>
            </li>
            <li>
                    <span class="col21"><a href="#"><span>[<em>美食</em>]</span>老北京一尊皇牛</a></span>
                    <span class="col22"><img src="img/ico2.gif"/></span>
            </li>
            <li>
                    <span class="col21"><a href="#"><span>[<em>美食</em>]</span>老北京一尊皇牛</a></span>
                    <span class="col22"><img src="img/ico2.gif"/></span>
            </li>
    </ul>
    [CSS] 纯文本查看 复制代码
    .list_section li{height: 27px; line-height: 27px; background: url('../img/dot.gif') no-repeat 5px center; padding-left: 14px;}
    .list_section li a {color: #333;}
    .list_section li a:hover { color: #d80000}
    .list_section li a span {color: #c3c3c3; margin-right: 5px;}
    .list_section li a em {color: #c75d61;}
    
    .list_section .title { background: none; text-align: center;color: #999;}
    .list_section li .col31 { width: 60%; float: left; }
    .list_section li .col32 { width: 20%; float: left; text-align: center; color: #d80000;}
    .list_section li .col33 { width: 20%; float: left; text-align: center; color: #999;}
    .list_section .title .col32{ color: #999;}
    
    .list_section li .col21 { width: 90%; float: left; }
    .list_section li .col22 { width: 10%; float: left; text-align: center; position: relative; top: 7px;}
    .side_section .list_section li { border-top: 1px dotted #dadada; }
    .section .list_section li { border-bottom: 1px dotted #dadada; }
    .side_section .list_section .title{ border-top: none; }
    .side_section .list_section {margin-bottom: 10px;}
    10、源代码下载:
    游客,如果您要查看本帖隐藏内容请回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2021-6-18 20:52 , Processed in 1.159654 second(s), 25 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

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