H5、CSS3、Mui开发实例

2024-12-18 技术教程

前言

因进度需要，所以本人从一个服务端、架构暂时变成了一个前端开发者！

对于前端的理解

所谓“万变不离其宗”，就是这样一个道理，写惯了服务端，当接触前端以前总觉得很难，但是当我真正开始写的时候，发觉一如既往的简单，就是简单的jquery和html交互。

使用到的技术

html5、css3、mui

首页效果如下

用到的技术点如下：

1、最上面是一个轮播图

<divid="slider"class="mui-slider"><divclass="mui-slider-groupmui-slider-looplb"><divclass="mui-slider-itemmui-slider-item-duplicate"><ahref="#"><imgsrc="http://placehold.it/400x300"></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="http://placehold.it/400x300"></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="http://placehold.it/400x300"></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="http://placehold.it/400x300"></a></div><divclass="mui-slider-item"><ahref="#"><imgsrc="http://placehold.it/400x300"></a></div><divclass="mui-slider-itemmui-slider-item-duplicate"><ahref="#"><imgsrc="http://placehold.it/400x300"></a></div></div><divclass="mui-slider-indicator"><divclass="mui-indicatormui-active"></div><divclass="mui-indicator"></div><divclass="mui-indicator"></div></div></div>

2、接着是九宫格布局

<divclass="jgg"><ulclass="mui-table-viewmui-grid-viewmui-grid-9"><liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3"><ahref="html/forum/forum.html"><spanclass="mui-iconmui-icon-home"></span><divclass="mui-media-body">论坛</div></a></li><liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3"><aonclick="recruitIndex();"><spanclass="mui-iconmui-icon-email"><spanclass="mui-badgemui-badge-red">5</span></span><divclass="mui-media-body">招聘</div></a></li><liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3"><aonclick="informationIndex();"><spanclass="mui-iconmui-icon-chatbubble"></span><divclass="mui-media-body">资讯</div></a></li><liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3"><ahref="html/cultivate/cultivateIndex.html"><spanclass="mui-iconmui-icon-location"></span><divclass="mui-media-body">培训</div></a></li><liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3"><ahref="html/accreditation/accreditation.html"><spanclass="mui-iconmui-icon-search"></span><divclass="mui-media-body">认证</div></a></li><liclass="mui-table-view-cellmui-mediamui-col-xs-4mui-col-sm-3"><aonclick="companyCode();"><spanclass="mui-iconmui-icon-phone"></span><divclass="mui-media-body">企业</div></a></li></ul></div>

3、接着是3个列表

<divclass="zx"id="lt"><divclass="title"><p>论坛</p><span><ahref="#">更多</a></span></div><ulclass="mui-table-viewtzlist"><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item1</a></li><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item2</a></li><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item3</a></li><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item2</a></li><liclass="mui-table-view-cell"><aclass="mui-navigate-right">Item3</a></li></ul></div>

4、底部菜单

<navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-activehome"href="#tabbar"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aclass="mui-tab-itemmsg"href="#tabbar-with-chat"><spanclass="mui-iconmui-icon-chat"></span><spanclass="mui-tab-label">消息</span></a><aclass="mui-tab-itemmine"href="#tabbar-with-mine"><spanclass="mui-iconmui-icon-person"></span><spanclass="mui-tab-label">我的</span></a></nav>

以上就是整个首页的布局效果及代码，因版权只放出部分代码。

下面放出几张内容效果图：

遇到的难点

虽然整个过程觉得比较简单，但是还是遇到了一些问题，分享出来给大家借鉴：

1、视频播放、因为要兼容Android和ios所以做的时候费了很大的劲。最后还是决定使用H5的标签来做

<videosrc=""id="fz-videoAct"></video>

2、音乐播放、同样要兼容2种类型的设备，所以无奈自己写了一个Audio,效果如下

代码如下：

<divclass="container"><divclass="icon_conrotate"><divclass="music_icon"></div></div><divclass="content_con"><pclass="name">择天记.mp3</p></div><divclass="progress_conclearfix"><spanclass="progressbg"></span><spanclass="progresscur"></span><spanclass="timestarted">0:00</span><spanclass="timetotal">5:00</span></div><divclass="control_con"><divclass="control_span"><divclass="table_cell"><spanclass="icon_spanback_span"><spanclass="iconicon-kuaitui"></span></span></div><divclass="table_cell"><spanclass="icon_spanplay_span"><spanclass="icon"id="bofang">&#xe601</span></span></div><divclass="table_cell"><spanclass="icon_spanforward_span"><spanclass="iconicon-kuaijin"></span></span></div></div></div></div>

3、文档的在线预览，原意是想着实现在线预览pdf、txt、excel、doc等文件，但最后实现下来发现比较困难，加之时间紧迫,所以采用下载后调用本地阅读器阅读的方式，效果如下：

进来后判断本地有木有此文件，没有的话按钮显示“下载（文件大小）”，点击后去下载，下载完成后按钮显示切换为“阅读全文”，点击调用本地阅读器，同样，本地有此文件的话，按钮直接显示“阅读全文”。

结束语

踏上程序员之路，不管什么技术，或多或少都得接触一点，“万变不离其宗”，所有的东西原理都是一样的，生活中很多事情，不要担心、不要害怕你不会做，只要你愿意尝试。一切都会变的很简单！