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

2021-01-18 10:32:58 阅读：211 来源： 互联网

标签：重构非常简单网页 header top width scrollTop div margin

刚刚学完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>

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

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

顶部栏是比较容易，一个简单的布局
之后的图片展示栏选择了使用ul和li标签来进行图片的存储，方便管理和之后的添加
文章展示区域有三部分采用flex将他们等分，而且在第一个栏中，将任荣横向的用flex等分。
底部栏将左边有右边设置两个div分割，用flex4/6分割

当然我们其实可以不规定大小和等分，而是利用每个中间的元素就挤压使外部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>

图片的轮播我们使用一个 setInterval()h函数来实现，将它2秒一次刷新，刷新时通过控制给图片添加类名来修改图片的样式，从而实现图片的轮播

第二个样式是顶部导航栏在滑动到text部分的时候由透明变为白色。
首先我们的header要具有z-index: 1;属性，置于文档流的0层（置顶）
之后我们绑定滚轮滑动的监听事件window.onscroll = function ()
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;获取导航栏滚动的距离
let width = document.body.clientWidth;获取body的实际高度。
根据调试可以看到，当走过body的实际高度的3/4的时候应该改变，我们还是通过添加类名改变选择器来改变样式。

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

界面重构方面

逻辑实现