html5+css3 微信开发-学习实例
例子1.控制数据只显示两行并且最后使用省略号
样式如下：
.ControlDataRows
{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
效果：
code:
1 <ul class="list" data-cmsareaid="70"> 2 3 <li> 4 <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> 5 6 </li> 7 <li> 8 <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> 9 10 </li> 11 <li> 12 <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> 13 14 </li> 15 16 17 </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>
浙公网安备 33010602011771号