app底部導航
*接着上一篇寫的
同樣只有個html*
<!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>