您的位置:首页 > 其它

ionic的tabs学习

2015-07-28 10:47 218 查看


tabs的另一个按钮点击后如下:



这次我要写的是tabs,以下是它在.html文件的代码

<ion-view view-title="机构介绍">
<ion-tabs class="tabs-striped tabs-top tabs-background-balanced">
<ion-tab title="本校简介">
<ion-view>
<ion-content>
<img class="intr-img"ng-src="img/s3.png">
<p class="intr-p">华图教育作为一家有良好声誉和社会责任感的本土优秀教育企业,华图经过十年的文化沉淀和业务发展,从一个教师考试培训班到全国近30所直属分校,从教师招录培训到教师资格培训、教师职称培训、教师进修培训和教师学历培训,从教师培训第一品牌到教师培训行业标准的制定者。招教资深教师全程授课,全方位提升学员笔试水平华图一线资深专家教师授课,针对学科专业的笔试特点、对应试技巧继续拧深度讲 解,使学员全面了解笔试,提升笔试应试技能。系统精讲学科专业知识,使学员在短时间内把握精确解读中小学教师招聘考试中学科专业知识考查体系及考查形式,全面、系统精讲相关 内容,使学员能够在短时间内获取并掌握。</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="品牌简介">
<ion-view>
<ion-content>
<img class="intr-img"ng-src="img/s2.png">
<p class="intr-p">该品牌图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识,界面中的图标是功能标识。它源自于生活中的各种图形标识,是计算机应用图形化的重要组成部分。</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</ion-view>


[/code]

接下来是在style.CSS 文件的代码,

.intr-p{
text-indent: 2em;
padding: 20px;
margin: 0px;
}

.intr-img{
border-radius: 50%;
width: 50%;
margin-left: 25%;
margin-top: 60px;
}

[/code]

当然,也可以直接在.html文件上写,例如:

<img style="border-radius: 50%;width: 50%;
margin-left: 25%;margin-top: 60px;" ng-src="img/s3.png">


[/code]

这里我对于tabs的介绍就到这里了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: