如何实现简单的（商城）网页布局html+css

最新推荐文章于 2024-05-24 13:24:31 发布

我编程我快乐

最新推荐文章于 2024-05-24 13:24:31 发布

阅读量600

点赞数 12

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/a119214/article/details/136605641

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、页面效果展示：

二、js实现简单背景色自动切换

1.js代码

        const imgdata = ['yellow','red','blue','orange','pink']
        const textdata = ['好好学习','天天向上','学习js','学习css','学习html']
        let indexNum = 0
        let intervalId = setInterval(function(){
            const bgc = document.querySelector('.right')
            indexNum = (indexNum + 1) % imgdata.length
            bgc.style.backgroundColor = imgdata[indexNum]
            bgc.innerHTML = textdata[indexNum]
        }, 1000);

1.定义两个数组

imgdata：包含一系列颜色名称（'yellow', 'red', 'blue', 'orange', 'pink'）。

textdata：文本字符串（'好好学习', '天天向上', '学习js', '学习css', '学习html'）

初始化一个变量indexNum为0,用于追踪当前选中的数组元素的索引。

2.定义一个函数：

使用document.querySelector('.right')选取页面中第一个具有.right类名的元素

更新indexNum的值，通过(indexNum + 1) % imgdata.length确保它始终在imgdata循环

使用bgc.style.backgroundColor更改元素的背景颜色为imgdata[indexNum]中的颜色。

使用bgc.innerHTML更改元素的内部文本为textdata[indexNum]中文本。

使用setInterval函数每1000毫秒（1秒）调用函数，并将返回的间隔ID存储在intervalId变量中。实现每隔1秒，背景颜色和内部文本都会更新为数组中的下一个值。

最后，本人前端初学者，代码可能不太规范，欢迎大家指正。

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width: 1200px;
            margin: 0 auto;
        }
        li{
            list-style: none;
        }
        /* 第一部分 */
        .header{
            display: flex;
            height: 100px;
            margin: auto;
            margin-bottom: 20px;
        }
        .header .wrapper{
            display: flex;
            align-items: center;
            padding: 20px;
            background-color: palegreen;
            border-radius: 20px;
        }
        .header .logo{
            width: 200px;
            height: 80px;
            background-color: azure;
            border-radius: 20px;
        }
        .header .logo h1{
            line-height: 80px;
            text-align: center;
        }
        .header .wrapper input{
            height: 30px;
            width: 250px;
            border: none;
            outline: none;
            background-color: #b5b1b1;
        }
        .inputbox{
            display: flex;
            justify-content: center;
            margin-left: 500px;
            width: 300px;
            border-radius: 10px;
            background-color: #b5b1b1;
        }
        .header .headimg{
            position: relative;
            width: 50px;
            height: 50px;
            margin-left: 30px;
            border-radius: 25px;
            overflow: hidden;
        }
        .header .headimg img{
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .header .headimg img:nth-child(1){
            z-index: 2;
        }
        .header .headimg img:nth-child(2){
            z-index: 1;

        }
        .header p{
            margin-left: 10px;
        }
        /* 第二部分 */
        .banner{
            height: 500px;
            margin-bottom: 20px;
            background-color: paleturquoise;
        }
        .banner .wrapper{
            display: flex;
            justify-content: space-between;
        }
        .left{
            width: 400px;
            height: 500px;
            background: #000;
            border-top-left-radius: 20px ;
            border-bottom-left-radius: 20px;
        }
        .right{
            width: 800px;
            font: 100px 楷体;
            text-align: center;
            line-height: 300px;
            background-color: pink;
            border-top-right-radius: 20px ;
            border-bottom-right-radius: 20px;
        }

        /* 第三部分 */
        .more .wrapper{
            height: 800px;
        }
        .more .wrapper ul{
            display: flex;
            height: 750px;
            justify-content: space-between;
            align-content: space-around;
            flex-wrap: wrap;
        }
        .more .wrapper li{
            width: 290px;
            height: 360px;
            padding: 10px;
            background-color: green;
            border-radius: 10px;
        }
        /* 第四部分 */
        .last{
            background-color: beige;
        }
        .last .wrapper{
            height: 500px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }     
        .last .wrapper .one{
            width: 300px;
            height: 400px;
            text-align: center;
        }
        .last .wrapper .one h2{
            padding: 20px 0;
        }
        .last .wrapper .one li{
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <!-- 第一部分 -->
    <div class="header">
        <div class="wrapper">
            <div class="logo"><h1>前端</h1></div>
            <div class="inputbox"><input type="text" placeholder="请输入关键字"></div>
            <div class="headimg">
                <img src="../day7/img/icon-1.png" alt="">
                <img src="../day6/img/q3.png" alt="">
            </div>
            <p>哈哈</p>
        </div>
    </div>
    <!-- 第二部分 -->
    <div class="banner">
        <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
    <!-- 第三部分 -->
    <div class="more">
        <div class="wrapper">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!-- 第四部分 -->
    <div class="last">
        <div class="wrapper">
           <div class="one">
            <h2>售后服务</h2>
            <ul>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
            </ul>
        </div>
           <div class="one">
            <h2>售后服务</h2>
            <ul>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
            </ul>
        </div>
           <div class="one">
            <h2>售后服务</h2>
            <ul>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
            </ul>
        </div>
           <div class="one">
            <h2>售后服务</h2>
            <ul>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
                <li>数学建模</li>
            </ul>
        </div>
        </div>
    </div>
    <script>
        const imgdata = ['yellow','red','blue','orange','pink']
        const textdata = ['好好学习','天天向上','学习js','学习css','学习html']
        let indexNum = 0
        function happy(){
            const bgc = document.querySelector('.right')
            indexNum = (indexNum + 1) % imgdata.length
            bgc.style.backgroundColor = imgdata[indexNum]
            bgc.innerHTML = textdata[indexNum]
        }
        let intervalId = setInterval(happy, 1000); 
    </script>
</body>
</html>