Web【观察系列】个人喜爱网站集合

最新推荐文章于 2024-08-10 22:11:57 发布

Zalamp

最新推荐文章于 2024-08-10 22:11:57 发布

阅读量172

点赞数

分类专栏： Web 文章标签： html html5 css

本文链接：https://blog.csdn.net/Zalamp/article/details/120394865

版权

Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <style>
            body{width: 100%;height: 100%;margin: 0;padding: 0;}
            #content{background-color: #191A2B;width: 600px;height: 100%;margin: auto;
                padding: 50px 0px;text-align: center;border-radius: 50px;}
            .kuai{text-align: center;background-color: #262A34;border-radius: 20px;width: 450px;
                margin: 0px auto 50px auto;padding: 10px;box-shadow: 0px 2px 15px #191A2B;}
            h2{margin: 10px 10px; width: 70px;height: 70px;line-height: 70px;border-radius: 10px;
                background-color: #AD54E4;color: white;cursor: pointer;}
            .a-bg{margin: 10px 10px;color: white;height: 40px;line-height: 40px;cursor: pointer;
                transition: ease 0.4s;font-family: PingFangSC-Semibold;font-weight: 700;
                font-size: 14px;border-radius: 10px;}
            #huakuai{background-color: #1E5FDF;width: 10px;height: 40px;left: 460px;
                top: 150px;transition: ease 0.4s;position: absolute;border-radius: 10px;
                z-index: auto;}
            #discolor{width: 64px;height: 34px;border-radius: 20px;background-color: #aaa;
                position: absolute;left: 10px;top: 10px;cursor: pointer;transition: ease 0.4s;}
            #discolor-button{width: 30px;height: 30px;border-radius: 15px;transition: ease 0.4s;
                background-color: #fff;position: absolute;left: 12px;top: 12px;}
            #bo{width: 100%;height: 100%;transition: ease 0.4s;background-color: #fff;}
        </style>
        <script>
            function ku(i){
                var a = document.getElementById('huakuai');
                a.style.top = 150+i+"px";
            }
            var d = true;
            function co(){
                var a = document.getElementById('bo');
                var b = document.getElementById('discolor-button');
                var c = document.getElementById('discolor');
                if(d == true){
                    a.style.backgroundColor = '#2A2E38';
                    b.style.left = '42px';
                    c.style.backgroundColor = '#1E5FDF';
                    d = false;
                }else{
                    a.style.backgroundColor = '#fff';
                    b.style.left = '12px';
                    c.style.backgroundColor = '#aaa';
                    d = true;
                }
            }
        </script>
    </head>
    <body>
        <div id="bo">
            <div id="discolor" onclick="window.co()"></div>
            <div id="discolor-button"></div>
            <div id="content">
                <div id="huakuai"></div>
                <div class="kuai">
                    <h2>搜索</h2>
                    <div class="a-bg" onmouseover="ku(0)" onclick="window.open('https://www.baidu.com','c');">百度</div>
                    <div class="a-bg" onmouseover="ku(50)" onclick="window.open('https://www.google.com','c');">谷歌</div>
                    <div class="a-bg" onmouseover="ku(100)" onclick="window.open('https://cn.bing.com','c');">必应</div>
                </div>
                <div class="kuai">
                    <h2>翻译</h2>
                    <div class="a-bg" onmouseover="ku(310)" onclick="window.open('https://translate.google.cn','c');">谷歌翻译</div>
                </div>
                <div class="kuai">
                    <h2>直播</h2>
                    <div class="a-bg" onmouseover="ku(520)" onclick="window.open('https://www.douyu.com','c');">斗鱼</div>
                    <div class="a-bg" onmouseover="ku(570)" onclick="window.open('https://www.huya.com','c');">虎牙</div>
                </div>
                <div class="kuai">
                    <h2>视频</h2>
                    <div class="a-bg" onmouseover="ku(780)" onclick="window.open('https://www.bilibili.com','c');">哔哩哔哩</div>
                    <div class="a-bg" onmouseover="ku(830)" onclick="window.open('https://www.iqiyi.com','c');">爱奇艺</div>
                    <div class="a-bg" onmouseover="ku(880)" onclick="window.open('https://www.youku.com','c');">优酷</div>
                    <div class="a-bg" onmouseover="ku(930)" onclick="window.open('https://tv.cctv.com','c');">央视网</div>
                </div>
                <div class="kuai">
                    <h2>购物</h2>
                    <div class="a-bg" onmouseover="ku(1140)" onclick="window.open('https://www.jd.com','c');">京东</div>
                    <div class="a-bg" onmouseover="ku(1190)" onclick="window.open('https://www.taobao.com','c');">淘宝</div>
                    <div class="a-bg" onmouseover="ku(1240)" onclick="window.open('https://www.apple.com.cn/','c');">Apple</div>
                </div>
                <div class="kuai">
                    <h2>编程</h2>
                    <div class="a-bg" onmouseover="ku(1450)" onclick="window.open('https://blog.csdn.net','c');">CSDN</div>
                    <div class="a-bg" onmouseover="ku(1500)" onclick="window.open('https://developer.mozilla.org/zh-CN/docs/Web','c');">MDN Web</div>
                </div>
                <div class="kuai">
                    <h2>游戏</h2>
                    <div class="a-bg" onmouseover="ku(1710)" onclick="window.open('http://www.4399.com','c');">4399</div>
                    <div class="a-bg" onmouseover="ku(1760)" onclick="window.open('http://www.7k7k.com','c');">7k7k</div>
                </div>
            </div>
        </div>
    </body>
</html>

Zalamp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web【观察系列】个人喜爱网站集合

<!DOCTYPE html><html> <head> <style> body{width: 100%;height: 100%;margin: 0;padding: 0;} #content{background-color: #191A2B;width: 600px;height: 100%;margin: auto; padding: 50px
复制链接

扫一扫

专栏目录