html5+css3 微信开发-学习实例

　　例子1.控制数据只显示两行并且最后使用省略号

样式如下：

.ControlDataRows
{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}

　　效果：

code:

 <ul class="list" data-cmsareaid="70">

     <li>
     <a href="http://demo.bitech.cn/ShPdTechWechat/Article/201604/201604210008.shtml" title="传谷歌将发布VR头戴设备，AndroidN已加入VR模式" style="display:inline-block;width:100%;"><span class="fr" style="display:inline-block;">2016-04-21</span><i class="fl">·</i><div style="width:75%;" class="ControlData Rows">传谷歌将发布VR头戴设备，AndroidN已加入VR模式</div></a>

     </li>
     <li>
     <a href="http://demo.bitech.cn/ShPdTechWechat/Article/201604/201604210007.shtml" title="“闯入者”平安迫使汽车之家启动控制权大战一触即发" style="display:inline-block;width:100%;"><span class="fr" style="display:inline-block;">2016-04-21</span><i class="fl">·</i><div style="width:75%;" class="ControlData Rows">“闯入者”平安迫使汽车之家启动控制权大战一触即发</div></a>

     </li>
     <li>
     <a href="http://demo.bitech.cn/ShPdTechWechat/Article/201604/201604210006.shtml" title="企业微信真的来了！你最需要知道的六个问题" style="display:inline-block;width:100%;"><span class="fr" style="display:inline-block;">2016-04-21</span><i class="fl">·</i><div style="width:75%;" class="ControlData Rows">企业微信真的来了！你最需要知道的六个问题</div></a>

     </li>

 </ul>

例子2：固定头部，下面列表可以上下滑动

效果：

css:样式：

@charset "utf-8";

/*全局样式*/
html, body, body > form {
    height: 100%;
}

address,
caption,
cite,
code,
em,
strong,
th,
optgroup {
    font-style: inherit;
}

:focus {
    outline: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

em {
    font-style: normal;
}

button {
    display: block;
}

input,
button,
textarea,
select,
optgroup,
option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

select,
input,
label,
button,
img {
    vertical-align: middle;
}

input,
button,
textarea,
img {
    line-height: normal;
}

input,
textarea,
select,
button {
    outline: medium none;
    resize: none;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
textarea,
p,
th,
td,
table,
img,
span,
dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

img {
    border: medium none;
    vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

dl,
dt,
dd,
li,
ul {
    list-style-type: none;
}

i {
    font-style: normal;
}

a {
    color: #252525;
}

    a:link,
    a:active,
    a:visited {
        text-decoration: none;
    }

    a:hover {
    }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    *zoom: 1;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

@media screen and (max-width: 320px) {
    html {
        font-size: 10px;
    }
}

@media screen and (min-width: 320px) and (max-width: 375px) {
    html {
        font-size: 10px;
    }
}

@media screen and (min-width: 376px) {
    html {
        font-size: 12.9px;
    }
}

body {
    font: normal 12px/22px "微软雅黑", Helvetica;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    color: #545454;
}

/* 共享服务 */
.gxfw {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

    .gxfw .guditop {
        border-bottom: 1px solid #ccc;
        box-shadow: 0 2px 3px #ccc;
        z-index: 1;
    }

    .gxfw .contbody {
        flex: 1;
        overflow: auto;
    }

.gxfu_titimg {
    width: 100%;
}

.gxfw .tit {
    width: 100%;
    overflow: hidden;
    background-color: #fff;
}

    .gxfw .tit a {
        float: left;
        display: inline-block;
        width: 33.33%;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-bottom: 2px solid #fff;
    }

        .gxfw .tit a.on {
            border-bottom: 2px solid #8b0012;
        }

.gxfw .cont {
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: -1px 0 20px 0;
    min-height: 80px;
}

    .gxfw .cont table {
        width: 100%;
        min-height: 80px;
    }

        .gxfw .cont table td:first-child {
            width: 40%;
            /*text-align: center;*/
        }

            .gxfw .cont table td:first-child img {
                display: inline-block;
                width: 35%;
                margin-left: 5px;
            }

            .gxfw .cont table td:first-child span {
                font-size: 1.2rem;
                padding-left: 5px;
                color: #383838;
            }

        .gxfw .cont table td .list li {
            height: 40px;
            line-height: 40px;
            border-top: 1px solid #ccc;
        }

            .gxfw .cont table td .list li:first-child {
                border-top: 0;
            }

            .gxfw .cont table td .list li i {
                display: inline-block;
                width: 4px;
                height: 4px;
                margin: 0 5px;
                background-color: #8b0012;
                vertical-align: middle;
            }

            .gxfw .cont table td .list li a {
                font-size: 1.1rem;
                color: #545454;
                margin-left: 10px;
            }

.graybg {
    background-color: #f3f3f3;
}

　　html页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--禁用移动端的缩放功能 webapp不需要-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
<!--禁用移动端的缩放功能 webapp不需要-->
<meta name="viewport" content="user-scalable=no, width=device-width">
<!--为iPhone手机的添加主频功能设置图标  rel="apple-touch-icon-precomposed"禁用苹果手机的自动对图片处理(高亮阴影圆角)的效果-->
<link rel="apple-touch-icon" href="icon.png" />
<!--全屏显示 WebApp，隐藏 safari 导航栏以及工具栏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<link type="text/css" rel="stylesheet" href="/ShiJiaZhuangWeChat/css/SharedServices.css">
<script type="text/javascript" src="/ShiJiaZhuangWeChat/js/jquery-1.7.1.min.js"></script>

<title>
	创业服务|石家庄北大科技园
</title></head>
<body>
    <form name="aspnetForm" method="post" action="/ShiJiaZhuangWeChat/Article/PioneeringService.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTk5Njc3MjI4MGRk" />
</div>

    <div class="graybg gxfw">
        <div class="guditop">
            <img class="gxfu_titimg" src='/ShiJiaZhuangWeChat/images/icon_gxfwtitle.jpg' />
            <div class="tit">
                <a class="on" href="PioneeringService.aspx">创业服务</a>
                <a href="AdministrativeOffice.aspx">行政办公</a>
                <a href="LifeService.aspx">生活服务</a>
            </div>
        </div>
        <div class="contbody">
            <div class="cont">
                <table>
                    <tr>
                        <td>
                            <img src='/ShiJiaZhuangWeChat/images/icon_gxfw01.jpg' /><span>工商注册</span></td>
                        <td>
                            <ul class="list">
                                <li><i></i><a href="#">公司注册</a></li>
                                <li><i></i><a href="#">公司/股权变更</a></li>
                                <li><i></i><a href="#">企业增资</a></li>
                                <li><i></i><a href="#">公司注销</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="cont">
                <table>
                    <tr>
                        <td>
                            <img src='/ShiJiaZhuangWeChat/images/icon_gxfw02.jpg' /><span>财务服务</span></td>
                        <td>
                            <ul class="list">
                                <li><i></i><a href="#">代理记账</a></li>
                                <li><i></i><a href="#">财务审计</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="cont">
                <table>
                    <tr>
                        <td>
                            <img src='/ShiJiaZhuangWeChat/images/icon_gxfw02.jpg' /><span>人力社保</span></td>
                        <td>
                            <ul class="list">
                                <li><i></i><a href="#">社保公积金代缴</a></li>
                                <li><i></i><a href="#">代理招聘</a></li>
                                <li><i></i><a href="#">猎头服务</a></li>
                                <li><i></i><a href="#">人力资源沙龙</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="cont">
                <table>
                    <tr>
                        <td>
                            <img src='/ShiJiaZhuangWeChat/images/icon_gxfw03.jpg' /><span>创业导师</span></td>
                        <td>
                            <ul class="list">
                                <li><i></i><a href="#">创业指导</a></li>
                                <li><i></i><a href="#">活动、路演指导</a></li>
                                <li><i></i><a href="#">政策扶持讲解</a></li>
                                <li><i></i><a href="#">投资对接</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="cont">
                <table>
                    <tr>
                        <td>
                            <img src='/ShiJiaZhuangWeChat/images/icon_gxfw01.jpg' /><span>知识产权</span></td>
                        <td>
                            <ul class="list">
                                <li><i></i><a href="#">专利服务</a></li>
                                <li><i></i><a href="#">版权服务</a></li>
                                <li><i></i><a href="#">商标服务</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="cont">
                <table>
                    <tr>
                        <td>
                            <img src='/ShiJiaZhuangWeChat/images/icon_gxfw02.jpg' /><span>法务咨询</span></td>
                        <td>
                            <ul class="list">
                                <li><i></i><a href="#">法律培训</a></li>
                                <li><i></i><a href="#">法务咨询</a></li>
                                <li><i></i><a href="#">文件起草、拟定</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    </form>
</body>
</html>