首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信H5 页面 ul li

微信H5 页面 ul li

作者头像
week
发布2018-08-24 16:29:07
1.6K0
发布2018-08-24 16:29:07
举报
文章被收录于专栏:用户画像用户画像

一、效果图

无序列表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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年09月06日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档