其他分享
首页 > 其他分享> > 自己重构一个非常简单的网页

自己重构一个非常简单的网页

作者:互联网

刚刚学完HTML\CSS\以及JS之后看到网上有一个渔乐科技的官网比较简洁而且好看就去联系重构了一下他的主页。积累了一些知识

练习重构的网页地址

界面重构方面

<!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>
        body {
            margin: 0;
        }

        header {
            position: fixed;
            width: 100vw;
            height: 84px;
            top: 0;
            left: 0;
            z-index: 1;
            /*文档流在0层*/
            
        }

        header.white>div{
            background-color: white;
            box-shadow: 0px 0px 5px rgb(0, 0, 0, 0.5);
            color: black;
            text-shadow: 0 0 0px #cccccc;
        }

        header>div {
            background-color: transparent;
            transition: background-color 1s ;
            height: 84px;
            position: relative;
            overflow: hidden;
            color: white;
            text-shadow: 0 0 5px #cccccc;
        }

        header>div>img {
            position: absolute;
            width: 40px;
            height: 40px;
            margin-top: 20px;
            margin-left: 95px;
            border-radius: 10px;
        }

        header>div>span {
            position: absolute;
            margin-left: 140px;
            margin-top: 23px;
            font-size: 25px;
        }

        header>div>div {
            position: absolute;
            width: 100px;
            height: 56px;
            right: 210px;
            margin-top: 0px;
            /* background-color: white; */
            text-align: center;
            font-size: 20px;
            padding-top: 28px;
        }

        header>div>div+div {
            position: absolute;
            width: 100px;
            height: 56px;
            right: 110px;
            margin-top: 0px;
            /* background-color: white; */
            text-align: center;
            font-size: 20px;
            padding-top: 28px;
        }

        header>div>div+div+div {
            position: absolute;
            width: 100px;
            height: 56px;
            right: 10px;
            margin-top: 0px;
            /* background-color: white; */
            text-align: center;
            font-size: 20px;
            padding-top: 28px;
        }

        .change_img {
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .change_img.active {
            opacity: 1;
        }

        #img-box {
            position: relative;
           
        }

        ul{
            list-style: none;
            padding-left: 0;
            position: relative;
            width: 100vw;
            height: calc(100vw*3/4);
            margin-bottom: 0px;
            margin-top: 0px;
        }

        li{
            position: absolute;
            width: 100%;
            overflow: hidden;
        }

        .change_img {
            width: 100vw;
        }

        #text-box {
            display: flex;
            flex-direction: column;
            background-color: white;
            height: 1300px;
            position: relative;
            width: 80vw;
            margin: 0 auto;
        }

        .in-text-box {
            flex: 1;
            background-color: white;
            border-top: 1px solid rgb(216, 210, 210);

            margin-right: 20vw;
            text-align: center;
            width: 80vw;
        }
    </style>
</head>

<body>
    <header>
        <div>
            <img src="../2021.1.11小项目渔乐官网/img/渔乐Logo.jpg" alt="">
            <span>渔乐科技</span>
            <div>首页</div>
            <div>产品</div>
            <div>关于</div>
        </div>
    </header>

    <div id="img-box">
        <ul>
            <li>
                <img class="change_img active" src="img/banner.png" alt="">
            </li>
            <li>
                <img class="change_img " src="img/IMG_9463-5.jpg" alt="">
            </li>
            <li>
                <img class="change_img " src="img/top-img-3.jpg" alt="">
            </li>
        </ul>
    </div>
    <div id="text-box">
        <div class="in-text-box" style="margin-right: 0vw;margin-left: 0vw;">
            <h3 style="margin-top: 100px; font-size: 50px;">战略布局</h3>
            <div style="display: flex;margin-top: 100px;width: 80vw;margin-left:auto ;">
                <div style="flex:1; ">
                    <img src="../2021.1.11小项目渔乐官网/img/渔乐Logo.jpg" alt="" style="width: 100px; height: 100px; flex: 1;">
                    <h3 style="font-size: 30px;margin-top: 10px;margin-bottom: 10px;">社群</h3>
                    <p style="display: inline-block;margin-top: 0px;">
                        以解决具体用户群的痛点为导向,在已有用户群的<br>基础上细化用户画像、建造、分类、管理5G时代<br>下的精细数据化社群运营</p>
                </div>
                <div style="flex: 1;">
                    <img src="../2021.1.11小项目渔乐官网/img/渔乐Logo.jpg" alt="" style="width: 100px; height: 100px; flex: 1;">
                    <h3 style="font-size: 30px;margin-top: 10px;margin-bottom: 10px;">文娱</h3>
                    <p style="display: inline-block;margin-top: 0px;">
                        以高新技术的应用为导向,将时代前沿的科学技术<br>以最广泛接受的方式运用至人们的日常生活,在<br>提升生活品质的同时,也增添生活乐趣。</p>
                </div>
                <div style="flex: 1;">
                    <img src="../2021.1.11小项目渔乐官网/img/渔乐Logo.jpg" alt="" style="width: 100px; height: 100px; flex: 1;">
                    <h3 style="font-size: 30px;margin-top: 10px;margin-bottom: 10px;">数据</h3>
                    <p style="display: inline-block;margin-top: 0px;">
                        以数据分析及算法商业化为导向,将已有的数据进<br>行二次提取分析,并加以具体的应用场景及实际<br>使用场合,让用户便利于数据的精准传播。</p>
                </div>
            </div>
        </div>
        <div class="in-text-box" style="display: flex;">
            <div style="text-align: left;margin-left: 0vw; margin-right: 0vw; width: 50vw; flex:6;">
                <h3 style="font-size: 50px;">近期新闻</h3>
                <p>1. 渔乐科技社群类项目Ufun近期将于山西省内展开试运营。 <br>2. 山西渔乐科技有限责任公司,2020年经山西股权交易中心批准,现已在山西青创版挂牌展示。</p>
            </div>
            <img src="img/board2-img-1.jpg" alt=""
                style="width: 319px;height: 242px; flex: 4;margin-top: 3vw;margin-bottom: 5vw;">
        </div>
        <div class="in-text-box" style="display:flex;">
            <img src="img/board2-img-2.png" alt=""
                style="width: 319px;height: 260px; flex: 4; margin-top: 3vw;margin-bottom: 5vw;">
            <div style="text-align: left; margin-left: 3vw; margin-right: 0vw; width: 45vw; flex:6;">
                <h3 style="font-size: 50px; text-align: right;">产品动态</h3>
                <p>1. Ufun近期将开启第二轮内测,内测版本为1.15V,预计将在6月开启为期3个月的试运营。<br> 2.
                    代号为“Ufun”的项目,在山西大学软件学院、西安建筑科技大学安德学院内开启测试,目前用户累计开办讲座16场,总观看人数3029人。</p>
            </div>
        </div>
    </div>
    <footer style="width: 100vw; height: calc(100vw*1/5); background-color: #424242; display:flex;">
        <div style="flex:6;margin-left: 10vw;color: white;">
            <h2>渔乐科技</h2>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用科技造福社会</p>
            <p style="margin-top: 50px;">© 2020 Copyright 山西渔乐科技有限责任公司</p>
            <p><img src="img/gong-an-logo_.png" style="width:15px; height:15px"> 晋公网安备 14019202000616号 晋ICP备 20004422号-1
            </p>
        </div>
        <div style="flex:4;color: white;">
            <h2>链接</h2>
            <p>网站地图</p>
            <p>联系我们</p>
        </div>
    </footer>
</body>

</html>

整体的布局分为了顶部栏(

)、图面轮播区域( )、文字介绍区域( )、底部信息区域(

然我们其实可以不规定大小和等分,而是利用每个中间的元素就挤压使外部div发生大小的改变,这样的网站更加的灵活而且布局遇到改变,修改起来也比较方便


逻辑实现

<script>
        setInterval(function () {
            let arr = document.querySelectorAll('.change_img');//选择选择器
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].classList.contains("active")) {
                    arr[i].classList.remove("active");
                    i = (i + 1) % arr.length;
                    arr[i].classList.add('active');
                    break;
                }
            }
        }, 2000);

        window.onscroll = function () {
            //为了保证兼容性,这里取两个值,哪个有值取哪一个
            //scrollTop就是触发滚轮事件时滚轮的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let width = document.body.clientWidth; 
            let header = document.getElementsByTagName('header');
            scrollTop = parseInt(scrollTop);
            console.log(parseInt(width*3/4));
            console.log(scrollTop);
            if(scrollTop > parseInt(width*3/4)){
                console.log(header);
                header[0].classList.add('white');
            }
            else{
                header[0].classList.remove('white');
            }
        }


    </script>

这样我们就粗略的完成了主页的绘制了

标签:重构,非常简单,网页,header,top,width,scrollTop,div,margin
来源: https://blog.csdn.net/aduan__/article/details/112762284