专栏首页用户画像微信H5 页面 ul li

微信H5 页面 ul li

一、效果图

无序列表ul

二、代码

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>教练预约</title>
    <meta name="referrer" content="always"/>
    <meta charset='utf-8'/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link href="${ctxStatic}/cleanzone/js/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
    <style type="text/css">
        body {
            font-family: -apple-system, Helvetica, sans-serif;
            line-height: 1.5;
            font-size: 14px;
            text-align: center;
            -webkit-text-size-adjust: none;
            background: #F5F5F5;
            overflow-x: hidden
        }
        a {
            color: #0b0b0b
        }

        ol, ul {
            list-style: none;
        }

        .my_section {
            position: relative;
            margin: 15px 0;
            background: #fff;
        }
        .my_section::before{
            content: '';
            height: 0;
            display: block;
            border-bottom: 1px solid #ddd;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }
        .my_section .head {
            position: relative;
            display: block;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            padding: 0 10px;
        }

        .my_section .head span {
            color: #999;
            position: absolute;
            right: 25px;
            font-size: 12px;
        }

        .my_section .list {
            position: relative;
            padding: 0;
        }

        .my_section .list li {
            position: relative;
            text-align: center;
        }

        .list_act {
            overflow: hidden;
        }

        .list_act li {
            float: left;
            width: 25%;
        }

        .my_section .list li a {
            position: relative;
            display: block;
            padding: 10px 0;
            color: #666;
        }

        .list_act a {
            font-size: 12px !important;
        }

        .my_section .list::before {
            border-color: #ddd;
        }

        .my_section .list::before{
            content: '';
            height: 0;
            display: block;
            border-bottom: 1px solid #ddd;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
        }

        .my_section::after, .list_act li::before {
            content: '';
            height: 0;
            display: block;
            border-bottom: 1px solid #ddd;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #myActivity *::after {
            border-top: 0px;
            border-left: 0px;
        }

        .my_section a.head::after {
            content: '\20';
            border-color: #999;
            width: 8px;
            height: 8px;
            right: 10px;
            margin-top: -5px;
        }

        .list_act li::before {
            border-color: #ddd;
        }

        #myActivity *::after {
            border-top: 0px;
            border-left: 0px;
        }

        .list_act li::after {
            border-color: #ddd;
            content: '';
            width: 0;
            display: block;
            border-right: 1px solid #ddd;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
<div style="background-color:#fff;padding:10px;border-bottom:1px solid rgb(178,178,178)">
    <table border="0" width="100%">
        <tbody>
        <tr>
            <td onclick="javascript:history.back(-1)" width="30px"><img
                    src="${ctxStatic}/images/weiXin_return.png"
                    style="margin-bottom:-2px;" height="22px"></td>
            <td align="center" valign="middle">
                <div style="padding:5px 0"><img
                        src="${ctxStatic}/images/weiXin_logo.png"
                        style="display:block" height="16px"></div>
            </td>
            <td width="30px"> <a href="${ctx}/app/logout"><img
                    src="${ctxStatic}/images/weiXin_logout.png" style="margin-bottom:-2px;"
                    height="22px"></a></td>
        </tr>
        </tbody>
    </table>
</div>
<section class="my_section" id="myActivity">
    <div  class="head head_act">教练列表</div>
    <ul class="list list_act">
        <c:forEach items="${list}" var="reserveField">
            <li><a href="${ctx}/app/reserve/timeList?filedId=${reserveField.id}&venueId=${reserveVenueId}"> ${reserveField.name}</a></li>
        </c:forEach>
    </ul>
</section>
<section class="my_section" style="width: 100%;margin:0px;position: fixed;bottom: 0px;">
    <div  class="head head_act"> 客服电话:137-2003-1362</div>
</section>
</body>
</html>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用jatoolsPrinter实现套打

    最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

    week
  • 滚动条下拉时 table 的thead 固定在网页固定在顶部不动

    week
  • JS 刷新页面

    如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,re...

    week
  • [Markdown]Sublime Text2配置成MarkdownPad2效果

    原文链接:http://blog.csdn.net/humanking7/article/details/43516903

    祥知道
  • WordPress美化-缩略图&整站添加圆角、边框、阴影

    我觉得自己的审美是在一直在变化的,总是感觉还会有更好的效果。那就要不断的更改尝试。

    AlexTao
  • 从浅到深的学习 CSS3阴影(box-shadow)

    知识点: 1、外 box-shadow 前四个参数:x 偏移值、y 偏移值 、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数:扩张半径。这个参数会根据...

    Javanx
  • CSS 3.0实现创意点击按钮

    越陌度阡
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb
  • PHP+MYSQL分页css篇2

    body{ font-size: 12px;font-family: verdana;width: 100%; } div.page{ text-ali...

    用户7873631
  • 详解:30 text-shadow的开端

    核心知识点是:text-shadow:x y 模糊的大小 模糊的颜色,请大家记住一点:xy可以负数形式出现 嘿嘿。核心是复制哈

    用户7873631

扫码关注云+社区

领取腾讯云代金券