1-20. Bootstrap实现图片响应式

最新推荐文章于 2024-05-12 09:44:11 发布

ROBIN.FANG

最新推荐文章于 2024-05-12 09:44:11 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_38134491/article/details/86559050

版权

//下面是 index.html文件全部代码

<!DOCTYPE html>
<html>
	<head>
		<!--Bootstrap中一行可以分为12个块-->
		<meta charset="utf-8">
		<!-- 兼容移动端声明设置 -->
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
		<title>Bootstrap网站前端实战</title>
		<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style1.css"/>
		
		<script src="Bootstrap/js/bootstrap.js"></script>	
		<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
		<script src="bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/style1.js" type="text/javascript" charset="utf-8"></script>
		
		<!-- 解决H5标签兼容性 -->
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

	</head>
	
	<body>
		
		<!-- pc端头部制作 -->
		<div class="headerbg1">
		</div>
		
		<div class="headerbg2">
	    </div>	
		
		<!-- pc端头部制作 -->
		
		<!-- wap版头部制作 -->
		<div class="wapheader">
			<img src="images/pic1.png" width="100%" />
		</div>
		
		<div class="wapheader">
			<img src="images/pic2.png" width="100%" />
		</div>
		
		<!-- wap版头部制作 -->
		
	</body>
</html>

//下面是CSS样式中style1.css文件全部代码

.headerbg1{
	width: 100%;
	height: 274px;
	background: url(../images/pic1.png) no-repeat center top;
}

.headerbg2{
	width: 100%;
	height: 445px;
	background: url(../images/pic2.png) no-repeat center top;	
}

/* wap端在pc端大小的时候隐藏*/
.wapheader{
	display: none;
}


@media(max-width:720px){
	.headerbg1{
		display: none;
	}
	.headerbg2{
		display: none;
	}	
	
	/* wap版代码 */
	.wapheader{
		display: block;   /* 在wap的时候显示上面被隐藏的wap端内容 */
	}
	
	.wapheader{
		width: 100%;
		height: auto;
		text-align: center;
		min-height: 30px;
		margin-top: 0px;   /*处理图片上下间隙问题*/
	}

	/* wap版代码 */
}

PC端效果如下：

wap端效果如下：

ROBIN.FANG

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-20. Bootstrap实现图片响应式

//下面是 index.html文件全部代码<!DOCTYPE html><html> <head>  <meta charset="utf-8">  <meta name="viewport" conte...
复制链接

扫一扫