第一次尝试，还存在很多bug。。。
网页中 img文件夹以及源码链接https://pan.baidu.com/s/1dHniQFf
<!--
index.html
Created by 命_心 on 2018-01-22.
Copyright 2018 命_心. All rights reserved.
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
li{
list-style: none;
}
</style>
</head>
<body>
<div class="container-fluid" style="padding: 20px; width: 100%;">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-left">
<p class="glyphicon glyphicon-align-justify" id="tit_left" style="font-size: 20px;"></p><br />
<span>菜单</span>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="img/logo.png" class="img-responsive center-block" id="tit_logo" style="height: 50px;"/>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right" id="tit_right">
<p>星享俱乐部</p>
<a href="#" class="text-warning">登录</a>或<a href="#" class="text-warning">注册</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="img/banner.png" style="width: 100%;" />
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="banner" style="height: 150px;">
<div class="banner_bg" id="bg" style="height: 180px; width: 100%;background-image: url(img/one_banner2.png); ">
<div class="container-fluid">
<div class="row">
<div class="textfontsize" style="margin-top:20px;margin-left:650px;color:#FFFFFF;z-index: 5;">
<h4>星享俱乐部</h4>
<p style="font-size: 12px;">开启你的星享之旅，星星越多、会员等级越高、好礼越丰富</p>
<button style="width:100px;height:48px; border: 1px #af9c72 solid ;background-color: #000000;">注册</button >
<button style="width:100px;height:48px; border: 1px #af9c72 solid ;background-color: #000000;">登录</button>
<span><a href="#" class="right_a" style="color: #9c7f5c;margin-left: 40px;">了解更多>></a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" >
<img src="img/left.jpg" class="img-responsive col-lg-6 col-sm-6 col-md-6 col-xs-12" style="padding: 0;"/>
<img src="img/right.jpg" class="img-responsive col-lg-6 col-sm-6 col-md-6 col-xs-12" style="padding: 0;" />
</div>
</div>
<div class="container-fluid">
<div class="row" >
<img src="img/yongxingshuo.jpg" class="img-responsive center-block" style="width: 100%;"/>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div style="background-image: url(img/watchbg.jpg); width: 100%; height: 218px; ">
<div style="padding-left: 632px;padding-top: 38px;">
<span style="width: 340px;">
星享更同步。现在您可以同各国Apple Watch<br/>打开星巴克移动应用。更便捷地支付、查询<br/>星享卡还有查找附近门店。
</span>
<span><a href="#" style="color: #aa7748;">了解更多>></a></span>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div style="background-color: #f5f5f5;">
<div style="padding-top: 96px;text-align: center;">
<p style="font-size: 27px;">星巴克精选</p>
<p style="font-size: 15px;color:#222222;">在星巴克天猫旗舰店发现更多咖啡心意</p>
</div>
<div class="container-fluid" id="sel" style="padding: 80px 0px;background-color: #f5f5f5;">
<div class="container">
<div class="row" id="sels">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="border: 1px #ccc solid;">
<img src="img/pic1.jpg" class="center-block"/>
<h3 class="text-center">星享卡</h3>
<h4 class="text-center"><small>开始你的专属星巴克旅程</small></h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="border: 1px #ccc solid;">
<img src="img/pic2.jpg" class="center-block"/>
<h3 class="text-center">星礼卡</h3>
<h4 class="text-center"><small>用一份星礼，让心意相随</small></h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="border: 1px #ccc solid;">
<img src="img/pic3.jpg" class="center-block"/>
<h3 class="text-center">电子产品券</h3>
<h4 class="text-center"><small>心意 从这一杯开始</small></h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="border: 1px #ccc solid;">
<img src="img/pic4.jpg" class="center-block"/>
<h3 class="text-center">咖啡生活</h3>
<h4 class="text-center"><small>星巴克用心制作</small></h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style="background-color: #060608;">
<div class="text-center col-lg-6 col-sm-12 col-md-6 col-xs-12">
<img src="img/bg.jpg" style="margin: 38px 102px ;"/>
</div>
<div class="text-center col-lg-6 col-sm-12 col-md-6 col-xs-12">
<p style="font-size: 10px;color: #aa7748;padding-top: 210px;">我们优质的咖啡产品</p>
<p style="font-size: 16px; line-height: 28px; color: #595345;">我们持续在全世界各地寻找优质而稀少的咖啡豆，我们喜爱与您分享我<br>们的新发现。我们在星巴克位于总部西雅图的星巴克臻选™咖啡烘焙工<br>坊及品鉴馆为您精心烘焙星巴克臻选™咖啡。
</p>
<button style="width:142px;height:48px; border: 1px #af9c72 solid ;background-color: #000000;color: #af9c72;">了解更多</button >
<button style="width:142px;height:48px; border: 1px #af9c72 solid ;background-color: #000000;color: #af9c72">在这里购买</button>
</div>
</div>
</div>
<div class="container-fluid" style="background-color: #292929; padding-top: 50px; color: #CCCCCC;">
<div class="container">
<div class="row">
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12" style="padding-bottom: 50px;line-height: 32px;">
<li><b>最新资讯</b></li>
<li><small>当季新品</small></li>
<li><small>咖啡融合冰淇淋</small></li>
<li><small>冷萃冰咖啡</small></li>
<li><small>气质™冷萃咖啡</small></li>
<li><small>早安新一天</small></li>
<li><small>星巴克ORIGAMI™</small></li>
</ul>
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<li><b>菜单</b></li>
<li><small>饮品</small></li>
<li><small>星巴克美食</small></li>
<li><small>星巴克咖啡</small></li>
<li><small>星巴克VIA®免煮咖啡</small></li>
<li><small>早安新一天</small></li>
</ul>
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<li><b>星享卡</b></li>
<li><small>登录账户</small></li>
<li><small>注册星享卡</small></li>
<li><small>忘记密码</small></li>
<li><small>报失星享卡</small></li>
<li><small>购买星享卡</small></li>
</ul>
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<li><b>星巴克礼品卡</b></li>
<li><small>管理星礼卡</small></li>
<li><small>申请发票</small></li>
<li><small>购买星礼卡</small></li>
</ul>
</div>
<div class="row">
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<li><b>关于星巴克</b></li>
<li><small>企业新闻</small></li>
<li><small>我们的使命和价值观</small></li>
<li><small>星巴克责任</small></li>
<li><small>工作在星巴克中国</small></li>
<li><small>加入星巴克</small></li>
<li><small>星巴克在中国</small></li>
<li><small>历史回顾</small></li>
</ul>
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<li><b>快捷链接</b></li>
<li><small>天猫旗舰店</small></li>
<li><small>星巴克门店</small></li>
<li><small>上海烘焙工坊</small></li>
<li><small>联系星巴克</small></li>
</ul>
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<li><b>常见问题</b></li>
<li><small>星享卡</small></li>
<li><small>星礼卡</small></li>
<li><small>移动应用</small></li>
<li><small>电子发票</small></li>
<li><small>上海烘焙工坊发展</small></li>
<li><small>星巴克中国</small></li>
</ul>
<ul class="col-lg-3 col-md-3 col-sm-6 col-xs-12"style="padding-bottom: 50px;line-height: 32px;">
<img src="img/app2.png"/>
</ul>
</div>
</div>
</div>
<div class="container-fluid" style="background-color: #292929; width: 100%; ">
<div class="container">
<p style="font-size: 9px;line-height: 22px; color: #CCCCCC;" class="col-lg-9 col-md-9 col-sm-6 col-xs-6">©2018 Starbucks Corporationbr <br />
All rights reserved.沪ICP备17003747号<br />
沪公网安备 310104020000318号
</p>
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6" />
<img src="img/QQ.png" />
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
网友评论