Html，Css，JavaScript实现星巴克网站的Demo-响应式布局（二）

最新推荐文章于 2022-06-11 11:51:27 发布

来给我倒一杯java

最新推荐文章于 2022-06-11 11:51:27 发布

阅读量1k

点赞数

分类专栏：网页布局demo 文章标签： css js html web css3

本文链接：https://blog.csdn.net/qq_49896911/article/details/119772064

版权

网页布局demo 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

本文通过实例展示了如何使用HTML和CSS创建响应式布局，以适应不同设备的星巴克网站。文章详细介绍了HTML结构和CSS样式，特别是媒体查询的应用，确保在屏幕尺寸缩小到991px以下时，菜单变为垂直导航。此外，还提供了JavaScript函数来切换菜单和改变颜色。

摘要由CSDN通过智能技术生成

响应式布局
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

文章目录

前言

前言

浏览过上一篇普通布局(https://editor.csdn.net/md/?articleId=119752509)，接下来通过这篇文章你可以获得星巴克网站的响应式布局。
效果图
在这里插入图片描述

提示：以下是本篇文章正文内容，下面案例可供参考

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>Starbuks</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>

<body>
    <section>
        <div class="circle"></div>
        <header>
            <a href="#"><img src="images/logo.png" class="logo"></a>
            <div class="toggle" onclick="toggleMenu();"></div>
            <ul class="navigation">
                <li><a href="#">Home</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">What's New</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>
        <div class="content">
            <div class="textBox">
                <h2>It's not just Coffee <br>It's <span>Starbucks</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. </p>
                <a href="#">Learn More</a>
            </div>
            <div class="imgBox">
                <img src="images/img1.png" class="starkbucks">
            </div>
        </div>
        <ul class="thumb">
            <li><img src="images/thumb1.png" onclick="imgSlider('images/img1.png');changeCircleColor('#017143')"></li>
            <li><img src="images/thumb2.png" onclick="imgSlider('images/img2.png');changeCircleColor('#eb7495')"></li>
            <li><img src="images/thumb3.png" onclick="imgSlider('images/img3.png');changeCircleColor('#d752b1')"></li>
        </ul>
        <ul class="sci">
            <li><a href="#"><img src="images/facebook.png"></a></li>
            <li><a href="#"><img src="images/twitter.png"></a></li>
            <li><a href="#"><img src="images/instagram.png"></a></li>
        </ul>
    </section>
    <script type="text/javascript">
        function imgSlider(anything) {
            document.querySelector('.starkbucks').src = anything;
        }
        function changeCircleColor(color) {
            const circle = document.querySelector('.circle')
            circle.style.background = color;
        }

        function toggleMenu() {
            var menuToggle = document.querySelector('.toggle');
            var navigation = document.querySelector('.navigation')
            menuToggle.classList.toggle('active')
            navigation.classList.toggle('active')
        }
    </script>
</body>

</html>

CSS

在上篇文章的css部分添加后面的代码即可

/* 媒体查询当屏幕宽度小于991px */
@media (max-width:991px){
    header{
        padding: 20px;
    }
    header ul{
        display: none;
    }
    header.logo{
        max-width: 60px;
    }
    .toggle{
        position: relative;
        width: 30px;
        height: 30px;
        cursor: pointer;
        background: url("images/menu.png");
        background-size: 30px;
        background-position: center;
        background-repeat: no-repeat;
        filter: invert(1);
        z-index: 11;
    }
    /* 当点击按钮之后显示 */
    .toggle.active{
        background: url('images/close.png');
        background-size: 25px;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* 菜单变成纵向 */
    header ul.navigation.active{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #fff;
        z-index: 10;
    }
   
    header ul li a{
        font-size: 1.5em;
        margin: 5px 0;
    }
    section{
        padding: 20px 20px 120px;
    }

    .content{
        flex-direction: column;
        margin-top: 100px;
    }

    .content .textBox h2{
        font-size: 2.5em;
        margin-bottom: 15px;
    }
    .content .textBox{
        max-width: 100%;
    }
    .content .imgBox{
        max-width: 100%;
        justify-content: center;
    }
    .content .imgBox img{
        max-width: 300px;
    }
    .thumb li img{
        max-width: 40px;
    }
    .circle{
        clip-path: circle(400px at center bottom);
    }
    .sci{
        background-color: #017143;
        right: 0;
        width: 50px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }
}