在csdn上看到一个大佬分享的静态网页，尝试着仿造出了一个,效果如下：
该页面原网页：https://blog.csdn.net/xun527/article/details/78021305
HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body >
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="images/logo.png" alt="log"></a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">toggle-navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">推荐商品</a></li>
<li><a href="#">手机生鲜</a></li>
<li><a href="#">抽奖</a></li>
</ul>
<form class="navbar-form navbar-right" role="search" method="get" action="#">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-defalut">
<span class="glyphicon glyphicon-heart"></span>
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-5 col-sm-12">
<img src="images/banner_title.png" alt="">
<h4>水果节介绍</h4>
<p>
天天生鲜将在北京、天津、上海、南京、苏州、杭州、成都、武汉8座核心城市同期推出北京水果专场，借助天天生鲜产地端到用户端的渠道 ，果品流转效率得以大大提高。依托天天生鲜的渠道优势，首届果节做到了高质低价。
</p>
</div>
<div class="col-md-7 text-center hidden-sm hidden-xs">
<img src="images/basket.png" alt="">
</div>
</div>
</div>
</div>
<div class="container text-center">
<h1>活动图片</h1>
<p>
天天生鲜产地直采的果品甚至可以追溯到种植者和生产的地块儿。确定具体采摘地块儿后，在适合的时间将水果采摘下来后，直接在地头包装成箱，根据订单分装运到各个分仓，然后由配送员送到用户手中。以下是本次活动相关的图片
</p>
</div>
<div class="container">
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="images/active01.jpg" alt="">
<p>采摘节活动</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="images/active02.jpg" alt="">
<p>采摘节活动</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="images/active03.jpg" alt="">
<p>采摘节活动</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="images/active04.jpg" alt="">
<p>采摘节活动</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row common_title">
<h3 class="pull-left">推荐商品</h3>
<a href="#" class="pull-right">获取更多>></a>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail text-center">
<img src="images/goods.jpg" alt="">
<p>进口草莓</p>
<p>￥25/500g</p>
</div>
</div>
</div>
</div>
<div class="container-fluid footer">
<div class="links">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
css代码如下：
.navbar-inverse{
margin: 0;
background-color: #FF722B;
border: none;
border-color: #FF722B;
}
.navbar .container .navbar-collapse .navbar-nav li a{
color: #FFFFFF;
}
.navbar .container .navbar-collapse .navbar-nav li.active a{
background-color: #db6226;
}
.navbar .container .navbar-header .navbar-brand{
margin-top: -10px
}
.jumbotron{
background: url(images/banner_bg.jpg);
background-repeat: no-repeat;
background-position: center center;
padding-bottom: 0;
}
.jumbotron .container .row .col-md-5{
margin-top: 17px;
}
.jumbotron .container h4{
color: #FFFF00
}
.jumbotron .container p{
color: #FFFFFF;
font-size: 14px;
line-height: 28px;
}
.common_title {
background-color: #ff722b;
margin: 0;
height: 40px;
}
.common_title h3 {
font-size: 16px;
color: #fff;
line-height: 40px;
margin: 0;
text-indent: 10px;
}
.common_title a{
font-size:12px;
color:#fff;
margin:10px 10px 0 0;
}
.footer{
background: #ff722b
}
.links{
text-align: center;
line-height: 80px;
}
.footer p{
line-height: 40px;
text-align: center;
}
百度云：https://pan.baidu.com/s/1Q3yKJFWIp-JJOotd2Y77Ww 提取码：4zgg
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
