您的位置：首页 > Web前端 > BootStrap

Web前端处理响应式图片实战(Bootstrap)

2019-01-20 08:45 393 查看

[code]//下面是 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>

[code]//下面是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端效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航