bootstrap实例《一》星巴克官网

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引入外部css样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/normalize.css"><title>星巴克</title>
</head>
<body><!-- 外层div包装 --><div class="warpper"><!-- 左侧导航nav --><div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 left_nav"><header class="header"><p></p><a class="logo" href="/"><img src="iamge/logo.svg" alt="星巴克"></a><div class="primary"><ul><li class="stores"><a id="stores-primary" href="/stores/">门店</a></li><li class="account"><a id="account-primary" href="/account/"><span data-reactroot="" class="">我的帐户</span></a></li><li class="menu"><a id="menu-primary" href="/menu/">菜单</a></li></ul></div><a class="icon trigger" rel="nav-overlay" id="nav-menu"><img src="iamge/icon-hamburger.svg"></a><div style="clear: both;"></div></header><div style="clear: both;"></div><div class="left_content after-fix"><h2>心情惬意，来杯咖啡吧 ☕</h2><ul><li><img src="iamge/icon-account.svg" alt=""><span class="denglu">登录</span></li><li><span class="zhuce">注册</span></li></ul></div><div class="hidden_nav"><div class="hidden_list"><ul class="list_1"><li>门店</li><li>星享俱乐部</li><li>菜单</li><li><hr></li><li>星巴克移动应用</li><li>星礼卡</li><li>星巴克臻选™</li><li>啡快™ － 在线点 到店取</li><li>专星送™</li><li>咖啡星讲堂</li><li>上海烘焙工坊</li><li>关于星巴克</li><li>帮助中心</li><li><hr></li></ul><ul class="list_2"><li><img src="iamge/icon-account.svg" alt=""><span class="denglu">登录</span></li><li><span class="zhuce">注册</span></li></ul></div></div></div><!-- 主体内容区域 --><div class="content"><!-- 左侧被覆盖区域 --><div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"></div><!-- 右侧主体内容content --><div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 bor"><!-- 主体第一张大图 --><div class="row content_one"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 qwe"><span>广告</span><i><img src="iamge/main_61babe13-d569-476b-8bd6-e75068943318.jpg" alt="" class="img_one"></i><i><img src="iamge/main_7fc4f760-6926-4eeb-9304-06581dd9a737.jpg" alt="" class="img_two"></i></div></div><!-- 三张图片 --><div class="row content_two"><div class="col-lg-4 col-md-4 col-sm-4 "><i><img src="iamge/tmall-2020-06-29-zh.jpg" alt="" class="aa"></i></div><div class="col-lg-4 col-md-4 col-sm-4 "><i><img src="iamge/starbucks-design-studio-web-china.jpg" alt=""></i></div><div class="col-lg-4 col-md-4 col-sm-4 "><i><img src="iamge/homepage-career-cn.jpg" alt=""></i></div></div><!-- 星享俱乐部 --><div class="row content_three"><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 "><div class="cen"><h2>星享俱乐部</h2><p>开启您的星享俱乐部，星星越多，会员等级越高，好礼越丰富。<span>了解更多</span></p><u>注册</u><u>登录</u></div></div><div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"><div class="cen_img"><i><img src="iamge/logo-msr-new.svg" alt=""></i></div></div></div><!-- 星巴克精选 --><div class="content_four"><div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 four_text"><h2>星巴克精选</h2><p>在星巴克天猫旗舰店发现更多咖啡心意</p></div></div><div class="row d_padd"><div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 padd"><div class="tpng"><i><img src="iamge/tmall-card-01-update.png" alt=""></i><h3>会员星礼包</h3><p>星享卡新升级<br>更多心意好礼</p><p class="caption">了解更多 ›</p></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 padd"><div class="tpng"><i><img src="iamge/tmall-card-02.png" alt="" ></i><h3>星礼卡</h3><p>用一份心礼<br>让心意相随</p><p class="caption">了解更多 ›</p></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 padd"><div class="tpng"><i  class="ts"><img src="iamge/tmall-eticket.png" alt=""></i><h3 class="ts_p">电子产品券</h3><p>心意<br>从这一杯开始</p><p class="caption">了解更多 ›</p></div></div><div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 padd"><div class="tpng"><i  class="ts"><img src="iamge/tmall-reserve.png" alt=""></i><h3 class="ts_p">咖啡生活</h3><p>星巴克<br>用心制作</p><p class="caption">了解更多 ›</p></div></div></div></div><!-- 咖啡星讲堂 --><div class="content_five"><div class="row"><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 tt"><div class=""><h2 class="wrapper-mobile">1912 派克街 | 咖啡星讲堂</h2><p>了解更多星巴克咖啡文化</p></div></div></div><div class="row"><div class="scroll-items col-lg-12"><i class="btn_left"><img src="iamge/icon-scroll-left.svg" alt=""></i><i class="btn_right" ><img src="iamge/icon-scroll-right.svg" alt=""></i><div class="xx"><div class="xian"><span class="tag">咖啡知识</span><i><img src="iamge/coffeehouse-coffee-cultivation-kv.jpg" alt=""></i><strong>咖啡的起源与培植</strong></div></div><div class="xx"><div class="xian"><span class="tag">咖啡品鉴</span><i><img src="iamge/coffeehouse-4-fundamentals-kv.jpg" alt=""></i><strong>咖啡调制</strong></div></div><div class="xx"><div class="xian"><span class="tag">咖啡知识</span><i><img src="iamge/coffeehouse-roast-story-kv.jpg" alt=""></i><strong>咖啡烘焙</strong></div></div><div class="xx"><div class="xian"><span class="tag">咖啡品鉴</span><i><img src="iamge/coffeehouse-pour-over-kv.jpg" alt=""></i><strong>手冲咖啡</strong></div></div></div></div><div class="row beian"><div class="col-lg-12 col-md-12"><p><i><img src="iamge/icpicon.png" alt=""></i>沪公网安备 31010402000253号 | 沪ICP备17003747号</p></div></div></div><div class="" style="clear: both;"></div></div></div><!-- 页面最小化时显示底部导航 --><div class="col-xs-12 hidden-md hidden-lg hidden-sm" id="foo_fiexd"><div class="foo_nav"><div class="nav_list"><i><img src="iamge/icon-home-active.svg" alt=""></i><p>主页</p></div><div class="nav_list"><i><img src="iamge/icon-stores.svg" alt=""></i><p>门店</p></div><div class="nav_list"><i><img src="iamge/icon-account(1).svg" alt=""></i><p>我的账户</p></div><div class="nav_list"><i><img src="iamge/icon-menu.svg" alt=""></i><p>菜单</p></div><div class="nav_list"><i><img src="iamge/icon-more.svg" alt=""></i><p>更多</p></div></div></div></div>
</body>
<!-- 引入外部js文件 -->
<script src="JQuery/jquery-1.12.4.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/style.js"></script>
</html>

css代码：

* {margin: 0;padding: 0;
}
:root,
body {height: 100%;width: 100%;
}
.warpper {min-width: 386px;
}
.container-fluid {padding-left: 0;padding-right: 0;
}
.left_nav {position: fixed;top: 0;left: 0;
}
.left_nav .header {height: 48px;padding: 24px;
}
.left_nav .header:hover {text-decoration: none;cursor: pointer;
}
.left_nav .header .logo img {width: 38px;
}
.left_nav .header img {vertical-align: 0;
}
.left_nav .header .primary {display: inline-block;
}
.left_nav .header .primary ul li {float: left;list-style: none;
}
.left_nav .header .primary ul a {color: inherit;display: block;font-weight: 700;font-size: 16px;letter-spacing: 1px;padding: 5px 10px 5px;text-transform: uppercase;
}
.left_nav .header .primary ul a:hover {text-decoration: none;cursor: pointer;
}
.left_nav .header #nav-menu {width: 24px;float: right;padding: 6px 0;
}
.left_nav .left_content {margin: 400px auto ;padding-left: 20px;font-size: 15px;
}
.left_nav .left_content h2 {font-weight: 700;flex-wrap: nowrap;
}
.left_nav .left_content ul {margin-top: 25px;margin-bottom: 20px;
}
.left_nav .left_content ul li {list-style: none;margin: 25px;float: left;cursor: pointer;
}
.left_nav .left_content ul li b {border-bottom: 3px solid #00A862;padding-bottom: 5px;font-size: 17px;
}
.left_nav .left_content ul li span {color: #009758;
}
.left_nav .left_content ul li .denglu {margin-left: 5px;
}
.left_nav .left_content ul li .zhuce {border: 1px solid #009758;border-radius: 10px;padding: 5px 10px;
}
.left_nav .hidden_nav {width: 100%;margin-top: 30%;display: none;
}
.left_nav .hidden_nav .hidden_list {width: 70%;margin: 0 auto;
}
.left_nav .hidden_nav .hidden_list .list_1 li {list-style: none;margin: 15px;font-size: 18px;font-weight: 700;
}
.left_nav .hidden_nav .hidden_list .list_2 li {list-style: none;margin: 25px;float: left;cursor: pointer;
}
.left_nav .hidden_nav .hidden_list .list_2 li b {border-bottom: 3px solid #00A862;padding-bottom: 5px;font-size: 17px;
}
.left_nav .hidden_nav .hidden_list .list_2 li span {color: #009758;
}
.left_nav .hidden_nav .hidden_list .list_2 li .denglu {margin-left: 5px;
}
.left_nav .hidden_nav .hidden_list .list_2 li .zhuce {border: 1px solid #009758;border-radius: 10px;padding: 5px 10px;
}
.content {margin: 0;
}
.content .bor {border-left: 1px solid;background-color: #F7F7F7;
}
.content .content_one .qwe {padding: 0;
}
.content .content_one span {display: inline-block;position: absolute;right: 10px;top: 10px;background-color: #082F31;color: #A1C8CA;width: 37px;height: 22px;text-align: center;line-height: ;
}
.content .content_one img {width: 100%;padding: 0;margin: 0;
}
.content .content_two {padding: 25px;
}
.content .content_two div {margin-bottom: 25px;
}
.content .content_two img {width: 100%;
}
.content .content_two img:hover {margin-top: -5px;
}
.content .content_three {background-color: #ffffff;
}
.content .content_three .cen {padding: 25px;width: 350px;margin: 0 auto;
}
.content .content_three .cen_img {width: 200px;height: 200px;line-height: 200px;margin: 0 auto;
}
.content .content_three p {margin-top: 15px;margin-bottom: 25px;font-size: 16px;line-height: 28px;
}
.content .content_three p span {color: #C2A661;
}
.content .content_three u {margin-top: 25px;color: #00A862;text-decoration: none;padding: 10px 15px;border: 1px solid #00A862;border-radius: 18px;
}
.content .content_four {text-align: center;
}
.content .content_four .four_text {padding: 28px 0;
}
.content .content_four .tpng {width: 80%;margin: 0 auto;background-color: #ffffff;margin-top: 24px;text-align: center;position: relative;margin-bottom: 48px;padding-bottom: 24px;cursor: pointer;border: 0.1px solid #FaF7F7;border-top: none;
}
.content .content_four .tpng:hover {box-shadow: 0px 0px 4px;
}
.content .content_four .tpng h3 {margin-top: -20px;font-weight: 400px;
}
.content .content_four .tpng p {margin: 20px;color: #6F6F6F;
}
.content .content_four .tpng i {margin-top: 20px;position: relative;top: -30px;
}
.content .content_four .tpng .ts {top: -45px;
}
.content .content_four .tpng .ts_p {margin-top: -42px;
}
.content .content_four .tpng img {width: 90px;
}
.content .content_four .tpng .caption {margin-top: 24px;color: #D4C090;
}
.content .content_five {text-align: center;
}
.content .content_five .tt {background-color: #ffffff;
}
.content .content_five h2 {padding-top: 24px;font-weight: 400;
}
.content .content_five p {color: #6E6E6E;padding: 24px 0;
}
.content .content_five .scroll-items {background-color: #ffffff;width: 100%;display: flex;flex-wrap: nowrap;overflow: hidden;margin-bottom: 48px;padding-left: 200px;transition: all 1s linear;
}
.content .content_five .scroll-items .btn_left {display: inline-block;display: none;width: 30px;height: 30px;border: 1px solid;border-radius: 50%;background-color: #fff;text-align: center;position: absolute;left: 0;top: 50%;margin-top: -15px;
}
.content .content_five .scroll-items .btn_left img {width: 30px;height: 30px;
}
.content .content_five .scroll-items .btn_right {position: absolute;right: 10px;top: 50%;margin-top: -15px;display: inline-block;width: 30px;height: 30px;border: 1px solid;border-radius: 50%;background-color: #ffffff;text-align: center;
}
.content .content_five .scroll-items .btn_right img {width: 30px;height: 30px;
}
.content .content_five .scroll-items img {width: 290px;height: 170px;
}
.content .content_five .scroll-items .xx {padding: 0 15px;
}
.content .content_five .scroll-items .xian {width: 291px;box-sizing: border-box;border: 1px solid;background-color: #FDFDFD;
}
.content .content_five .scroll-items strong {display: inline-block;height: 50px;font-size: 18px;font-weight: 100;line-height: 50px;color: #272727;
}
.content .content_five .scroll-items span {position: absolute;top: 5px;display: inline-block;height: 35px;width: 84px;line-height: 35px;color: #EFF9FF;background-color: #C2A661;
}
.content .content_five .beian {margin-bottom: 48px;
}
#foo_fiexd {position: fixed;bottom: 0;background-color: #FFFFFF;
}
.foo_nav {display: flex;justify-content: space-around;
}
.foo_nav .nav_list {text-align: center;
}
.foo_nav .nav_list i {display: inline-block;margin-top: 10px;
}

js代码


window.onresize=resizeBannerImage;//当窗口改变宽度时执行此函数
function resizeBannerImage(){var width = $(window).width();var height = $(window).height();if(width < 640){$("#foo_fiexd").css({display : "block"})$(".left_nav").css({"height" : "120px",position:"relative"})$(".header").css({display : "none"})$(".left_content ul").css({display : "none"})$(".img_one").css({display : "none"})$(".img_two").css({display : "block"})}else{$("#foo_fiexd").css({display : "none"})$(".header").css({display : "block"})$(".left_content ul").css({display : "block"})$(".left_nav").css({height : "auto"})$(".img_one").css({display : "block"})$(".img_two").css({display : "none"})}if(width > 992){$(".left_nav").css({height:height,position:"fixed"})$(".left_content").css({margin : "400px auto"})}else{$(".left_nav").css({position:"relative"})$(".left_content").css({margin : 0})$(".left_content h2").css({marginTop : "50px"})$(".left_content li").css({float : "left",margin : "0px 15px"})}
}
// 页面加载完成设置左侧高度
window.onload = function(){var width = $(window).width();var height = $(window).height();if(width < 640){$("#foo_fiexd").css({display : "block"})$(".img_one").css({display : "none"})$(".img_two").css({display : "block"})$(".left_nav").css({"height" : "120px",position:"relative"})$(".header").css({display : "none"})$(".left_content ul").css({display : "none"})}else{$("#foo_fiexd").css({display : "none"})$(".img_one").css({display : "block"})$(".img_two").css({display : "none"})$(".header").css({display : "block"})$(".left_nav").css({height : "auto"})$(".left_content ul").css({display : "block"})}if(width > 992){$(".left_nav").css({height,height})}else if(width > 640 && width < 992){$(".left_nav").css({position:"relative"})$(".left_content").css({margin : 0})$(".left_content h2").css({marginTop : "50px"})$(".left_content li").css({float : "left",margin : "0px 15px"})}}
// 点击按钮切换导航
var lock = true
$("#nav-menu").click(function(){var width = $(window).width();var height = $(window).height();if(lock){lock = false$(".primary").css({display : "none"})$(".left_content").css({display : "none"})$(".hidden_nav").css({display : "block"})if(width > 640 && width < 992){$(".content").css({display : "none"})}}else{lock = true$(".primary").css({display : "inline-block"})$(".left_content").css({display : "block"})$(".hidden_nav").css({display : "none"})$(".content").css({display : "block"})}})
// 图片滚动效果
$(".btn_right").click(function(){$(".scroll-items").css({paddingLeft : "0"})$(".btn_left").css({display : "block"})$(this).css({display : "none"})
})
$(".btn_left").click(function(){$(".scroll-items").css({paddingLeft : "200px"})$(".btn_right").css({display : "block"})$(this).css({display : "none"})
})

bootstrap实例《一》星巴克官网相关推荐

footstrap实现星巴克官网
footstrap实现响应式星巴克官网文章目录 footstrap实现响应式星巴克官网前言一.footstrap是什么? 二.星巴克官网案例实现 1.使用技术 2.读入数据 3.页面效果总结 ...
星巴克登录老显示服务器,星巴克官网登录不了是咋回事?可能跟这些“原因”有关...
喝咖啡就去星巴克,这是消费者的共识.而在星巴克喝咖啡,除了可以享受到美味的产品外,还可以享受到积分的累积和星享卡的优惠,对于消费者来说,星巴克就像是一个好伙伴.不论是查看品牌信息,还是想要去绑定自己的 ...
html，css响应式布局案例练习--星巴克官网demo
前言继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
python菜鸟教程100实例-python菜鸟教程官网
广告关闭腾讯云双11爆品提前享,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高满返5000元! 之后的某节会讲到如何给mac中的python安装其他模块,比如比较常用的numpy ...
到底谁才能击败星巴克？|【常垒·常识】
常垒·观点我与K先生面见于上周三的一个下午.K先生目前专注于消费和零售的顾问,洞见深刻. 目前中国的零售消费(有品牌露出),具备产业升级的机会: 1. 各类VC投资了一堆SaaS,尽管营收不一定好, ...
Windows 10版星巴克应用现身官网
据外媒报道,星巴克承诺为Windows手机开发一款软件已经有好几月的时间了.该家公司最先则是在今年3月份宣布了该消息,当时表示会在未来30到45天时间内推出,然而并没有.到了6月份,星巴克方面又表示, ...
渗透thinksns官网
(本文涉及的所有漏洞已经被修复!) (由于文章是后来补写的,有些图可能无法抓到.sorry) ThinkSNS(简称TS),开源微博引擎. 一直都在看thinksns的代码,但是由于很彩笔,一直没找到 ...
Android蓝牙连接CC2541,TI官网放出的CC2541蓝牙4.0的android4.3程序
[实例简介] TI官网上下的,可以放心.留着用于毕业设计 [实例截图] [核心代码] xtb926929_7215745 └── SensorTag_Android_Source_1_1_0 ├── ...
【前端做项目常用】相关插件的官网总结
以下整理本人在做项目的时候遇到的一些常用的相关插件的官网: 相关插件的官网: 1.Swiper官网:--常用于轮播图网址: Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 2.iconf ...

bootstrap实例《一》星巴克官网

bootstrap实例《一》星巴克官网相关推荐

最新文章

热门文章