html5+css3 微信開發-學習實例
例子1.控制數據只顯示兩行而且最後使用省略號javascript
樣式以下：css
.ControlDataRows
{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
效果：
html
code:java
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：固定頭部，下面列表能夠上下滑動jquery
效果：web
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頁面：app
<!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>
相關文章
- 1. 微信開發學習
- 2. 學習微信開發
- 3. HTML5CSS3
- 4. 微信開發學習總結——微信開發入門（轉）
- 5. 微信開發學習總結（二）——微信開發入門
- 6. PHP微信支付開發實例
- 7. 微信小程序開發實例
- 8. HBase開發實例學習
- 9. 微信小程序開發學習
- 10. 第三週（1）——微信開發學習
- 更多相關文章...
- • XML DOM 實例 - XML DOM 教程
- • XML 實例 - XML 教程
- • PHP開發工具
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 微信開發學習
- 2. 學習微信開發
- 3. HTML5CSS3
- 4. 微信開發學習總結——微信開發入門（轉）
- 5. 微信開發學習總結（二）——微信開發入門
- 6. PHP微信支付開發實例
- 7. 微信小程序開發實例
- 8. HBase開發實例學習
- 9. 微信小程序開發學習
- 10. 第三週（1）——微信開發學習