移动端H5各种各样的列表的制作方法(三) by FungLeo

移动端H5各种各样的列表的制作方法(三) by FungLeo

前情回顾

在上一篇博文《移动端各种各样的列表的制作方法(二)》中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入.

如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容.

带小图标的列表

上面两章,我们做了一些普通的列表.而在移动端H5中,我们经常会做一行一个小图标的列表.这个DEMO,我们就来制作这种类型的列表.示例如下图所示.

这里我就不使用小图标了,画一个圆圈圈代替一下.

html代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

<title>list 1</title>

<link rel="stylesheet" href="../style/style.css">

</head>

<body>

<div class="list_1">

    <ul>

        <li><a href=""><i class="ico ico_1"></i>这是一个列表1</a></li>

        <li><a href=""><i class="ico ico_2"></i>这是一个列表2</a></li>

        <li><a href=""><i class="ico ico_3"></i>这是一个列表3</a></li>

        <li><a href=""><i class="ico ico_4"></i>这是一个列表4</a></li>

        <li><a href=""><i class="ico ico_5"></i>这是一个列表5</a></li>

        <li><a href=""><i class="ico ico_6"></i>这是一个列表6</a></li>

        <li><a href=""><i class="ico ico_7"></i>这是一个列表7</a></li>

        <li><a href=""><i class="ico ico_8"></i>这是一个列表8</a></li>

    </ul>

</div>

</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

这里的html代码和前面的例子就不太一样了.这里我们加了一个i标签来制作图标.给每一个i标签加上不同的class是为了订制不同的图标.

SASS代码

.list_1 {

    ul {padding-left: 1.6rem;}

    li {

        border-bottom: 1px solid #ddd;padding-right: 1.6rem;

        a {

            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;

            background:url("../image/icon_goto.png") right center no-repeat;

            background-size: auto 1.4rem;

            padding-left: 3rem;

            position: relative;

        }

        .ico {

            display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: 0;top: .8rem;

            background: #f60;border-radius: 50%;

        }

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这个例子当中,我们采用了定位布局的方式.如果您对定位布局不是很了解,请阅读我的博文《Css 详细解读定位属性 position 以及参数》.

此外,由于每个图标都得不一样,所以我在html中给每一个i标签都加上了不同的class方便在CSS中调用不同的图标图片.也就是说,我们使用背景图片的方式来制作图标.

SASS是支持循环输出的,因此,只需要一个循环代码,就可以将所有的图标都制作OK了.这里呢,也需要使用到background-size来处理图标,关于background-size的使用,本文的上一章中有阐述.这里不再赘述.

SASS循环,建议在sass入门 - sass教程 官方网站查看实现方法.这里不再过多的阐述了.

带图标的列表,但是分割线要和文字对齐.

首先,我们来看效果图:

这个列表和上面的列表乍一看没什么不同.但仔细看就会发现,这个分割线是和文字对齐,而不是和图标对齐的.

不要怪我事儿逼,设计师就是这么设计的.如果没有做到的话,设计师很生气.

html代码和上面的DEMO是一致的.这里不再重复

话不多说,调整css

SASS代码

.list_1 {

    ul {padding-left: 4.6rem;}

    li {

        border-bottom: 1px solid #ddd;

        padding-right: 1.6rem;

        position: relative;

        a {

            display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;

            background:url("../image/icon_goto.png") right center no-repeat;

            background-size: auto 1.4rem;

        }

        .ico {

            display: block;width: 2.4rem;height: 2.4rem;position: absolute;left: -3rem;top: .8rem;

            background: #f60;border-radius: 50%;

        }

    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

原来在a上的左填充,给加到ul上面去了.这样,就可以压缩li来达到边线缩小的效果. 
而在图标的处理上,left值采用了负数,给移到ul的填充上面去.就达到设计效果了.

小结

本章没有着重去讲SASS的循环如何处理,这些都是技术性的问题,参考一下SASS的教程,很快就能学会的.

我这里假设是使用背景图片的方法,来实现小图标的.当然,现在有很多种方法来实现小图标的制作,比如CSS图标,比如字体图标.这些实现方法各有优劣,不是我今天考虑的问题.

本章着重讲了以下几点:

  1. 定位布局.这一点很重要.
  2. 灵活的使用各种元素,使用内填充或者外填充,来实现你想要的效果.
  3. 使用不同的class名,来实现不同的小图标.

附录

移动端H5的一些基本知识点总结 
sass入门 - sass教程 官方网站 
CSS预编译技术之SASS学习经验小结 
移动端系列博文基础reset.scss和mixin.scss

移动端各种各样的列表的制作方法(一) 
移动端各种各样的列表的制作方法(二)

本文由FungLeo原创,转载请保留版权申明,以及首发地址: http://blog.csdn.net/FungLeo/article/details/50888014

 
顶
0

踩
0

h5做列表 水平分割的更多相关文章

  1. H5做的商城客户端，效果很不错

    H5做的商城客户端,效果很不错 H5做的商城客户端,效果和android原生客户端没多大区别,现在h5是越来越火了, android的小伙伴们又遇到一个新的挑战了.本项目只能学习一下WebViewAc ...

  2. ccc数据库的水平分割和垂直分割

    在数据库操作中,我们常常会听说这两个词语:水平分割和垂直分割.那么到底什么是数据库的水平分割,什么是数据库的垂直分割呢?本文我们就来介绍一下这部分内容. 1.水平分割: 按记录进分分割,不同的记录可以 ...

  3. h5做的app和原生app的区别

    之所以说h5做的app和原生app的区别,是因为一位博友的问题: 随着 h5 的普及,是不是不再需要开发 app ? 我的回答是要分业务需求,分场合而定. 比如现在的微信小程序这么流行,甚至也取代了不 ...

  4. SilverLight：布局（2）GridSplitter（网格分割）垂直分割、水平分割

    ylbtech-SilverLight-Layout: 布局(2)GridSplitter(网格分割)垂直分割.水平分割 A, Splitter(分割)对象之 GridSplitter(网格分割)1: ...

  5. h5做app和原生app有什么区别？

    h5做app和原生app有什么区别? 一.总结 一句话总结: 二.h5做app和原生app有什么区别? 普通的HTML5技术与原生技术相比,有跨平台.动态.开放.直达二级内容页面等特点,但却在性能.工 ...

  6. mysql分表之水平分割

    一.背景 老大安排要对某张大容量表进行分割,根据年份分割成多张表. 二.水平分割 水平拆分是指数据表行的拆分,表的行数超过百万行时,就会变慢,这时可以把一张的表的数据拆成多张表来存放. 定义规则分表后 ...

  7. 使用vuex做列表数据过滤

    功能需求 展示一个表格,表格包含选项有" 姓名 年龄 是否显示"三个列表项 是否显示列表项是可操作开关,点击切换打开/关闭 将表格中开关为打开状态的列表项,在另一个表格中显示 需求 ...

  8. JS和H5做一个音乐播放器，附带源码

    http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ 效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 ...

  9. h5页面列表滚动加载数据

    h5列表滚动加载数据很常见,以下分享下今天做的案例: 前言 这个效果实现需要知道三个参数 1. scrollTop -- 滚动条距离顶部的高度 2. scrollHeight -- 当前页面的总高度( ...

随机推荐

  1. Ramdisk虚拟内存盘，Swap分区

    虚拟内存盘是通过软件将一部分内存(RAM)模拟为硬盘来使用的一种技术.相对于直接的硬盘文件访问来说,这种技术可以极大的提高在其上进行的文件访问的速度.但是RAM的易失性也意味着当关闭电源后这部分数据将 ...

  2. JavaScript之函数，词法分析，内置对象和方法

    函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式有点区别. // 普通函数定义 function f1() { console.log("Hello wo ...

  3. C#取整函数Math.Round、Math.Ceiling和Math.Floor

    1.Math.Round:四舍六入五取偶 引用内容 Math.Round(0.0) //0Math.Round(0.1) //0Math.Round(0.2) //0Math.Round(0.3) / ...

  4. 30.纯 CSS 创作一个晃动的公告板

    原文地址:https://segmentfault.com/a/1190000014983030 感想: 绝对定位+动画 HTML代码: <div class="signboard&q ...

  5. tomcat jvm 内存调优 适用于 JDK 6 & 7

    参考:https://blog.csdn.net/m0_37327416/article/details/76185051 1.jvm内存管理机制: 1)堆(Heap)和非堆(Non-heap)内存 ...

  6. docker利用Dockerfile来制作镜像

    在前面的例子(docker tomcat镜像制作)中,我们从下载镜像,启动容器,在容器中输入命令来运行程序,这些命令都是手工一条条往里输入的,无法重复利用,而且效率很低.所以就需要一 种文件或脚本,我 ...

  7. javascript中的立即执行函数(function(){…})()

    javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...

  8. [记录] CSS 左边元素定长，右边元素获得剩余长度

    情景:左边元素定长,右边元素获得剩余长度 1. 左边设置浮动,右边元素宽度auto,可以不设置,默认auto,然后设置margin-left:左边元素宽度 <ul class="ent ...

  9. Appium -选择、操作元素4

    webvie的测试 混合(Hybrid)应用 一部分是原生界面和代码,而一部分是内嵌网页 比如微信.支付宝 内嵌了一个浏览器内核,由浏览器内核实现的 安卓应用中的内嵌的展示网页内容的模块,我们称之为w ...

  10. HashMap怎样解决碰撞问题

    碰撞:HashMap运用put方法存储多个元素时,计算得出相同的hashCode,在put时出现冲突. 处理:利用“拉链法”处理HashCode的碰撞问题:当我们将键值对传递给put方法时,他调用键对 ...