html，css响应式布局案例练习--星巴克官网demo

最新推荐文章于 2024-06-02 12:34:52 发布
最新推荐文章于 2024-06-02 12:34:52 发布
阅读量2.9k 收藏 45
点赞数 7
分类专栏： web前端 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44997264/article/details/121373558
版权

前言

继续练习响应式布局，我这次选的是星巴克的官网，进行一个页面的还原，还原程度达不到100%，不过也是可以进行一个学习过程的一个练习，细节很多，本人由于初学阶段，用了一天的时间就写了一个官网首页，兼容PC,平板，手机三个端


一、布局案例经验分享

1.踩过的坑：

1.在敲代码写页面的时候，很容易造成塌陷的问题 见下图的原因，以及解决的一些的方式，

 2.由于页面进行是使用媒体查询的方式，进行缩放的时候图片不能失真，所以一开始的宽度尽量给百分比，这样为了手机端的一个方便

3.敲代码的时候一定要仔细仔细再仔细，要不然出现bug，自己很难找到！


二、代码分享

涉及到的图片，这里没有上传，你们可以去官网进行下载


1.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="./css/reset.css">
    <!-- PC端的 -->
    <link rel="stylesheet" href="./css/pc.css" media="screen and (min-width:1200px)">
    <!-- 平板端的 -->
    <link rel="stylesheet" href="./css/flat.css" media="screen and (min-width:800px) and (max-width:1200px)">
    <!-- 手机端的 -->
    <link rel="stylesheet" href="./css/phone.css" media="screen and (max-width:800px)">
    <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">
</head>
<body>
    <div class="big">
        <div class="left">
            <div class="top">
                <img src="./img/logo.png" alt="">
                <a href="">门店</a>
                <a href="">我的账户</a>
                <a href="">菜单</a>
                <img src="./img/more.png" alt="">
            </div>
            <div class="bottom">
                <p>心情惬意，来杯咖啡吧 ☕</p>
                <img src="./img/person.png" alt="">
                <a href="">登录</a>
                <a href="">注册</a>
            </div>
        </div>
        <div class="right">
            <div class="tu">
                <p>广告</p>
            </div>
            <div class="picture">
                <img src="./img/1.jpg" alt="">
                <img src="./img/2.jpg" alt="">
                <img src="./img/3.jpg" alt="">
            </div>
            <div class="tuwen">
                <div class="tuwen-left">
                    <h3>星享俱乐部</h3>
                    <p>开启您的星享之旅，星星越多、会员等级越高、</p>
                    <p>好礼越丰富。<a href="">了解更多 ›</a></p>
                    <a class="zc" cl href="">注册</a><a class="dl" href="">登录</a>
                </div>
                <div class="tuwen-right">
                </div>
            </div>
            <div class="jingxuan">
                <h3 class="one">星巴克精选</h3>
                <p class="one-p">在星巴克天猫旗舰店发现更多咖啡心意</p>
                <div class="jingxuan-tu">
                    <img src="./img/download.png" alt="">
                    <h3>会员星礼包</h3>
                    <p>星享卡新升级</p>
                    <p>更多心意好礼</p>
                    <a href="">了解更多 ›</a>
                </div>
                <div class="jingxuan-tu">
                    <img src="./img/download-1.png" alt="">
                    <h3>会员星礼包</h3>
                    <p>星享卡新升级</p>
                    <p>更多心意好礼</p>
                    <a href="">了解更多 ›</a>
                </div>
                <div class="jingxuan-tu">
                    <img src="./img/download-2.png" alt="">
                    <h3>会员星礼包</h3>
                    <p>星享卡新升级</p>
                    <p>更多心意好礼</p>
                    <a href="">了解更多 ›</a>
                </div>
                <div class="jingxuan-tu">
                    <img src="./img/download-3.png" alt="">
                    <h3>会员星礼包</h3>
                    <p>星享卡新升级</p>
                    <p>更多心意好礼</p>
                    <a href="">了解更多 ›</a>
                </div>
            </div>
            <div class="cofice">
                <h3>1912 派克街 | 咖啡星讲堂</h3>
                <p class="cofice-text">了解更多星巴克咖啡文化</p>
                <!-- <div class="huadong">
                    <div class="cofice-tu" style="background-image: url(../img/download.jpg);">
                        <p>咖啡知识</p>
                        <p>咖啡的起源与培养</p>
                    </div>
                    <div class="cofice-tu" style="background-image: url(../img/download-1.jpg);">
                        <p>咖啡知识</p>
                        <p>咖啡调制</p>
                    </div>
                    <div class="cofice-tu" style="background-image: url(../img/download-2.jpg);">
                        <p>咖啡知识</p>
                        <p>咖啡的烘焙</p>
                    </div>
                </div> -->
                <div class="cofice-tu" style="background-image: url(../img/download.jpg);">
                    <p>咖啡知识</p>
                    <p>咖啡的起源与培养</p>
                </div>
                <div class="cofice-tu" style="background-image: url(../img/download-1.jpg);">
                    <p>咖啡知识</p>
                    <p>咖啡调制</p>
                </div>
                <div class="cofice-tu" style="background-image: url(../img/download-2.jpg);">
                    <p>咖啡知识</p>
                    <p>咖啡的烘焙</p>
                </div>
                <p class="beianhao">沪公网安备 31010402000257号 | 沪ICP备17003757号 </p>
            </div>
        </div>

    </div>

</body>
</html>


2.css（分三个端）

1.pc端css

代码如下（示例）：

.big{
    width: 100%;
    overflow: hidden;
}
.big .left{
    position: fixed;
    left: 0;
    width: 30%;
    overflow: hidden;
}

.big .left .top{
    margin-top: 10px;
    width: 100%;
    height: 40px;
    overflow: hidden;
}
.big .left .top img:nth-of-type(1){
    float: left;
    width: 40px;

}
.big .left .top a{
    font-size:40px;
    line-height: 40px;
    margin-left: 20px;
}
.big .left .top img:nth-of-type(2){
    float: right;
    height: 40px;
    line-height: 40px;
}
.big .left .bottom{
    width: 100%;
    height: 500px;
    margin-top: 500px;  
    overflow: hidden;
}
.big .left .bottom p{
    font-size: 32px;
    text-align: center;
}
.big .left .bottom img{
    height: 20px;
    display: block;
    margin-left: 100px;
    margin-top: 30px;
    float: left;
}
.big .left .bottom a:nth-of-type(1){
    display: block;
    font-size: 20px;
    height: 20px;
    float: left;
    margin-top:30px;
    margin-left: 20px;
    color: chartreuse;
}
.big .left .bottom a:nth-of-type(2){
    text-align: center;
    display: block;
    width: 60px;
    font-size: 20px;
    height: 30px;
    float: left;
    line-height: 30px;
    margin-top: 20px;
    margin-left: 20px;
    color: chartreuse;
    border: 1px solid green;
    border-radius: 20px;
}
.big .right{
    width: 70%;
    margin-left: 30%;
    overflow: hidden;
}
.big .right .tu{
    width: 100%;
    height: 431px;
    background-image: url(../img/ad.jpg);
    background-size: 100% 100%;
    background-position: center center;
}
.big .right .tu p{
    width:40px;
    background-color: black;
    text-align: center;
    font-size: 20px;
    color:#fff;
    float: right;
}
.big .right .picture{
    width: 100%;
    height: 230px;
    background-color: #f7f7f7;
}
.big .right .picture img{
    width: 30%;
    height: 180px;
    margin-left: 2%;
    margin-top: 25px;
}
.big .tuwen{
    width: 100%;
    height: 249px;
    margin-top: 25px;
    overflow: hidden;
}
.tuwen .tuwen-left{
    width: 60%;
    overflow: hidden;
    height: 249px;
    float: left;
}
.tuwen .tuwen-left h3{
    font-size: 20px;
    margin-top: 70px;
    margin-left: 150px;
}
.tuwen .tuwen-left p{
    margin-left: 150px;
    margin-top: 10px;
}
.tuwen .tuwen-left .zc{
    float: left;
    display: block;
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-left: 150px;
    margin-top: 15px;
    border-radius: 30px;
}
.tuwen .tuwen-left .dl{
    float: left;
    display: block;
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-top: 15px;
    margin-left: 20px;
    border-radius: 30px;
}
.tuwen .tuwen-right{
    float: right;
    width: 40%;
    height: 249px;
    background-image: url(../img/club.png);
    background-size: 100% 100%

}
.big .right .jingxuan{
    width: 100%;
    height: 415px;
    background-color: #f7f7f7;
    overflow: hidden;
}
.big .right .jingxuan .one{
    font-size:20px;
    text-align: center;
    margin-top:38px ;
}
.big .right .jingxuan .one-p{
    font-size:20px;
    text-align: center;
    margin-top:26px ;
    color: #b8b8b8;
}
.big .right .jingxuan .jingxuan-tu{
    width:15% ;
    height: 221px;
    background-color: white;
    float: left;
    margin-top: 50px;
    margin-left:8%;
}
.big .right .jingxuan .jingxuan-tu img{
    width: 60%;
    margin-left: 20%;
    margin-top: -20%;
}
.big .right .jingxuan .jingxuan-tu h3{
    text-align: center;
    margin-top: 27PX;

}
.big .right .jingxuan .jingxuan-tu P{
    margin-top: 20PX;
    text-align: center;
    color: #b8b8b8;

}
.big .right .jingxuan .jingxuan-tu a{
    display: block;
    margin-top: 30px;
    text-align: center;
    color: #eee9da;
}
.big .right .cofice{
    widows: 100%;
    height: 435px;
    overflow: hidden;
}

.cofice h3{
    font-size:20px;
    text-align: center;
    margin-top:38px ;
}
.cofice .cofice-text{
    font-size:20px;
    text-align: center;
    margin-top:26px ;
    color: #b8b8b8;
}
.cofice .cofice-tu{
    float: left;
    width: 30%;
    height:40%;
    margin-top: 40px;
    background-size: 100% 80%;
    background-repeat: no-repeat;
     margin-left: 3%;
    
}
.cofice .cofice-tu p:nth-of-type(1){
    width: 30%;
    height: 35px;
    background-color: #b9a565;
    text-align: left;
    line-height: 35px;
    margin-top: 7px;
}
.cofice .cofice-tu p:nth-of-type(2){
    margin-top: 110px;
    margin-left: 10%;
}
.cofice .beianhao{
    overflow: hidden;
    width: 100%;
    height: 30px;
    margin-top:262px;
    text-align: center;
    line-height: 30px;
}

2.平板端css

代码如下（示例）

.big{
    width: 100%;
    overflow: hidden;
}
.big .left{

    width: 100%;
    height: 182px;
    overflow: hidden;

}

.big .left .top{
    margin-top: 10px;
    width: 100%;
    height: 40px;
    overflow: hidden;
}
.big .left .top img:nth-of-type(1){
    float: left;
    width: 40px;

}
.big .left .top a{
    font-size:40px;
    line-height: 40px;
    margin-left: 20px;
}
.big .left .top img:nth-of-type(2){
    float:right;
    height: 40px;
    line-height: 40px;
}
.big .left .bottom{
    width: 100%;
    overflow: hidden;
}
.big .left .bottom p{
    font-size: 32px;
    margin-top: 20px;

}
.big .left .bottom img{
    height: 20px;
    display: block;
    margin-top: 30px;
    float: left;
}
.big .left .bottom a:nth-of-type(1){
    display: block;
    font-size: 20px;
    height: 20px;
    float: left;
    margin-top:30px;
    color: chartreuse;
}
.big .left .bottom a:nth-of-type(2){
    text-align: center;
    display: block;
    width: 60px;
    font-size: 20px;
    height: 30px;
    float: left;
    margin-left: 20px;
    line-height: 30px;
    margin-top: 20px;
    color: chartreuse;
    border: 1px solid green;
    border-radius: 20px;
}
.big .right{
    width: 100%;
}
.big .right .tu{
    width: 100%;
    height: 431px;
    background-image: url(../img/ad.jpg);
    background-size: 100% 100%;
    background-position: center center;
}
.big .right .tu p{
    width:40px;
    background-color: black;
    text-align: center;
    font-size: 20px;
    color:#fff;
    float: right;
}
.big .right .picture{
    width: 100%;
    height: 230px;
    background-color: #f7f7f7;
}
.big .right .picture img{
    width: 30%;
    height: 180px;
    margin-left: 2%;
    margin-top: 25px;
}
.tuwen{
    width: 100%;
    height: 249px;
    margin-top: 25px;
}
.tuwen .tuwen-left{
    width: 60%;
    overflow: hidden;
    height: 249px;
    float: left;
}
.tuwen .tuwen-left h3{
    font-size: 20px;
    margin-top: 70px;
    margin-left: 150px;
}
.tuwen .tuwen-left p{
    margin-left: 150px;
    margin-top: 10px;
}
.tuwen .tuwen-left .zc{
    float: left;
    display: block;
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-left: 150px;
    margin-top: 15px;
    border-radius: 30px;
}
.tuwen .tuwen-left .dl{
    float: left;
    display: block;
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-top: 15px;
    margin-left: 20px;
    border-radius: 30px;
}
.tuwen .tuwen-right{
    float: right;
    width: 40%;
    height: 249px;
    background-image: url(../img/club.png);
    background-size: 100% 100%
}
.big .right .jingxuan{
    width: 100%;
    height: 415px;
    background-color: #f7f7f7;
    overflow: hidden;
}
.big .right .jingxuan .one{
    font-size:20px;
    text-align: center;
    margin-top:38px ;
}
.big .right .jingxuan .one-p{
    font-size:20px;
    text-align: center;
    margin-top:26px ;
    color: #b8b8b8;
}
.big .right .jingxuan .jingxuan-tu{
    width:15% ;
    height: 221px;
    background-color: white;
    float: left;
    margin-top: 50px;
    margin-left:8%;
}
.big .right .jingxuan .jingxuan-tu img{
    width: 60%;
    margin-left: 20%;
    margin-top: -20%;
}
.big .right .jingxuan .jingxuan-tu h3{
    text-align: center;
    margin-top: 27PX;

}
.big .right .jingxuan .jingxuan-tu P{
    margin-top: 20PX;
    text-align: center;
    color: #b8b8b8;

}
.big .right .jingxuan .jingxuan-tu a{
    display: block;
    margin-top: 30px;
    text-align: center;
    color: #eee9da;
}
.big .right .cofice{
    widows: 100%;
    height: 435px;
    overflow: hidden;
}

.cofice h3{
    font-size:20px;
    text-align: center;
    margin-top:38px ;
}
.cofice .cofice-text{
    font-size:20px;
    text-align: center;
    margin-top:26px ;
    color: #b8b8b8;
}
.cofice .cofice-tu{
    float: left;
    width: 30%;
    height:40%;
    margin-top: 40px;
    background-size: 100% 80%;
    background-repeat: no-repeat;
    margin-left: 3%;
}
.cofice .cofice-tu p:nth-of-type(1){
    width: 30%;
    height: 35px;
    background-color: #b9a565;
    text-align: left;
    line-height: 35px;
    margin-top: 7px;
}
.cofice .cofice-tu p:nth-of-type(2){
    margin-top: 110px;
    margin-left: 10%;
}
.cofice .beianhao{
    overflow: hidden;
    width: 100%;
    height: 30px;
    margin-top:262px;
    text-align: center;
    line-height: 30px;
}

3.手机端的css

代码如下（示例）

.big{
    width: 100%;
    overflow: hidden;
}
.big .left{
    width: 100%;
    overflow: hidden;
}

.big .left .top{
    width: 100%;
    overflow: hidden;
}
.big .left .top img:nth-of-type(1){
    float: left;
    width: 40px;
    display: none;
}
.big .left .top a{
    display: none;
}
.big .left .top img:nth-of-type(2){
    display: none;
}
.big .left .bottom{
    width: 100%;
    overflow: hidden;
}
.big .left .bottom p{
    font-size: 32px;
}
.big .left .bottom img{
    display: none;
}
.big .left .bottom a:nth-of-type(1){
    display: none;
}
.big .left .bottom a:nth-of-type(2){
    display:none ;
}
.big .right{
    width: 100%;
   
}
.big .right .tu{
    width: 100%;
    height: 431px;
    background-image: url(../img/ad.jpg);
    background-size: 100% 100%;
}
.big .right .tu p{
    width:40px;
    background-color: black;
    text-align: center;
    font-size: 20px;
    color:#fff;
    float: right;
}
.big .right .picture{
    width: 100%;
    background-color: #f7f7f7;
}
.big .right .picture img{
    width: 100%;
    height: 280px;
    margin-top: 10px;
}
.tuwen{
    width: 100%;
    height: 249px;
    margin-top: 25px;
}
.tuwen .tuwen-left{
    width: 100%;
    overflow: hidden;
    height: 249px;
    float: left;
}
.tuwen .tuwen-left h3{
    font-size: 20px;
    margin-top: 70px;
    margin-left: 25%;
}
.tuwen .tuwen-left p{
    margin-left: 25%;
    margin-top: 10px;
}
.tuwen .tuwen-left .zc{
    float: left;
    display: block;
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-left: 25%;
    margin-top: 15px;
    border-radius: 30px;
}
.tuwen .tuwen-left .dl{
    float: left;
    display: block;
    font-size: 18px;
    width: 73px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid green;
    margin-top: 15px;
    margin-left: 20px;
    border-radius: 30px;
}
.tuwen .tuwen-right{
    float: right;
    width: 100%;
    height: 249px;
    background-image: url(../img/club.png);
    background-size: 100% 100%
}
.big .right .jingxuan{
    width: 100%;
    background-color: #f7f7f7;
    overflow: hidden;
}
.big .right .jingxuan .one{
    font-size:20px;
    text-align: center;
    margin-top:38px ;
}
.big .right .jingxuan .one-p{
    font-size:20px;
    text-align: center;
    margin-top:26px ;
    color: #b8b8b8;
}
.big .right .jingxuan .jingxuan-tu{
    width:30% ;
    height: 221px;
    background-color: white;
    float: left;
    margin-top: 50px;
    margin-left:13%;
}
.big .right .jingxuan .jingxuan-tu img{
    width: 60%;
    margin-left: 23%;
    margin-top: -20%;
}
.big .right .jingxuan .jingxuan-tu h3{
    text-align: center;
    margin-top: 27PX;

}
.big .right .jingxuan .jingxuan-tu P{
    margin-top: 20PX;
    text-align: center;
    color: #b8b8b8;

}
.big .right .jingxuan .jingxuan-tu a{
    display: block;
    margin-top: 30px;
    text-align: center;
    color: #eee9da;
}
.big .right .cofice{
    margin-top: 30px;
    widows: 100%;
    height: 435px;
    overflow: hidden;
}

.cofice h3{
    font-size:20px;
    text-align: center;
    margin-top:38px ;
}
.cofice .cofice-text{
    font-size:20px;
    text-align: center;
    margin-top:26px ;
    color: #b8b8b8;
}
.cofice .cofice-tu{
    float: left;
    width: 30%;
    height:40%;
    margin-top: 40px;
    background-size: 100% 80%;
    background-repeat: no-repeat;
     margin-left: 3%;
    
}
.cofice .cofice-tu p:nth-of-type(1){
    width: 34%;
    height: 35px;
    background-color: #b9a565;
    text-align: left;
    line-height: 35px;
    margin-top: 7px;
}
.cofice .cofice-tu p:nth-of-type(2){
    margin-top: 110px;
    margin-left: 10%;
}
.cofice .beianhao{
    overflow: hidden;
    width: 100%;
    height: 30px;
    margin-top:262px;
    text-align: center;
    line-height: 30px;
}

 三，界面成果展示

pc端

 

平板端

 

手机端


总结

在敲代码的时候，有过累，有过难过，但是看看窗外的车串流不息，如果不学习，这么以后给你爱的人想要的生活呢，生活很哭，但我们要笑着面对。

 

刘 怼怼
关注
  • 7
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
大学简单html+css+js项目(古诗demo)
qq_53203517的博客
03-14 420
宣传中国传统文化。比较传统诗词网站，新增背诵功能，更有趣味性。
html+css+js仿写星巴克网页
lucky_kundy的博客
03-27 2269
用到了动画效果 @keyframes可将图片进行轮播 transform: translate(0, -5px);当鼠标放在图片上时可向上凸出 运用绝对定位将左侧位置一直固定，右侧使用相对运用top和left调整位置 BUG:轮播图也可以通过按键变化图片，多按几次后好像变化的图片为一张 效果图 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
星巴克首页响应式html+css
06-11
用HTML+CSS跟简单的js操作完成响应式星巴克首页，一个简单的响应式页面，非常适合网页设计，html期末大作业。
计算机毕业设计基于HTML5、DIV与CSS的星巴克咖啡网站设计与实现
qq_53797749的博客
02-20 880
随着互联网的普及和数字化营销的重要性日益凸显，星巴克咖啡作为全球知名的咖啡品牌，需要一个专业、美观且用户友好的网站来展示其产品、文化以及品牌故事。本文基于HTML5、DIV和CSS技术设计并实现了星巴克咖啡的静态网站，满足了公司对品牌形象展示、产品展示以及用户互动的需求。星巴克咖啡作为全球最大的咖啡连锁品牌之一，以其高品质的咖啡、舒适的用餐环境以及独特的品牌文化，吸引了众多消费者的喜爱。本文基于HTML5、DIV和CSS技术，设计并实现了一个星巴克咖啡的静态网站，以满足公司的品牌展示和用户需求。
如何使用html、css制作一个期末作业网站【羽毛球体育运动主题html网页设计】
最新发布
专注于dreamweaver网页设计制作
06-02 980
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html网页设计制作 星巴克咖啡网页设计作业成品模板
猿猿网页设计
11-27 986
猿猿网页设计专注于前端网页设计开发，更多源码联系。
前端因不会响应式而毕业了？怎么将页面变得像路飞一样，一套代码兼容多个终端。
qq_54753561的博客
08-21 1799
一般企业定制官网都是响应式的网站，而有的小伙伴还是不会来看看吧。响应式简单来说一套代码能够兼容多个终端（平板，手机，pc），它的原理就是在不同的屏幕尺寸下，通过 css3 的媒体查询新特性来实现的，它可以在同的屏幕尺寸来去响应不同的css代码。响应式需要一个父级来作为容器，来配合子元素实现变化效果，然后就可以利用媒体查询去改变布局容器的大小，然后再去改变里面子及元素的布局，大小，排列，这样就可以不同的尺寸现实不同的页面效果了。响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
微信小程序实现星巴克用星说效果
仰望星空
07-09 7756
最近微信小程序应用比较多，前段时间看到了星巴克的星巴克用星说小程序，闲暇时间就把该小程序的效果实现了一下，在此仅作功能介绍，实际效果可以微信小程序搜索：星巴克用星说，查看官方效果。先展示一下最终界面效果： 界面分析 通过上面的效果图，本示例包含两个界面，第一个界面产品列表界面，包含头部Banner，中间的产品列表和底部的Bottom，第二个界面产品详情界面，包含顶部大图、横向滑...
React官网首页demo(单文件实现版)
邢永胜 - Kyle
09-09 309
本博客实现React官网首页上展示的demo, 为了方便直接采用单文件的形式, 如果想完整集成 在自己的项目中, 可以参考React官网的安装指南, 安装Create React App. hello-world 请移步至我写的这篇博客: 单文件快速体验使用react输出hello_world A Stateful Component React组件除了通过this.props传入参数,...
仿星巴克官网html文件
05-21
本作品通过对星巴克官网和瑞幸咖啡官网进行整合改造，纯手工敲写，非商业，初窥html后进行敲写，内容确实十分粗糙，上传供以与我相似的初学者学习交流，若嫌弃不喜，请将其拖向回收站谢谢。
project13_HTMLCSS响应式布局_
10-04
本项目“project13_HTMLCSS响应式布局”旨在展示如何使用HTML和CSS来创建一个具备响应性功能的网页。 HTML（HyperText Markup Language）是网页内容的结构语言，而CSS（Cascading Style Sheets）则负责定义这些内容...
Starbucks:使用HTML，CSS和JavaScript制作星巴克网站Vanila
03-19
星巴克
vue-starbucks：由Vue.js开发的Starbucks前端项目
02-04
维星巴克 1简介 项目介绍： 这个项目是基于Vue.js + Node.js + MongoDB构建的前分离分离的单页应用。网站采用响应式布局方案，适应PC端和移动端，包含商品展示，定位附近的门店，登录注册，获取当前用户会员信息与消费记录等功能，更多完整的展现了星巴克官方网站的全貌。项目部署于，欢迎访问。 项目文件介绍： UploadFile文件夹存放的是线上部署时需要上传的文件，包括：前端静态资源，HTTPS服务端接口文件以及Nginx配置文件。 MongoData文件夹存放的是网站数据（JSON格式），建立好MongoDB数据库后，可直接将其中的文件导入数据库使用。 server文件
精彩星巴克讲义
12-11
精彩星巴克讲义简洁、实用的特性，相信能够为大家利用人力、物力、财力、资源等带来许多帮助，欢迎大家下...该文档为精彩星巴克讲义，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
响应式布局大全代码
07-03
HTML加css加div响应式布局，包含各种网站的大概布局，适应于各种大小不同的设备。
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画.rar
12-20
描述可以看博客 https://blog.csdn.net/qq_43757282/article/details/111463274 【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画
响应式布局案例--微金所.rar
11-03
本案例“微金所”将深入探讨响应式布局的应用，结合HTML、CSS以及LESS这三种核心技术，帮助开发者理解和实践响应式设计。 HTML（超文本标记语言）是网页内容的基础结构，它定义了页面上的各个元素，如标题、段落、...
基于BootStrap响应式布局的实现案例1-（基础版）
10-09
基于BootStrap响应式布局的实现案例1-（基础版） 每组中都有 3 张效果图，分别是一个响应式网页在大屏、中屏和小屏上的显示效果，要求按小组序号 对 7 取余加 1 指定的题号完成相应效果图的响应式网页，要求网页效果...
响应式网页布局-仿三星官网首页
09-01
以下是对响应式网页布局以及在创建仿三星官网首页时可能涉及的关键知识点的详细说明： 1. **媒体查询(Media Queries)**：媒体查询是CSS3中的一个关键特性，用于定义不同屏幕尺寸下的样式规则。通过设置断点，我们...
如何使用postcss-pxtorem实现响应式布局？
05-30
postcss-pxtorem是一个PostCSS插件，可以将像素单位转换为rem单位，实现响应式布局。使用postcss-pxtorem的步骤如下： 1. 安装postcss-pxtorem插件 ``` npm install postcss-pxtorem --save-dev ``` 2. 配置postcss.config.js文件 在项目根目录下新建postcss.config.js文件，并进行配置。 ``` module.exports = { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 1rem等于16px propList: ['*'] }) ] } ``` 其中，rootValue表示1rem等于的像素值，propList表示需要转换的属性。 3. 在项目中使用 在需要进行单位转换的样式文件中引入postcss即可。例如，在vue项目中，可以在vue.config.js文件中配置： ``` module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 1rem等于16px propList: ['*'] }) ] } } } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘 怼怼

你的鼓励将是我创作下去的动力哦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值