今天使用bootstrap和metroui设计了一个metro风格的移动app或者微信微网站的界面
程序的源代码可以从此处获得：https://github.com/mz121star/weixin-metro
有喜欢的朋友可以拿去修改一下。
<!DOCTYPE html> <!--[if lt IE 7]> <html> <![endif]--> <!--[if IE 7]> <html> <![endif]--> <!--[if IE 8]> <html> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta content=""> <meta content="width=device-width, initial-scale=1"> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <link href="https://www.jb51.net/css/normalize.css"> <link href="https://www.jb51.net/css/bootstrap.min.css"> <link href="https://www.jb51.net/css/metro-bootstrap.css"> <link href="https://www.jb51.net/css/iconFont.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link href="https://www.jb51.net/css/bootstrap-theme.min.css"> <link href="https://www.jb51.net/css/main.css"> <script src="https://www.jb51.net/js/vendor/modernizr-2.6.2.min.js"></script> </head> <body> <div> <div> <div> <div> <div> <img src="https://www.jb51.net/images/1.jpg" /> </div> <div> <img src="https://www.jb51.net/images/2.jpg" /> </div> <div> <img src="https://www.jb51.net/images/3.jpg"/> </div> <a><i></i></a> <a><i></i></a> <div> <ul> <li><a href="javascript:void(0)" data-num="0"></a></li> <li><a href="javascript:void(0)" data-num="1"></a></li> <li><a href="javascript:void(0)" data-num="2"></a></li> </ul> </div> </div> </div> </div> <div> <div> <div> <div> <i></i> </div> <div> <span>已购买宠物</span> </div> </div> </div> <div> <div> <div> <img src="https://www.jb51.net/images/spface.jpg"> </div> <div> <span>宠物视频</span> <div></div> </div> </div> </div> <div> <div> <div> <img src="https://www.jb51.net/images/1.jpg"> </div> <div> <span>宠物监控</span> <div></div> </div> </div> </div> </div> <div> <div> <div> <div> <i></i> </div> <div> <span>宠物领养</span> </div> </div> </div> <div> <div> <div> <img src="https://www.jb51.net/images/1.jpg"> <img src="https://www.jb51.net/images/2.jpg"> <img src="https://www.jb51.net/images/3.jpg"> <img src="https://www.jb51.net/images/4.jpg"> <img src="https://www.jb51.net/images/5.jpg"> </div> </div> </div> <!-- <div> <div> <div> <div><i></i></div> </div> </div> </div>--> </div> <div> <div> <div> <div> <i></i> </div> <div> <span>宠物百科</span> </div> </div> </div> <div> <div> <div> <i></i> </div> <div> <span>常见问题</span> </div> </div> </div> <div> <div> <div> <i></i> </div> <div> <span>联系我们</span> </div> </div> </div> </div> </div> <div></div> <nav> <nav> <item > <a href="https://www.jb51.net/tel:13840816169"><i> </i> </a> </item> <item> <a href="https://www.jb51.net/sms:13840816169"><i> </i></a></item> <item> <i> </i></item> </nav> </nav> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--> <script src="https://www.jb51.net/js/vendor/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/js/jquery/jquery.widget.min.js"></script> <script src="https://www.jb51.net/js/metro/metro.min.js"></script> <!--<script src="https://www.jb51.net/js/plugins.js"></script> <script src="https://www.jb51.net/js/main.js"></script>--> <script> $(function(){ $("#carousel1").carousel({ height: 200 }); }) </script> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <script> </script> </body> </html>
这里主要使用了bootstrap的响应式设计和metroui的win8 metro风格！网站适配各种大小的屏幕。当然，还是在手机上看会更漂亮一些！
