<!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> |
APP之底部导航
最新推荐文章于 2024-07-28 15:40:24 发布