一个app的底部导航
来源:互联网 发布:车牌识别算法 opencv 编辑:程序博客网 时间:2024/05/02 00:07
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="shortcut icon" href="favicon.ico"> <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="js/jquery.min.js" ></script> <style> /*顶部图片信息*/ .myTop{ position: absolute; top: 0; width: 100%; height: 40%; overflow: hidden; } .myTop-img img{ width: 100%; } .myTop-img-back{ position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, #0055B2 , #ffffff); opacity: 0.8; } .myTop-font{ position: absolute; bottom: 0; height: 50%; width: 100%; color: #FFFFFF; z-index: 1000; font-family: "微软雅黑"; font-size: 18px; text-indent: 20px; } .liu{ font-size: 30px; } /*底部导航*/ .myFoot{ border-top: 1px solid #E0E0E0; position: fixed; bottom: 0; width: 100%; height: 50px; background-color: #ffffff; } /*内容部分*/ .myCont{ margin-top: 72%; margin-bottom: 13%; } .gxp img{ width: 40px; border-radius: 50%; border: 2px solid #FFFFFF; margin: auto 5px; } .row img{ margin: 5px auto; } .myFoot a{ color: #7F7F7F; text-align: center; line-height: 50px; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".myFoot a").click(function(){ //改变当前被点击的元素样式 $(this).css({ "color":"#0062FA" }); //还原同胞元素 $(this).siblings().css({ "color":"#7F7F7F" }); }); }); </script></head><body> <!--顶部图片信息--> <div class="myTop"> <div class="myTop-font"> <p class="liu">刘德华</p> <p style="float: left;" >Andy Lau </p> <p style="float: right;margin-right: 20px;"> <i class="fa fa-map-marker"></i> 中国 · 香港 </p> <hr style="clear: both;width: 95%;margin:60px auto 20px;" /> <p style="float: left;">关系谱</p> <div class="gxp" style="float: right;margin-right: 20px;"> <img src="img/a1.jpg" /> <img src="img/a2.jpg" /> <img src="img/a3.jpg" /> <img src="img/a4.jpg" /> <i class="fa fa-chevron-right"></i> </div> </div> <!--蒙版--> <div class="myTop-img-back"></div> <!--背景图片--> <div class="myTop-img"> <img src="img/timg.jpg"/> </div> </div> <!--内容部分--> <div class="myCont container"> <p style="font-size: 20px;font-family: '微软雅黑';text-align: center;">作品展示</p> <div class="row"> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> <img class="col-xs-6 img-thumbnail" src="img/a1.jpg" /> </div> </div> <!--底部导航--> <div class="myFoot container-fluid"> <div class="row"> <a class="col-xs-4" href="javascript:;"> <i class="fa fa-book"></i> 最新作品 </a> <a class="col-xs-4" href="javascript:;"> <i class="fa fa-book"></i> 绯闻八卦 </a> <a class="col-xs-4" href="javascript:;"> <i class="fa fa-book"></i> 关系谱 </a> </div> </div></body></html>
阅读全文
0 0
- 一个app的底部导航
- app底部导航
- APP底部导航
- web---APP底部导航
- APP之底部导航
- Android:一个通用的底部导航
- auicss下APP底部导航
- 一般app底部导航栏的分页效果
- Android App应用底部导航栏实现的一种方式
- Android App底部导航栏的另一种实现方式
- 使用FragmentTabHost 完成一个简单的底部导航栏
- App底部导航(Fragment与ActivityGroup)
- 借助于百度导航App,实现一个轻量级的百度导航
- ionic之app.js中的路由配置关系和导航居底部的解决方案
- Fragment实现的底部导航
- 奇葩的底部导航栏
- 底部导航BottomNavigationBar的使用
- 底部导航的简单实现
- Codeforces 426D Sereja and Table【思维+暴力枚举】好题!
- C# bmp图片另存为位图 位深度1
- Invalid bound statement (not found): com/xx/xx/xxMapper/xx
- 在Twitter上怎么做推广
- Python探险--生成器yield剖析
- 一个app的底部导航
- 出现In aggregated query without GROUP BY原因
- ActiveMQ(一)
- HBase新版本Java API编程实战及基本操作方法封装
- HTTP请求返回状态码详解
- redis单机版与集群的切换
- 栅格
- 第3章 第一部分
- 制作Ubuntu安装U盘