一个简单HTML+CSS+JavaScript代码的网页部件

关注

原创最新推荐文章于 2026-04-12 12:02:02 发布 121 阅读 AI 写同款· GEO 优化 ›

HTML做一个简单漂亮的宠物网页（纯html代码） 🐕 宠物网页设计、🐼保护动物网页、🐋鲸鱼海豚主题、🐘保护大象、等网站的设计与制作。🏷️HTML宠物网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的...... 阅读详情

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>

        * {
            margin: 0;
            padding: 0;
            font-size: 20px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            color: #666666;
        }

        #class1{
            width: 310px;
            height: 587px;
            background: #FFFFFF;
            box-shadow: 0px 3px 6px 1px rgb(0 0 0 / 16%);
            border-radius: 12px 12px 12px 12px;
            opacity: 1;
            border: 1px solid rgba(40,144,255,0.3);
            margin-right: 18px;
        }
        button{
            width: 280px;
            height: 83px;
            margin-top: 30px;
            margin-left: 15px;
            border: none;
            background: none;

        }
        img{
            position: absolute;
            left: 30px;
            margin-top: -8px;
            padding: 0 15px;
        }




    </style>
</head>
<body>
<div id="app">
    <div id="class1">
        <button @mousemove="f(0)">
            <img src="https://www.laiketui.com/cpc/web/images/down/java_demo1.png" alt="">
            <span>竞拍专场</span>
        </button>

        <button @mousemove="f(1)">
            <img src="	https://www.laiketui.com/cpc/web/images/down/java_demo2.png" alt="">
            <span>限时秒杀</span>
        </button>
        <button @mousemove="f(2)">
            <img src="	https://www.laiketui.com/cpc/web/images/down/java_demo3.png" alt="">
            <span>分销中心</span>
        </button>
        <button @mousemove="f(3)">
            <img src="https://www.laiketui.com/cpc/web/images/down/java_demo4.png" alt="">
            <span>会员中心</span>
            </li>
        </button>
        <button @mousemove="f(4)">
            <img src="https://www.laiketui.com/cpc/web/images/down/java_demo5.png" alt="">
            <span>积分商品</span>
        </button>
    </div>

</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let doc = document.getElementsByTagName("button")[0];
    doc.style.background = "url(https://www.laiketui.com/cpc/web/images/down/li_hoverbg.png?vv1=123) center center no-repeat";

    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            f(a) {
                let arr = document.getElementsByTagName("button");
                for (let i = 0; i < arr.length; i++) {
                    if (i == a) {
                        arr[i].style.background = "url(https://www.laiketui.com/cpc/web/images/down/li_hoverbg.png?vv1=123) center center no-repeat";

                    } else {
                        arr[i].style.background = "";
                    }


                }

            }

        }
    })
</script>

</html>

效果: