精华内容
下载资源
问答
  • H5入门7:CSS设置背景和列表样式 CSS背景样式 CSS背景样式

    H5入门7:CSS设置背景和列表样式

    CSS背景样式
    1. CSS背景样式
      在这里插入图片描述

    2. 背景颜色
      在这里插入图片描述
      注意:背影颜色不包含外边距margin

    3. 背景是设置在最下层的,默认是transparent

    4. background-image:背景图片

    在这里插入图片描述

    1. background-repeat:图片重复显示

    在这里插入图片描述

    1. 背景图片的显示方式:background-attachment

    在这里插入图片描述

    1. 背景图片的定位:background-position

    在这里插入图片描述

    1. background-position的取值

    在这里插入图片描述

    1. 背景图片百分比定位详解

    在这里插入图片描述

    1. 背景缩写

    在这里插入图片描述

    列表样式
    1. 列表标记项:list-style-type

    在这里插入图片描述

    1. 使用图片做列表项标记:list-style-image

    在这里插入图片描述

    1. 列表项标记位置:list-style-position

    在这里插入图片描述

    1. 列表样式的缩写:list-style

    在这里插入图片描述

    End!
    展开全文
  • /* H5公共样式,用于所有H5开发页面*/ html { font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; -ms-tex...
    @charset "UTF-8";
    /* H5公共样式,用于所有H5开发页面*/
    html {
      font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }
    body {
      font-family: inherit;
      font-size: 14px;
      background: #fff;
    }
    /* 将具有默认margin和padding的标记置零,所有标记的margin、padding都在使用时具体定义 */ 
    * {
      box-sizing: border-box;
    }
    /* 常用标签,基本标签默认样式取消,HTML标签,取消基本标签默认样式,防止不同浏览器显示效果不同 */
    body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,button,input,textarea,th,td,div {
      margin: 0;
      padding: 0;
      border: 0;
    }
    article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {
      display: block;
      margin: 0;
      padding: 0;
    }
    audio,canvas,progress,video {
      display: inline-block;
      vertical-align: baseline;
      margin: 0;
      padding: 0;
    }
    b,strong {
      font-weight: bold;
    }
    small {
      font-size: 80%;
    }
    code,kbd,pre,samp {
      font-family: monospace, monospace;
      font-size: 1em;
    }
    button,input,optgroup,select,textarea {
      margin: 0;
      font: inherit;
      color: inherit;
    }
    button {
      overflow: visible;
    }
    button,select {
      text-transform: none;
    }
    button,html input[type="button"],input[type="reset"],input[type="submit"] {
      /*清除移动端默认的表单样式*/
      -webkit-appearance: none;
      cursor: pointer;
    }
    button[disabled],html input[disabled] {
      cursor: default;
    }
    button::-moz-focus-inner,input::-moz-focus-inner {
      padding: 0;
      border: 0;
    }
    input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
      height: auto;
    }
    input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    fieldset {
      padding: .35em .625em .75em;
      margin: 0 2px;
      border: 1px solid #ddd;
    }
    legend {
      padding: 0;
      border: 0;
    }
    textarea {
      overflow: auto;
    }
    optgroup {
      font-weight: bold;
    }
    table {
      border-spacing: 0;
      border-collapse: collapse;
    }
    td,th {
      padding: 0;
    }
    body,input,select,textarea,button {
      /*字体变清晰*/
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* 清除ul列表标记的样式 */  
    ol,ul {
      list-style: none;
    }
    /* 定义默认的链接样式,仅仅是作为默认样式提供,可以在各自的实例中覆盖掉 */  
    a,a:hover,a:focus {
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      -moz-tap-highlight-color: transparent;
      -o-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
    }
    /* 定义图片边框,当图片作为链接内容被填充时,会有默认边框出现,重定义掉 */  
    img {
      width: 100%;
      border: 0 none;
      -ms-interpolation-mode: bicubic;
    }
    /* 去掉虚线框 */  
    input:focus,textarea:focus,select:focus,button:focus,a:focus {
      outline: 0;
    }
    /*通过为父元素添加 .clearfix 类可以很容易地清除浮动*/
    .clearfix:after,.clearfix:before {
      content: ".";
      display: block;
      font-size: 0;
      height: 0;
      line-height: 0;
      overflow: hidden;
      visibility: hidden;
      width: 0;
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      zoom: 1;
    }
    
    /*---common style ---*/
    .fontSTsong {
      font-family: "NSimSun", "SimSun", "STSong", "FangSong", "FangSong_GB2312" !important;
    }
    .app-table {
      display: table;
    }
    
    .app-tr {
      display: table-row;
    }
    
    .app-td {
      display: table-cell;
    }
    
    html {
      font-size: 100px;
    }
    
    @media only screen and (min-width: 401px) {
      html {
        font-size: 125px !important;
      }
    }
    
    @media only screen and (min-width: 428px) {
      html {
        font-size: 133.75px !important;
      }
    }
    
    @media only screen and (min-width: 481px) {
      html {
        font-size: 150px !important;
      }
    }
    
    @media only screen and (min-width: 569px) {
      html {
        font-size: 175px !important;
      }
    }
    
    @media only screen and (min-width: 641px) {
      html {
        font-size: 200px !important;
      }
    }
    
    html,body {
      min-height: 100%;
    }
    
    body {
      margin: 0 auto;
      width: 100%;
      max-width: 640px;
      font-size: 0.14rem;
      color: #333;
    }
    
    h1,h2,h3,h4,h5,h6 {
      font-weight: normal;
    }
    
    .hide {
      display: none;
    }
    
    .show {
      display: block;
    }
    
    a {
      color: #333;
    }
    .abs{ position: absolute; }
    .rel{ position: relative; }
    .bg-white { background: #fff;}
    .bg-gray { background: #f2f2f2;}
    img {  display: block;}
    .ver-m{vertical-align: middle;}
    .ver-t{vertical-align: top;}
    .ver-b{vertical-align: bottom;}
    .fr{float: right;}
    .fl{float: left;}
    .tl { text-align: left !important;}
    .tc { text-align: center !important;}
    .tr { text-align: right !important;}
    .bdb-1 { border-bottom: 1px solid #d7d6dc;}
    .bdt-1 { border-top: 1px solid #d7d6dc;}
    .fc-yellow{ color: #ff9900; }
    .fc-blue{ color: #0a5ecc; }
    .fs-xs{font-size: 0.12rem;}
    .fs-s{font-size: 0.14rem;}
    .fs-m{font-size: 0.16rem;}
    .fs-l{font-size: 0.18rem;}
    .mg-s{margin: 0.1rem;}
    .mg-m{margin: 0.15rem;}
    .mg-l{margin: 0.2rem;}
    .mg-xl{margin: 0.25rem;}
    .mg-xxl{margin: 0.3rem;}
    .mgt-s{margin-top: 0.1rem;}
    .mgt-m{margin-top: 0.15rem;}
    .mgt-l{margin-top: 0.2rem;}
    .mgb-s{margin-bottom: 0.1rem;}
    .mgb-m{margin-bottom: 0.15rem;}
    .mgb-l{margin-bottom: 0.2rem;}
    .pd-s{padding: 0.1rem;}
    .pd-m{padding: 0.15rem;}
    .pdb-s{padding-bottom: 0.1rem;}
    .pdb-m{padding-bottom: 0.15rem;}
    .pdb-l{padding-bottom: 0.2rem;}
    .pdt-s{padding-top: 0.1rem;}
    .pdt-m{padding-top: 0.15rem;}
    .pdt-l{padding-top: 0.2rem;}
    
    
    /*顶部*/
    
    header {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
    }
    
    .nav-warp {
      position: relative;
      margin: 0 auto;
      width: 100%;
      max-width: 640px;
      height: 0.48rem;
      background: #0066ff;
    }
    
    .nav-warp .nav-menu-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 0.48rem;
      height: 0.48rem;
      background: url(../images/sprite.png) -0.5rem -1rem no-repeat;
      background-size: 2rem 1.5rem;
      z-index: 2;
    }
    
    .nav-warp .nav-menu-btn.show {
      background: url(../images/sprite.png) #333 0 -1rem no-repeat;
      background-size: 2rem 1.5rem;
      opacity: 0.8;
      filter: alpha(opacity=80);
    }
    
    .nav-warp .nav-con {
      position: relative;
      padding: 0 0.45rem;
    }
    
    .nav-warp .nav-con .page-title {
      height: 0.48rem;
      line-height: 0.48rem;
      text-align: center;
      font-size: 0.18rem;
      color: #fff;
    }
    
    .nav-warp .nav-menu {
      display: none;
      position: absolute;
      width: 100%;
      top: 0.48rem;
      left: 0;
      overflow: hidden;
      z-index: 2;
      background: #333;
      opacity: 0.8;
      filter: alpha(opacity=80);
    }
    
    .nav-warp .nav-menu-lists {
      width: 100%;
      max-width: 640px;
    }
    
    .nav-warp .nav-menu-lists li {
      float: left;
      width: 0.64rem;
      height: 0.54rem;
      line-height: 0.54rem;
      text-align: center;
    }
    
    .nav-warp .nav-menu-lists a {
      display: block;
      font-size: 0.12rem;
      color: #fff;
    }
    
    .nav-warp .nav-menu-lists a.cur,
    .nav-warp .nav-menu-lists a:active {
      color: #ffc600;
    }
    
    .nav-warp .page-title {
      font-size: 0.15rem;
    }
    
    .nav-warp .logo {
      position: absolute;
      top: 0.1rem;
      right: 0.1rem;
      width: 0.28rem;
      height: 0.28rem;
      z-index: 2;
    }
    
    .nav-warp .logo img {
      width: 0.28rem;
      height: 0.28rem;
    }
    
    footer {
      background: #efeff4;
      padding: 0.14rem;
      /*margin-top:0.15rem;*/
    }
    
    footer .server-tel {
      padding: 0.1rem 0;
      border: 0.01rem solid #cdcdcd;
      border-radius: 0.05rem;
      background: #fff;
    }
    
    footer .server-tel .icon-tel {
      float: left;
      margin-left: 0.2rem;
    }
    
    footer .server-tel .icon-tel img {
      width: 0.41rem;
      height: 0.39rem;
    }
    
    footer .server-tel .server-info {
      float: left;
      margin-left: 0.15rem;
    }
    
    footer .server-tel .server-info .tel {
      font-size: 0.16rem;
      color: #333;
    }
    
    footer .server-tel .server-info .time {
      font-size: 0.13rem;
      color: #666;
    }
    
    footer .address-info {
      margin-left: 0.05rem;
      padding: 0.15rem 0;
    }
    
    footer .address-info p {
      font-size: 0.13rem;
      color: #333;
      line-height: 0.2rem;
    }
    
    footer .copyright-wrap .logo {
      float: left;
      width: 0.35rem;
      height: 0.35rem;
      margin-top: 0.06rem;
    }
    
    footer .copyright-wrap .logo img {
      width: 0.35rem;
      height: 0.35rem;
    }
    
    footer .copyright-wrap .copyright {
      /*float: left;*/
      /*width: 2.45rem;*/
      margin-left: 0.08rem;
    }
    
    footer .copyright-wrap .copyright .company-name {
      font-size: 0.15rem;
      color: #333;
    }
    
    footer .copyright-wrap .copyright .text {
      font-size: 0.09rem;
      color: #666;
    }
    
    .goto-top {
      position: fixed;
      right: 0.1rem;
      bottom: 0.2rem;
      width: 0.44rem;
      height: 0.44rem;
      text-indent: -9999em;
      background: url(../images/sprite.png) 0 -0.5rem no-repeat;
      background-size: 2rem 1.5rem;
      z-index: 999;
    }
    
    .page-warp {
      padding-top: 0.48rem; 
    }
    
    .page-warp.pdt108 {
      padding-top: 1.08rem;
    }

     

    转载于:https://www.cnblogs.com/z45281625/p/10540382.html

    展开全文
  • H5 CSS样式 小结

    千次阅读 2018-03-17 12:41:48
    列表样式 margin 外边距 padding 内边距 cursor 光标样式 css float属性 .left { width: 200 px; height: 200 px; background-color: red; float: left; } ....

    如何查询相关文档

    推荐查询相关网址:http://devdocs.io/

    第一行代码

      div {
            width: 500px;
            height: 500px;
            background-color: red;
          }
          <!-- 定义了一个长度和高度为500的正方体 背景颜色红色 -->
        <div>我是div</div>

    css样式的继承

    body {
            color: blue;
          }

    如果不给标签添加额外的字体颜色 页面所有的文字颜色都会设置为蓝色

    CSS 常用属性举例

    属性描述
    width设置长度 单位px
    height设置高度 单位px
    floatfloat: left / right/ none; 让元素浮动起来 用于布局
    positionabsolute/relative/fixed 元素定位
    font字体格式
    background背景颜色 / 背景图象 / 背景重复 / 背景附件 / 背景位置
    borderwidth /style /color 边框样式
    list-style列表样式
    margin外边距
    padding内边距
    cursor光标样式

    css float属性

    .left {
                    width: 200px;
                    height: 200px;
                    background-color: red;
                    float: left;
                }
    
                .right {
                    width: 200px;
                    height: 200px;
                    background-color: blue;
                }
                <div class="left"></div>
            <div class="right"></div>

    div 本身是块级标签 使用两个div同级时候 两个div会紧紧相邻 使用浮动属性后可以发现两个div重合
    这里可以认为第一个div浮起来了 之前紧靠的div发现之前的div不见了就占领了第一个div的位置

    使用浮动会造成的一些问题

    .box{
        width: 800px;
        border: 4px red solid;
        margin: 50px auto;
    }
    .left{
        width: 200px;
        height: 200px;
        background: blue;
        float: left;
    }
    .right{
        width: 200px;
        height: 200px;
        background: gold;
        float: right;
    }
    <div class="box">
                <div class="left"></div>
                <div class="right"></div>
            </div>

    一个父级div中有两个子div 父级没有设置高度 两个子div分别使用了左浮动和有浮动 这时会造成父级的高度塌陷
    解决方法:
    使用 clear: both;
    在添加一个div < div style=”clear: both;”>< /div> 这样就恢复正常了

    表单样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
    
        </style>
    </head>
    <body>
        <!-- 换行 -->
        <!-- <br/> -->
        <!-- action 表单要提交的服务器接口 -->
        <!-- methid 表单提交的方式 默认是GET 一般用POST -->
        <form id="first" action="" method="">
            <!-- 输入框 placeholder 占位符 给用户提示 value 最终要发送给服务器的值
            name发送给服务器的-->
            <label for="name">用户名: </label>
            <input id="name" type="text" placeholder="请输入用户名" name="username" value="">
            <br/>
            <input type="password" placeholder="请输入密码">
            <br/>
            <input type="radio" name="gender">
            <input type="radio" name="gender">
            <input type="radio" name="gender" value="3">
            <br/>
            <input type="checkbox" name="inster" value="work">
            <input type="checkbox" name="inster" value="play">
            <input type="checkbox" name="inster" value="watch">
            <br/>
            <!-- multiple 上传多个文件 -->
            <input type="file" multiple>
            <br/>
            <input type="email" >
            <br/>
            <input type="date" >
            <br/>
            <input type="search" >
            <br/>
            <input type="button" value="不要按">
            <br/>
            <!-- 隐藏属性 收集一些用户不需要填写的信息-->
            <input type="hidden" name="type" value="Mac">
            <br/>
            <input type="submit" value="注册">
            <br/>
            <textarea></textarea>
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
            </select>
            <!-- 清空 -->
    
            <br/>
        </form>
        <!-- 如果提交按钮/重置按钮在form外 点击按钮是无效 可以通过 属性关联起来 -->
        <input form="first" type="reset">
    </body>
    </html>

    表格样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            table{
                /* collapse 合并边框
                   separate 不合并边框
                */
                border-collapse: collapse;
                border:  1px blue solid;
                /*不合并边框的时候 可以让空的单元格隐藏*/
                /*empty-cells: hide;*/
                text-align: center;
            }
            tbody{
                /*改变表格垂直居中方式*/
                vertical-align: top;
            }
        </style>
    </head>
    <body>
        <!-- 这里的 border 和 css中的不一样 cellspacing 单元格间距 cellpadding 单元格内边距-->
        <table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
            <!-- 标题 -->
            <!-- <caption></caption> -->
            <!-- <thead></thead> -->
            <!-- tbody 可以省略 -->
            <!-- <tbody> -->
                <tr>
                    <th width="100" height="200">1</th>
                    <th width="250">2</th>
                </tr>
                <tr>
                    <td>11</td>
                    <td>22</td>
                </tr>
            <!-- </tbody> -->
        </table>
        <table border="1" width="280" height="280">
            <tr>
                <td rowspan="2">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td colspan="2">2</td>
                <!-- <td>3</td> -->
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td colspan="2" rowspan="2">3</td>
                <!-- <td>4</td> -->
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <!-- <td colspan="2">3</td> -->
                <!-- <td>4</td> -->
            </tr>
        </table>
    </body>
    </html>
    展开全文
  • 如何快速开发H5列表页面

    千次阅读 2019-07-11 10:24:03
    小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面。拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上的列表页面那样进行分页处理,应该按照手机...

    小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面。拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上的列表页面那样进行分页处理,应该按照手机列表常用的上拉刷新,下拉重新加载的方式实现。所以这个任务主要实现以下两点:
    1、 列表页面需实现上拉刷新,下拉重新加载;
    2、 动态加载列表数据;

    确定后需求后就要选择合适的技术框架和开发工具进行开发,由于小编在做这个任务之前也没有手机H5开发的项目经验,只在平时阅读技术文章时有一些了解,所以当时想出了以下几种选择:
    1、 Eclipse工具+Juqery Mobile UI框架;
    2、 Eclipse工具+Juqery框架+iScroll框架;
    3、 Hbuilder工具+MUI框架;
    4、 WeX5工具及其自带的UI框架。

    通过比较以上四种组合,小编发现Hbuilder工具+MUI框架这个组合有明显的优势,主要表现在以下几个方面:
    1、 Hbuilder工具简单、易用,尤其是强大的联想功能可以极大的简化开发;
    在这里插入图片描述
    2、 可以扩展丰富的插件,比如内置浏览器插件,可以实现刷新页面;
    在这里插入图片描述
    3、 MUI框架具备丰富的示例及技术文档,初学者也可以快速上手;
    在这里插入图片描述
    4、 MUI框架项目只需要引入mui.min.js、mui.min.css即可,是一个轻量级的框架
    在这里插入图片描述
    基于以上优势,小编选择Hbuilder工具+MUI框架来完成H5列表页面的开发,下面小编将会为大家介绍如何快速实现这个H5列表页面。

    实现上拉刷新/下拉重新加载的页面效果
    1、下载开发工具
    大家可以首先到官网(www.dcloud.io)下载HBuilder工具,由于HBuilder工具是基于Eclipse扩展而来,所以下载完成后直接解压缩就可以实现,双击解压缩后的执行文件“HbuilderX.exe”即可打开HBuilder工具,如下图所示:
    在这里插入图片描述
    2、创建项目
    新建项目,选中“5+App”后在下拉框中选择mui项目,如下图所示:
    在这里插入图片描述
    输入项目名称后点击创建按钮即可创建项目,项目目录结构如下图所示:
    在这里插入图片描述
    初始index.html页面代码如下图所示(右侧浏览器页签是展示效果图):
    在这里插入图片描述
    3、拷贝示例页面的代码
    找到上拉刷新,下拉重新加载的示例页面(pullrefresh.html),如下图所示:
    在这里插入图片描述
    拷贝相关的代码(标签中的内容)到我们的项目页面中,拷贝完成后的效果图如下:
    在这里插入图片描述
    动态加载数据
    1、后台接口跨域设置
    H5列表页面通过Ajax方式请求后台接口获取列表数据来实现动态加载数据,当H5页面和后台接口服务不在一个Web服务器时需要进行跨域访问。如果跨域访问,这里不在赘述了,一个简单的方法是在后台接口响应时设置以下消息头:

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, t");
    

    2、 加入Ajax请求代码请求后台数据
    在这里插入图片描述
    3、 添加数据处理的函数
    在这里插入图片描述
    4、 改造示例代码中上拉/下拉的动作函数
    在这里插入图片描述
    此步骤完成后的效果图如下:
    在这里插入图片描述
    5、 参考图文列表页面(media-list.html)和右侧带数字角标页面(tableviews-with-badges.html)页面的列表样式改造列表展示样式
    右侧带数字角标页面(tableviews-with-badges.html)效果:
    在这里插入图片描述
    图文列表页面(media-list.html)效果:
    在这里插入图片描述
    改造后函数add()里面for循环的代码块如下图所示:
    在这里插入图片描述
    完成后的效果如下:
    在这里插入图片描述
    核心代码如下:

    <!--下拉刷新容器-->
    		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    			<div class="mui-scroll">
    				<!--数据列表-->
    				<ul class="mui-table-view mui-table-view-chevron"></ul>
    			</div>
    		</div>
    		<script>
    			mui.init({
    				pullRefresh: {
    					container: '#pullrefresh',
    					down: {
    						style: 'circle',
    						callback: pulldownRefresh
    					},
    					up: {
    						auto: true,
    						contentrefresh: '正在加载...',
    						callback: pullupRefresh
    					}
    				}
    			});
    			var openId = 'o69AI5_BfceXayCj6do_sbERr_ek';
    			var addNum = 0,	pageSize = 10, rowsTotal = 1; 
    			function getOrderList() {
    				mui.get(
    					'http://localhost:8080/ysp/getOrderList?openId=' + openId + '&offset=' + addNum + '&limit=' + pageSize, {},
    					function(data) {
    						add(data);
    					}, 'json'
    				);
    			}
    			function pullupRefresh() {
    				setTimeout(function() {
    					//当所有数据都加载完成时代表没有更多数据了
    					mui('#pullrefresh').pullRefresh().endPullupToRefresh(addNum == rowsTotal); 
    					getOrderList();
    				}, 1500);
    			}
    			/**
    			 * 下拉刷新具体业务实现
    			 */
    			function pulldownRefresh() {
    				setTimeout(function() {
    					//重新加载页面
    					location.reload();
    					mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
    				}, 1500);
    			}
    			
    			function add(data) {
    				rowsTotal = data.total;
    				if (addNum >= rowsTotal) {
    					addNum = rowsTotal;
    				}
    				addNum += data.orderInfo.length;
    				var table = document.body.querySelector('.mui-table-view');
    				var cells = document.body.querySelectorAll('.mui-table-view-cell');
    				
    				for (i = 0; i < data.orderInfo.length; i++) {
    					var li = document.createElement('li');
    					li.className = 'mui-table-view-cell mui-media';
    					li.innerHTML =data.orderInfo[i].goodsName;
    					table.appendChild(li);
    				}
    			}
    		</script>
    	</body>
    

    以上就是快速实现H5列表页面的过程,相信大家看了之后也能够快速实现一个H5列表页面。另外小编特地整理了下MUI框架的示例代码以及小编完成的H5页面的代码,需要的同学可以关注我们的微信公众号,回复“mui”获取下载地址进行下载.

    展开全文
  • HTML 我要吃肉肉何曼婷 - 我要吃肉肉 CSS.btn-audio{width: ...height: 5.2rem;border: 1px solid #ebebeb;background-color: #fdfdfd;margin-bottom: 1rem;margin-top: 1rem;position: relative;}.mp3Bo...
  • 精致的H5 列表侧滑组件。H5页面侧滑删除、修改的效果。这里只支持手机端访问,Chrome浏览器调试 切换到Mobile 调试模式 学习无止境,何时是终点、时间让人沉思。代码分享,是对以下文章的更新版本!...
  • 手机内容样式body{ margin:0; padding:50px 0 0 0; font:normal 12px/20px '微软雅黑'; text-align:center; background:#f7f7f7; color:#5b5b5b}p, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form,div,input { ...
  • 我的博客《移动端H5实现搜索框样式》源码,欢迎批评指教 博客地址:https://blog.csdn.net/chengbao315/article/details/105549541
  • 近期参与了一个招聘类app的开发,注册流程比较多,基本都是cell带输入框的表单列表样式,避免不了的就会遇到键盘遮挡问题。相信大家也一定遇到过类似的问题,今天在这里就给大家分享一下,这个问题的解决思路。 ...
  • h5清除页面默认样式

    千次阅读 2019-10-23 10:44:17
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fields.....
  • 我们公司大佬写得技术文档,以后可能用的到这个技能,先转载过来以后好直接使用。 ... 侵删,谢谢!...拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上...
  • 收藏列表 代码部分一(HTML) <!DOCTYPE html> <html lang="en"> <head > <meta charset="UTF-8"> <title>Title</title> <script type="text/javascrip...
  • h5新增js类样式操作

    2018-07-16 17:36:52
    // classList:当前元素的所有样式列表-数组 document.querySelector("li").classList.add("red"); document.querySelector("li").classList.add("underline"); } // remove:为元素移除指定名称的样式(不是...
  • Web前端H5之CSS样式总结

    千次阅读 2017-11-15 22:06:18
    概念:层叠样式表或者级联样式表(Cascading Stylr Sheets) 层叠;CSS特性 CSS作业:设置网页结构的样式(改变html标签的样式),通过CSS给HTML标签设置属性到改变样式 CSS书写位置介绍: * 内嵌式写法:书写在...
  • H5 操作class 类样式

    2019-05-09 11:23:00
    classList:当前元素的所有样式列表-数组 document.querySelector( " li " ).classList.add( " red " ); document.querySelector( " li " ).classList.add( " underline " ); } // remove:为元素移除指定...
  • 效果描述: 这是从国外直接复制过来的一款jquery评分特效 附件提供了8种效果 使用方法: ... 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可 (注意保持文件路径正确)
  • 选择下面列表功能测试 <form> <option value="boomerang">boomerang <option value="swivelChair">swivel chair <option value="gettinInYoFace">gettin' in yo face ...
  • H5

    千次阅读 多人点赞 2017-08-23 22:32:54
    H5基础
  • 移动端H5各种各样的列表的制作方法(六) by FungLeo前情回顾前五章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 ...
  • 好看的移动端H5应用效果及样式借鉴

    千次阅读 2016-05-19 16:02:47
    支付宝 页面切换采用从下往上滑动,而且不是从底部滑上来,而是距离顶部大概200px的位置快速滑上来,感觉很自然。 缓冲的效果,就是一个圆圈不停转动的效果,作为一个遮罩层,等内容加载完,遮罩层隐去,内容浮现。...
  • [H5]CSS3样式(背景、文本、字体、链接、列表、表格和轮廓)[index.html]&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...
  • 前面三章,都是说一个普通的列表应该如何去实现.难度由易到难,但总的来说,一看就能掌握.这一章,我们来做图文列表.两列的图文列表是非常常见的.在JD\TB等电商移动端H5更是比比皆是.这里,我们先来做一个最简单的.
  • H5-表格的基本样式

    千次阅读 2017-11-01 20:22:36
    类选择器:通过给标签元素起一个classname类名 的方式,在编写样式的时候,用类名来获取该元素 .div1{ width:200px; height:200px; background-color:blue; } id选择器: 给元素起一个id名,用来...
  • 移动端H5各种各样的列表的制作方法(五) by FungLeo前情回顾前四章的学习地址: 《移动端H5各种各样的列表的制作方法(一)》 《移动端H5各种各样的列表的制作方法(二)》 《移动端H5各种各样的列表的制作方法(三)》 ...
  • 移动端各种各样的列表的制作方法(一) by FungLeo前言随着移动互联网的发展,大量前端人员从pc端转移动端.而很多PC端的前端经验并不适用于移动端.前几日我撰写的一篇博文《移动端H5的一些基本知识点总结》获得了大量的...
  • [H5]HTML5样式、链接和表格

    千次阅读 2017-01-28 20:49:55
    [H5]HTML5样式、链接和表格 <!-- 一、HTML样式 1.标签 :样式定义 通过style来定义一些样式 :资源引用 通过link来引用一些css样式进入到页面效果当中 2.属性 rel="stylesheet" :外部样式表 外部文件来定义css...
  • 完整的一套网页音乐模板 引用的js 样式 字体 img 所有的都放在一块了
  • 代码片段: window.onload=function(){ new imgSwitch("imgContainer",{Type:12,Width:943,Height:354,Pause:3000,Speed:"fast",Auto:true,Navigate:"numberic",NavigatePlace:"outer",PicturePosition:"left...
  • 一个h5的音频播放器,播放列表与播放器上下首切换样式效果对应起来。 五秒后自动收缩形成挂件(不可移动)。点击播放器图片 即可展开、收起。 audio.js audio.css 资源下载 详细代码上篇 样式 部分代码: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,148
精华内容 8,859
关键字:

h5列表样式