APP之底部导航

最新推荐文章于 2023-08-29 22:12:16 发布

一岁-枯荣

最新推荐文章于 2023-08-29 22:12:16 发布

阅读量921

点赞数

分类专栏： HTML 文章标签： app导航固定定位底部固定底部导航

本文链接：https://blog.youkuaiyun.com/qq_40401942/article/details/78142721

版权

HTML 专栏收录该内容

20 篇文章

订阅专栏

	<!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>