实例介绍
【实例简介】
星巴克主页
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿星巴克 | 用每一杯咖啡传递星巴克独特的咖啡体验 </title>
<link rel="shortcut icon" href="images/logo.svg">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<base href="_blank">
</head>
<body>
<!-- 项目左边 -->
<div class="container-left" id="mainnav">
<div class="menu">
<div class="menu-left">
<a href="#"><img src="./images/logo.svg"></a>
</div>
<div class="nav">门店</div>
<div class="nav">我的账户</div>
<div class="nav">菜单</div>
<div class="menu-right" id="btnSubnav">
<img src="./images/icon-menu.svg" alt="">
</div>
</div>
<div class="menu-text">
<div class="menu-text-top">
心情惬意，来杯咖啡吧 ☕
</div>
<div class="menu-text-bottom">
<img src="./images/icon-login.svg" alt="">
<div class="login">登录</div>
<div class="reges">注册</div>
</div>
</div>
</div>
<!-- 点击容器左边右上角的三条杠会弹出子导航栏 -->
<div class="container-left-subnav" id="subnav">
<div class="menu">
<div class="menu-left">
<a href="#"><img src="./images/logo.svg"></a>
</div>
<div class="subnav-right" id="subnavClose">
<img src="./images/x.png" alt="">
</div>
</div>
<div class="subnav-content" >
<ul class="subnav-content-ul">
<li><a href="">门店</a></li>
<li><a href="">星享俱乐部</a></li>
<li><a href="">菜单</a></li>
<li><hr/></li>
<li><a href="">星巴克移动应用</a></li>
<li><a href="">星礼卡</a></li>
<li><a href="">星巴克臻选™</a></li>
<li><a href="">啡快™- 在线点 到店取</a></li>
<li><a href="">专星送</a></li>
<li><a href="">咖啡星讲堂</a></li>
<li><a href="">上海烘焙工坊</a></li>
<li><a href="">关于星巴克</a></li>
<li><a href="">帮助中心</a></li>
<li><hr/></li>
</ul>
<img src="./images/icon-login.svg">
<div class="login">登录</div>
<div class="reges">注册</div>
<div class="subnav-bottom-text">
English | 隐私政策 | 使用条款
</div>
</div>
<div class="subnav-bottom">
</div>
</div>
<!-- 项目右边 -->
<div class="container-right">
<!--第一部分 轮播图 -->
<div class="banner" id="banner">
<ul class="banner-ul" id="bannerul">
<li><img src="./images/banner01.jpg"></li>
<li><img src="./images/banner02.jpg"></li>
<li><img src="./images/banner03.jpg"></li>
<li><img src="./images/banner04.jpg"></li>
<li><img src="./images/banner01.jpg"></li>
</ul>
<div class="banner-right-buttom" id="btnNext">
<img src="./images/right.png">
</div>
<div class="banner-promotion">广告</div>
</div>
<!-- 第二部分 小图三张 -->
<div class="promotion">
<div class="photoShow">
<a href="https://starbucks.tmall.com/" target="_blank">
<img src="./images/page01.jpg">
</a>
</div>
<div class="photoShow">
<a href="https://www.starbucks.com.cn/design-studio/" target="_blank">
<img src="./images/page02.jpg">
</a>
</div>
<div class="photoShow">
<a href="https://www.starbucks.com.cn/about/careers/" target="_blank">
<img src="./images/page03.jpg">
</a>
</div>
</div>
<!-- 第三部分 咖啡俱乐部 -->
<div class="club">
<div class="club-left">
<div class="club-left-top">星享俱乐部</div>
<div class="club-left-middle">
开启您的星享之旅，星星越多、会员等级越高、<br />
好礼越丰富。
<a href="">了解更多 ></a>
</div>
<div class="club-left-bottom">
<span class="left">注册</span>
<span class="right">登录</span>
</div>
</div>
<div class="club-right"><img src="./images/club.svg"></div>
</div>
<!-- 第四部分 精选，小图四张 -->
<div class="choice">
<div class="choice-top">星巴克精选</div>
<div class="choice-middle">在星巴克天猫旗舰店发现更多咖啡心意</div>
<div class="choice-bottom">
<div class="choice-bottom-card">
<a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">
<img src="./images/card01.png">
<p class="choice-bottom-card-top">会员新礼包</p>
<p class="choice-bottom-card-middle">星享卡新升级<br />更多新意好礼</p>
<a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
</a>
</div>
<div class="choice-bottom-card">
<a href="https://starbucks.tmall.com/p/rd993825.htm?spm=a1z10.1-b-s.w5001-14489348230.6.MtuIoi"
target="_blank">
<img src="./images/card02.png">
<p class="choice-bottom-card-top">星礼卡</p>
<p class="choice-bottom-card-middle">用一份心礼<br />让心意相随</p>
<a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
</a>
</div>
<div class="choice-bottom-card">
<a href="https://starbucks.tmall.com/p/rd103766.htm?spm=a1z10.1-b-s.w5001-14489348230.8.MtuIoi"
target="_blank">
<img src="./images/card03.png">
<p class="choice-bottom-card-top">电子产品券</p>
<p class="choice-bottom-card-middle">心意<br />从这一杯开始</p>
<a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
</a>
</div>
<div class="choice-bottom-card">
<a href="https://starbucks.tmall.com/category-1141443816.htm?spm=a1z10.1-b-s.w4006-14489348233.10.MtuIoi"
target="_blank">
<img src="./images/card04.png">
<p class="choice-bottom-card-top">咖啡生活</p>
<p class="choice-bottom-card-middle">星巴克<br />用心制作</p>
<a href="https://starbucks.tmall.com/p/rd796757.htm" target="_blank">了解更多 ></a>
</a>
</div>
</div>
</div>
<!-- 第五部分（最后一部分） 咖啡文化 -->
<div class="culture">
<div class="culture-top">1912 派克街 | 咖啡星讲堂</div>
<div class="culture-middle">了解更多星巴克咖啡文化</div>
<div class="culture-bottom" id="cultureBottom">
<ul class="culture-ul" id="cultureUl">
<li class="culture-bottom-photo">
<a href="https://www.starbucks.com.cn/coffee-blog/the-origin-of-coffee-and-its-cultivation/"
target="_blank">
<div class="culture-bottom-photo-describe">咖啡知识</div>
<img src="./images/coffeeImg01.jpg">
<p>咖啡的起源与种植</p>
</a>
</li>
<li class="culture-bottom-photo">
<a href="https://www.starbucks.com.cn/coffee-blog/the-4-fundamentals/" target="_blank">
<div class="culture-bottom-photo-describe">咖啡品鉴</div>
<img src="./images/coffeeImg02.jpg">
<p>咖啡调制</p>
</a>
</li>
<li class="culture-bottom-photo">
<a href="https://www.starbucks.com.cn/coffee-blog/roast-story/" target="_blank">
<div class="culture-bottom-photo-describe">咖啡知识</div>
<img src="./images/coffeeImg03.jpg">
<p>咖啡烘焙</p>
</a>
</li>
<li class="culture-bottom-photo">
<a href="https://www.starbucks.com.cn/coffee-blog/pour-over/" target="_blank">
<div class="culture-bottom-photo-describe">咖啡品鉴</div>
<img src="./images/coffeeImg04.jpg">
<p>手冲咖啡</p>
</a>
</li>
</ul>
</div>
<!-- 下一个按钮 -->
<div class="culture-btn-next" id="photoNext">
<img src="./images/rightarrow.png" alt="">
</div>
<div class="culture-btn-pre" id="photoPre">
<img src="./images/leftarrow.png" alt="">
</div>
</div>
<!-- 报备号 -->
<div class="final-text">
<img src="./images/icpicon.png" alt="">
沪公网安备 31010402000253号 | 沪ICP备17003747号
</div>
</div>
<script type="text/javascript" src="./js/my.js"></script>
</body>
</html>
//css
part1
/*初始化开始*/
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul li{
list-style:none;
}
ol li{
list-style:none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.auto-img {
width: 100%;
display: block;
}
/* 去掉图片底部缝隙 */
img{
vertical-align: bottom;
}
@font-face {
font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff2') format('woff2'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*初始化结束*/
part2
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
/* 整体容器左边 */
.container-left{
width: 25%;
height: auto;
position: fixed;
/* background-color: rgba(196, 100, 100, 0.836); */
float: left;
top: 0;
left: 0;
z-index: 2;
/* display: none; */
}
.menu{
height: 50px;
width: 400px;
padding: 30px 10px;
}
.menu-left img{
width: 36px;
height: 36px;
float: left;
margin-left: 20px;
}
.nav{
margin-left: 20px;
float: left;
height: 18px;
font-weight: 700;
line-height: 30px;
}
.menu-right{
float: left;
margin-left: 100px;
margin-top: 6px;
align-items: center;
}
.menu-text{
width: 300px;
margin: 250px 50px;
}
.menu-text-top{
font-size: 26px;
font-weight: 800;
}
.menu-text-bottom{
width: 300px;
height: 100px;
margin-top: 30px;
}
.menu-text-bottom img{
width: 28px;
height: 28px;
float: left;
}
.login{
color: #00a862;
float: left;
font-size: 17px;
line-height: 22px;
margin-left: 10px;
cursor: pointer;
}
.reges{
float: left;
color: #00a862;
line-height: 15px;
font-size: 18px;
padding: 4px 10px;
border: 1px solid #00a862;
border-radius: 48px;
margin-left: 50px;
padding: 5px 13px;
cursor: pointer;
}
/* 容器左边右上角的三条杠会弹出子导航栏 */
.container-left-subnav{
width: 25%;
float: left;
position: fixed;
top: 0px;
left: 0px;
z-index: 1;
opacity: 0;
visibility: hidden;
/* 过渡动画的时间与效果 */
transition: 0.3s ease-in;
}
.subnav-right{
float: right;
width: 56px;
height: 48px;
position: absolute;
top: -3;
right: 0;
margin-left: 30px;
}
.subnav-right img{
width: 38px;
height: 38px;
}
.subnav-content{
padding: 40px 60px 20px;
}
.subnav-content-ul li{
font-size: 20px;
margin-bottom: 13px;
font-weight: bold;
}
.subnav-content-ul a{
color: black;
}
.subnav-content-ul hr{
background-color: rgba(128, 128, 128, 0.486);
margin: 20px 0px;
}
.subnav-content img{
width: 28px;
height: 28px;
float: left;
}
.subnav-bottom-text{
margin-top: 70px;
display: inline;
font-size: 14px;
float: left;
color: grey;
margin-right: 90px;
}
/* 整体右边部分样式 */
.container-right{
width: 75%;
height: 1900px;
float: right;
/* 隐藏水平滚动条 */
overflow-x: hidden;
}
.banner{
width: 1200px;
height: 520px;
position: relative;
overflow: hidden;
}
.banner-ul{
width: 6000px;
height: 520px;
position: absolute;
/* 轮播图平滑移动 */
transition: left 1s linear;
/* left: -1000px; */
}
.banner-ul li{
float: left;
}
.banner-ul img{
width: 1200px;
height: 520px;
}
.banner-right-buttom{
width: 48px;
height: 48px;
position: absolute;
top: 45%;
right: 70px;
/* background-color: #241f1f; */
transition-duration: 0.5s;
}
.banner-right-buttom img{
width: 48px;
height: 48px;
/* position: relative; */
}
.banner-right-buttom:hover{
right: 60px;
}
.banner-promotion{
position: absolute;
top: 10px;
right: 20px;
font-size: 14px;
padding: 2px 4px;
box-sizing: border-box;
background-color: rgb(8,47,50);
color: rgba(253, 253, 253, 0.575);
}
/* 第二部分 小图三张 */
.promotion{
width: 100%;
height: 300px;
padding: 30px 0;
background-color: rgb(247,247,247);
}
.photoShow{
float: left;
width: 28%;
margin-left: 40px;
position: relative;
cursor: pointer;
}
.photoShow img{
position: relative;
border-radius: 5px;
top:10px;
width: 100%;
height: 230px;
transition-duration: 0.4s;
}
/* 悬停浮动效果 */
.photoShow img:hover{
top: 0px;
box-shadow: 0px 2px 2.5px 1px #aaa;
}
/* 第三部分 咖啡俱乐部 */
.club{
/* width: 1200px; */
width: 100%;
height: 200px;
padding: 50px 200px;
}
.club-left{
float: left;
width: 50%;
height: 100px;
}
.club-left-top{
font-size: 22px;
}
.club-left-middle{
color: gray;
margin: 20px 0;
}
.club-left-middle a{
color: #c2a661;
}
.club-left-bottom{
float: left;
width: 300px;
margin-top: 20px;
}
.club-left-bottom span{
color: #00a862;
border: 1px solid #00a862;
border-radius: 48px;
font-size: 18px;
padding: 6px 18px;
box-sizing: border-box;
cursor: pointer;
}
.club-right{
width: 50%;
height: 100px;
float: left;
margin-left: 400px;
position: relative;
top: -70%;
left: 5%;
}
.club-right img{
width: 80%;
height: 72px;
}
/* 第四部分 精选，小图四张 */
.choice{
width: 100%;
height: 375px;
margin:30px 0px;
padding: 15px 200px;
background-color: rgb(247,247,247);
box-sizing: border-box;
}
.choice-top{
font-size: 22px;
font-weight: bold;
width: 50%;
/* position: absolute; */
margin: 0px 350px;
}
.choice-middle{
color: gray;
width: 300px;
margin: 20px 270px;
}
.choice-bottom{
width: 100%;
height: 190px;
margin-top: 30px;
float: left;
}
.choice-bottom-card{
width: 22%;
height: 180px;
margin-left: 20px;
background-color: #ffffff;
text-align: center;
box-shadow:0px 0px 0.1px 0.1px rgba(151, 150, 150, 0.5) ;
position: relative;
top: 20px;
left: 2%;
float: left;
/* border: 0.1px solid gray; */
border-radius: 5px;
transition-duration: 0.5s;
cursor: pointer;
}
.choice-bottom-card img{
position: relative;
top: -30px;
}
.choice-bottom-card:hover{
top: 10px;
box-shadow: 0px 2px 2.5px 1px #aaa;
}
.choice-bottom-card a{
color: #c2a66c;
font-size: 13px;
}
.choice-bottom-card-top{
font-weight: bold;
margin-top: -20px;
margin-bottom: 10px;
}
.choice-bottom-card-middle{
color: gray;
margin-bottom: 10px;
font-size: 15px;
line-height: 28px;
}
/* 第五部分 */
.culture{
width: 100%;
height: 20%;
padding: 2% 10%;
box-sizing: border-box;
}
.culture-top{
font-weight: bold;
font-size: 22px;
width: 100%;
margin: 0 30%;
margin-bottom: 3%;
}
.culture-middle{
color: gray;
font-size: 16px;
width: 100%;
margin: 0 34%;
}
.culture-bottom{
width: 100%;
height: 30%;
margin-left: -10%;
position: relative;
/* overflow: hidden; */
/* float: left; */
}
.culture-ul{
width: 1600px;
position: absolute;
/* 平滑移动 */
transition: 0.5s linear;
/* 向右平滑移动 */
/* transition: right 0.5s linear; */
overflow: hidden;
box-sizing: border-box;
padding: 0px 130px;
}
.culture-bottom-photo{
width: 300px;
height: 210px;
float: left;
margin-top: 4%;
margin-left: 20px;
box-shadow:0.5px 0px 0px 0px rgba(128, 128, 128, 0.438) ;
border-bottom: 0.5px solid rgba(128, 128, 128, 0.438);
border-right: 0.5px solid rgba(128, 128, 128, 0.438);
border-radius: 3px;
position: relative;
top: 10px;
transition-duration: 0.5s;
cursor: pointer;
}
.culture-bottom-photo:first-child{
margin-left: 70px;
}
.culture-bottom-photo:hover{
top: 0px;
/* box-shadow: 0px 2px 2.5px 1px #aaa; */
}
.culture-bottom-photo img{
width: 100%;
height: 160px;
}
.culture-bottom-photo-describe{
position: absolute;
top: 2%;
background-color: rgb(194,166,97);
color: white;
padding: 6px 10px;
}
.culture-bottom-photo p{
margin-top: 10px;
margin-left: 10px;
color:rgba(0, 0, 0, 0.575);
}
.culture-btn-pre img{
position: relative;
top: 0px;
left: -90px;
background-color: #fff;
border-radius: 48px;
cursor: pointer;
}
.culture-btn-next img{
position: relative;
top: 38px;
right: -950px;
background-color: #ffffff;
border-radius: 48px;
cursor: pointer;
}
/* 最底部的报备号 */
.final-text{
width: 100%;
height: 1%;
text-align: center;
margin-left: -3%;
margin-top: 2rem;
}
标签： 主页
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论