星巴克官网仿写

HTML部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width

pw545

690人浏览 · 2022-05-30 15:28:42

pw545 · 2022-05-30 15:28:42 发布

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星巴克</title>
    <link rel="stylesheet" href="/fontawesome/fontawesome-free-6.1.1-web/css/all.css">
    <link rel="stylesheet" href="/新建文件夹/html与css/公共样式表.css">
    <link rel="stylesheet" href="/新建文件夹/html与css/重置样式表.css">
    <link rel="stylesheet" href="/新建文件夹/html与css/星巴克.css">
    <link rel="stylesheet" media="screen and (max-width:640px)" href="/新建文件夹/html与css/星巴克 200.css">
    <link rel="stylesheet" media="screen and (max-width:1024px) and (min-width:641px)" href="/新建文件夹/html与css/星巴克2 125.css">
</head>
<body>
    <div class="all">
        <div class="nav">
            <ul>
                <li><a href="#"><span class="myz"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-home.svg" class="hhhh"></span><div class="my">门店</div></a></li>
                <li><a href="#"><span class="myz"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-stores.svg"></span><div class="my">菜单</div></a></li>
                <li><a href="#"><span class="myz"><img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg" alt=""></span><div class="my">我的账户</div></a></li>
                <li><a href="#"><span class="myz"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-menu.svg"></span><div class="my">门店</div></a></li>
                <li><a href="#"><span class="myz"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-more.svg"></span><div class="my">更多</div></a></li>
                </ul>
        </div>
        <div class="left"> 
            <div  class="faen"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/icons/icon-hamburger.svg" class="fen" alt=""></a></div>  
            <div class="bott">
            <ul>
                <li><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" class="logo" alt=""></a></li>
                <li><a href="#" class="zi"><strong>门店</strong></a></li>
                <li><a href="#" class="zi zi2"><strong>我的账户</strong></a></li>
                <li><a href="#" class="zi"><strong>菜单</strong></a></li>
            </ul>
            <h1>心情惬意，来杯咖啡吧☕</h1>
            <div class="deng">
                <div class="ff"><a href=""><img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg" alt=""></a></div>
                <div><a href="#">登录</a></div>
                <div class="dd"><a href="#" class="zhu">注册</a></div>
            </div>
        </div>
        <div class="hov">
            <div class="fir"><a href="#"><img class="logo1" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" alt=""></a><a href="#"><i class="fa fa-times" id="close"></i></a></div>
            <div class="top">
            <div><a href="#"><strong>门店</strong></a></div>
            <div><a href="#"><strong>星享俱乐部</strong></a></div>
            <div><a href="#"><strong>菜单</strong></a></div>
            <hr>
        </div>
        <div class="bottom">
            <div><a href="#">星巴克移动应用</a></div>
            <div><a href="#">星礼卡</a></div>
            <div><a href="#">星巴克臻选</a></div>
            <div><a href="#">咖快-在线点 到店取</a></div>
            <div><a href="#">专星送</a></div>
            <div><a href="#">咖啡行讲堂</a></div>
            <div><a href="#">上海烘焙工坊</a></div>
            <div><a href="#">关于星巴克</a></div>
            <div><a href="#">帮助中心</a></div>
            <hr>
        </div>
        <div class="deng2">
            <div class="ff2"><a href=""><img src="https://www.starbucks.com.cn/assets/icons/icon-account.svg" alt=""></a></div>
            <div class="ff3"><a href="#">登录</a></div>
            <div class="dd2"><a href="#" class="zhu">注册</a></div>
        </div>
        <div class="eng">
            <ul>
                <li><a href="#">English</a><span>|</span></li>
                <li><a href="#">隐私政策</a><span>|</span></li>
                <li><a href="#">使用条款</a></li>
            </ul>
        </div> 
        </div>
    </div>
        <div class="right">
            <div class="tu"><img class="first" src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_61babe13-d569-476b-8bd6-e75068943318.jpg" alt="">           <a href="#"><i class=" tubiao fa fa-arrow-right"></i></a></div>
            <div class="rightfirst">
            <div class="littletu"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" class="xiao" alt=""></a></div>
            <div class="littletu"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/starbucks-design-studio-web-china.jpg" class="xiao" alt=""></a></div>
            <div class="littletu"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/homepage-career-cn.jpg" class="xiao" alt=""></a></div>
        </div>
         <div class="xing">
            <div class="left1">
            <h3>星享俱乐部</h3>
            <div class="hang">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#" class="konw">了解更多<i class="fas fa-angle-right "></i></a></div>
             <div class="reg"><a href="" class="register">注册</a><a href="" class="enter">登录</a></div>
        </div>
                <div class="xxt"><img class="xt" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg" alt=""></div>
    </div>
            <div class="jing">
                <h3>星巴克精选</h3>
                    <div class="tian">在星巴克天猫旗舰店发现更多咖啡心意</div>
                <br>
                <ul class="all1">
                <li class="vip"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png" alt="">
                <p class="title1"><strong>会员星礼包</strong></p>
                <p class="margin1">星享卡新升级</p>
                <p class="margin1">更多心意好礼</p>
                <p class="pad1">了解更多><i class=""></i></p></a></li>
                <li class="card"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-02.png" alt="">
                    <p class="title2"><strong>会员星礼包</strong></p>
                    <p class="margin2">星享卡新升级</p>
                    <p class="margin2">更多心意好礼</p>
                    <p class="pad2">了解更多><i class=""></i></p></a></li>
                <li class="ele"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-eticket.png" alt="">
                    <p class="title3"><strong>会员星礼包</strong></p>
                    <p class="margin3">星享卡新升级</p>
                    <p class="margin3">更多心意好礼</p>
                    <p class="pad3">了解更多><i class=""></i></p></a></li>
                <li class="cof"><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-eticket.png" alt="">
                    <p class="title4"><strong>会员星礼包</strong></p>
                    <p class="margin4">星享卡新升级</p>
                    <p class="margin4">更多心意好礼</p>
                     <p class="pad4">了解更多><i class=""></i></p></a></li>  
              </ul>
    </div>
    <div class="class">
        <div class="pai">1912 派克街 | 咖啡星讲堂</div>
        <div class="culture">了解更多星巴克咖啡文化</div>
        <div class="hahaha"><div class="bigtu"><div class="origin"><a href="#"><img class="origin1" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-coffee-cultivation-kv.jpg" alt=""><span class="words">咖啡的起源与培植</span> </a></div>
        <div class="tiao"><a href="#"><img class="tiao1" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-4-fundamentals-kv.jpg" alt=""><span class="words">咖啡调剂</span></a></div>
        <div class="hot"><a href="#"><img class="hot1" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-roast-story-kv.jpg" alt=""><span class="words">咖啡烘焙</span></a></div>
        <div class="shou"><a href="#"><img class="shou1" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/coffeehouse-pour-over-kv.jpg" alt=""><span class="words">手冲咖啡</span></a></div>
    </div>
</div>
    </div>
    <div class="police"><a href=""><img class="po" src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/icpicon.png" alt="">沪公网安备 31010402000253号 | 沪IPC备17003747号</a></div>
</div>
</div>

</body>
</html>

css部分：

.all
{
    width: 100%;
    position: relative;
}
.deng2
{
    display: flex;
    flex-direction: row;
}
.ff2
{
    position: relative;
    left: 40px;
}
.bott{
    height: 100%;
}
.ff3
{
    color: green;
    position: relative;
    left: 10px;
    top: 5px;
}
.dd2
{
    position: relative;
    left: -10px;
    top: 5px;
}
.faen
{
    position: absolute;
    right: 0px;
    top: 15px;
}
.hov div{
    margin: 20px;
    font-size: 18px;
}
.hov .logo1{
    width: 36px;
    height: 36px;
}
.hov a{
color: #000000de;
text-decoration: none;
}
.hov
{
    height: 100%;
}
.top
{
    padding: 0px 24px 0px 44px;
}
.top hr{
    margin-left: 20px;
}
.bottom hr
{
    margin-left: 20px;
}
.bottom
{
    padding: 0px 24px 0px 44px;
    margin-top: 30px;
    color: #000000de;
}
.left
{
    position: fixed;
    width: 30%;
    height: 100%;
    overflow: hidden;
}
.hov{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    overflow-x:hidden;
}
.faen:active+.bott
{
    display: none;
}
.faen:active{
    display: none;
}
.letf .logo
{
    max-width: 100%;
}
.left .zi
{
    font-size: 16px;
    padding: 5px 5px;
}
.right
{
    width: 70%;
    margin-left: 30%;
}
ul
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}
ul a
{
    color: #000000de;
    text-decoration: none;
    padding: 5px 10px;
}
ul .zi
{
flex: 1;
}
.left .fen
{
   position: absolute;
   right: 15px;
}
h1
{
    font-size: 26px;
    margin-top: 70%;
    margin-left: 10%;
}
.deng
{
    margin-top: 5%;
    margin-left: 10%;
    display: flex;
    flex-direction: row;
    position: relative;
}
.ff
{
    position: relative;
    bottom: 5px;
}
.dd
{
    position: relative;
    left: 20px;
}
.deng div a
{
    margin-left: 2px;
    text-decoration: none;
    color: green;
}
.tu
{
    width: 100%;
    position: relative;
}
.tu img
{
    width: 100%;
}
.fir{
    position: relative;
}
.tubiao
{
    position: absolute;
    right: 3%;
    top: 45%;
    font-size: 30px;
}
#close
{
    display: inline-block;
    width: 48px;
    height: 60px;
    position: absolute;
    left: 315px;
    top: 0px;
}
.eng span
{
    position: relative;
    color: #00000061;
    left: 50px;
}
.eng
{
    width: 300px;
}
.eng ul a{
    color: #00000061;
    font-size: 14px;
    position: relative;
    left: 50px;
}
.littletu
{
    padding: 0px 12px;
    flex: 1;
    border-radius: 2px;
    position: relative;
}
.littletu img
{
    width: 200px;
    position: relative;
}
.rightfirst
{
    width: 100%;
    height: 5%; 
    padding: 24px 0px;
    display: flex;
    justify-content: space-around;
    background-color: rgb(247, 247, 247);
}
.rightfirst img
{
    width: 100%;
}
.rightfirst .littletu .xiao:hover
{
    transition: 0.3s;
    top: -5px;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
}
.left1 h3
{
    font-size: 20px;
    margin-top: 40px;
    
}
.left1
{
    width: 50%;
    height: 249px;
    padding: 10px 50px;
}
.zhu
{
    width: 60px;
    height: 30px;
    border: 1px #00a862 solid;
    padding: 5px 15px;
    border-radius: 48px;
}
.xing
{
    display: table;
    margin: 0 auto;
    background-color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 900px;
}
.hang .konw{
    text-decoration: none;
    color: #c2a661;
}
.hang
{
    line-height: 40px;
    padding-top: 20px;
}
.hang i
{
    margin-left: 5px;
}
.register
{
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-left: 0px;
    margin-top: 15px;
    border-radius: 30px;
    text-decoration: none;
    color: green; 
    display: block;
    }
.enter
{
    display: block; 
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-top: -40px;
    margin-left: 90px;
    border-radius: 30px;
    color: green;
    text-decoration: none;
}
.xxt
{
    width: 50%;
}
.jing
{
    margin-top: 10px;
    width: 100%;
    background-color: rgb(247, 247, 247);
}
.jing h3
{
    text-align: center;
    position: relative;
     left: -1%;
    padding-top: 2%;
}
.jing .tian{
    text-align: center;
}
.all1
{
    margin-top: 1%;
    display: flex;
    flex-direction: row;
    justify-content:center;
    position: relative;
}
.all1 li
{
margin: 30px 10px;
}
.nav ul{
    display: none;
}
.vip{
    width: 166px;
    height: 196px;
   margin-top:50px;
   background-color: #ffffff;
   position: relative;
   height: 196.35px;
}
.vip img
{
    display: block;
    width: 102px;
    height: 72px;
   margin-top: -50px;
  margin-right: auto;
   margin-left:auto;
}
.vip .margin1
{
    margin: 15px 0px 18px;
}
.pad1
{
    color: #c2a661;
    margin: 0px 0px 24px;
}
.vip p
{
text-align: center;
}
.title1
{
    margin-top: 10px;
}
.ele{
    width: 166px;
    height: 200px;
   margin-top: 50px;
   background-color: #ffffff;
   margin:0px 12px;
   position: relative;
}
.ele img
{
    display: block;
width: 102px;
height: 72px;
margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
}
.ele .margin3
{
    margin: 15px 0px 18px;
}
.pad3
{
    color: #c2a661;
    margin: 0px 0px 24px;
}
.ele p
{
text-align: center;
}
.title3
{
    margin-top: 10px;
}
.cof{
    width: 166px;
    height: 200px;
   margin-top: 50px;
   background-color: #ffffff;
   margin:0px 12px;
   position: relative;
}
.cof img
{
    display: block;
width: 102px;
height: 72px;
margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
}
.cof .margin4
{
    margin: 15px 0px 18px;
}
.pad4
{
    color: #c2a661;
    margin: 0px 0px 24px;
}
.cof p
{
text-align: center;
}
.title4
{
    margin-top: 10px;
}
.card{
    width: 166px;
    height: 200px;
   margin-top: 50px;
   background-color: #ffffff;
margin: 0px 12px;
position: relative;
}
.card img
{
width: 102px;
height: 72px;
display: block;
margin-top: -50px;
    margin-left: auto;
    margin-right: auto;
}
.card .margin2
{
    margin: 15px 0px 18px;
}
.pad2
{
    color: #c2a661;
    margin: 0px 0px 24px;
}
.card p
{
text-align: center;
}
.title2
{
    margin-top: 10px;
}
.right
{
    overflow: hidden;
}
.cof:hover
{
    top: -5px;
    transition:all 0.3s;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
}
.ele:hover
{
    top: -5px;
transition: 0.3s;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
}
.card:hover
{
    top: -5px;
    transition: 0.3s;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
}
.vip:hover
{
    top: -5px;
    transition: 0.3s;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
}
.class
{
    width: 100%;
    height: 420px;
}
.pai{
    font-size: 22px;
    color: #000000;
    margin:20px 0px 18px;
    padding: 0px 24px;
    text-align: center;
}
.culture
{
    color: #0000008f;
    text-align: center;
    margin: 0px 0px 24px;
    padding: 0px 24px;
}
.origin
{
    width: 270px;
    height: 225px;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
    margin: 12px 10px 12px 10px;

}
.origin1
{
    width: 270px;
    height: 170px;
}
.tiao
{
    width: 270px;
    height: 225px;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
    margin: 12px 10px 12px 10px;
}
.tiao1
{
    width: 270px;
    height: 170px;
}
.bigtu
{
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: start;
    align-items: center;
}
.hot
{
   width: 270px;
    height: 225px;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
    margin: 12px 10px 12px 10px;
}
.hot1
{
    width: 270px;
    height: 170px;
}
.class .words{
    display: inline-block;
    margin-left: 10px;
    color: #000000de;
    margin-top: 15px;
}
.class a
{
    text-decoration: none;
}
.origin:hover
{
    margin-top: 10px;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
    transition: 0.3s;
}
.hot:hover
{
    margin-top: 10px;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
    transition: 0.3s;
}
.tiao:hover
{
    margin-top: 10px;
    box-shadow:  1px 1px 3px 1px rgba(0, 0, 0, .5);
    transition: 0.3s;
}.shou
{
    width: 270px;
    height: 225px;
    background-color: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
    margin: 12px 10px 12px 10px;
}
.shou1
{
    width: 270px;
    height: 170px;
}
.police
{
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}
.police a
{
    text-decoration: none;
    color: #666666;
}
.po{
    width: 10px;
    height: 10px;
}
@media screen and (min-width:1525px)
{
        .hahaha
{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
}

缩放到百分之125时的 css代码块：

 .left
{
    width: 100%;
    height: 184px;
    position: relative;
}
.left h1
{
    margin-top: 3% ;
    margin-left: 10px;
}
.left .deng
{
    margin-left: 10px;
    margin-top: 5%;
}
.right
{
    margin-left: 0px;
    width: 100%;
}

缩放到百分之200以上的css代码块：

.left
{
    width: 100%;
    position: relative;
    height: 60px;
}
.right{
    width: 100%;
    margin-left:  0%;
}
.hov
{
    display: none;
}
.first
{
    width: 100%;
}
.bott
{
    height: 26px;
}
.faen
{
    display: none;
}
.bott ul
{
    display: none;
}
.bott h1
{
    width: 362px;
    height: 26px;
    margin:16px 16px 0px ;
    position: relative;
}
.bott .deng{
    display: none;
}
.tu
{
    width: 100%;
}
.rightfirst
{
    display: flex;
    flex-direction: column;
}
.all1
{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.all1 li
{
    width: 40%;
}
.nav ul
{
  background-color: #ffffff;
}
.nav ul li
{
    color: #ffffff;
    flex: 1;
}
.my
{
    font-size: 12px;
    color: #0000008F;
}
.nav ul
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 55px;
    position: fixed;bottom: 0px;
    z-index: 9999999999;
    color: #0000008F;
}
.myz
{
    position: relative;
    left: -5px;
}
.nav ul li
{
    text-align: center;
}
.nav a
{
    color: #000000de;
    text-decoration: none;
}
.xing{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.xxt
{
    display: flex;
    justify-content: center;
}
.left1{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left1 a
{
    display: block;
}
.left1 h3
{
    text-align: center;
}
.hang
{
    text-align: center;
}
.xxt
{
    width: 100%;
}

成果展示：