模块代码精简

一丶需求分析

1.完成静态页面

2.样式的编撰和优化

3.添加页面动作（js）

二丶 项目设计

设计取决于你自己的看法和创意，做出什么样的网页都是看个人，每个人学的代码和网页呈现肯定还会有所误差，有一些部份没有图片，比较狭小，仅供参考！！！

三丶项目编码四丶小模块源码

 html代码： 
 
 <header>
        <div class="logo">
            
        div>
        <div class="column">
            <ul>
                <li><a href="#">知识资产库a>li>
                <li><a href="#">知识专题a>li>
                <li><a href="#">知识地图a>li>
                <li><a href="#">社区a>li>
            ul>
        div>
        <form class="search">
            <input type="text" placeholder="请输入内容">
            <button>提交button>
        form>
        <div class="upload">
            上传知识
        div>
        <div class="profile">
            <div class="ring">div>
                <div class="hp">
            div>
        div>
        header>
<main>
    <div class="article">
        <section class="art-head">
            <div class="art-hp">
                <img src="./img/2.webp" alt="">
            div>
            <div class="art-name">
                <h4>小白先生h4>
                <p>硬件技术部p>
            div>
            <div class="art-follow">关注div>
        section>
        <div class="art-content">
            <div class="wenben">
                <h4>【 新征文活动即将上线！～ 今天先来沸点盖楼抽奖！】h4>
                <p> “程序员必懂小知识”创作挑战，你可以分享：对程序员很重要的小知识点、实践及踩坑经验、社区 的好用的技术工具、刷题找到了独特的思路，等等。专门为写作困难症同学设计，解决你的一切写 作问题，轻轻松松拿大奖！p>
                <p>>> 活动详情：juejin.cn p>
                <p> 今天，先来沸点盖楼抽奖预热一下吧，p>
                <p> --  沸点盖楼活动规则：p>
                <p> - 在本条下方评论关键词【9月24日分享小知识】，即可参与抽奖（注意关键词没有空格）。p>
                <p>- 盖楼时间：即日起至 9 月 18 日 23:59:59  盖楼活动奖励：抽取 3 人，每人一个掘金抱枕p>
                <p>⏰ 开奖时间：9 月 19 日，请大家提前扫码进群，并留意群内通知和系统消息，以免错过发奖～ [加好友] 进群方式：扫描图 2 ，添加掘金酱为好友，回复关键词“小知识”进群。p>
            div>
            <img src="./img/1.webp" alt="">
            <div class="ach">
                <div class="lab">摸鱼选手div>
                <p>126人表达了态度 p>
            div>
            <div class="art-bottom">
                <div class="time">
                    今天13:39
                div>
                <div class="degree">
                    <div class="thumb">
                        <span>span>1458
                    div>
                    <div class="reply">
                        <span>span>3270
                    div>
                div>
            div>
        div>
        <footer class="comment">
            <div class="comment-in">
                <img src="./img/2.webp" alt="">
                <textarea name="reply" id="" cols="20" rows="1" placeholder="发表你的看法">textarea>
                <button>发表button>
            div>
            <div class="all-comment">
                <div class="all-c-top">
                    <h3>全部评论h3>
                    <ul>
                        <li class="hot">最热li>
                        <li class="early">最早li>
                        <li class="new">最新li>
                    ul>
                div>
                <div class="all-comment-items">
                    <ul class="comtent-items">
                    ul>
                div>
                <input type="text"  placeholder="">
            div>
        footer>
    div>
main>
复制代码

css代码:

     @font-face {
        font-family: 'iconfont';
        src: url('../font_41hjo1ecyhb/iconfont.ttf') format('truetype');
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    body {
        background-color: gray;
        width: 100%;
    }
    @keyframes headerOpacity {}
    header {
        display: flex;
        width: 100%;
        height: 56px;
        line-height: 56px;
        background-color: #F39800;
        padding: 0 18%;
        margin-bottom: 20px;
    }
    .logo {
        flex-shrink: 0;
        width: 95px;
        height: 40px;
        margin: auto 0;
        margin-right: 50px;
        background-color: #fff;
    }
    .logo img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }
    .column {
        margin-right: 30px;
        flex: 1;
        overflow: hidden;
    }
    .column ul li {
        float: left;
        padding: 0 10px;
        margin: 0 10px;
    }
    .column ul li a {
        color: #000;
    }
    .column ul li:hover {
        background-color: #c07c06;
    }
    .search {
        width: 20%;
        height: 65%;
        margin: auto 0;
        margin-right: 20px;
        background-color: #fff;
        border-radius: 20px;
        overflow: hidden;
    }
    .search input {
        display: block;
        float: left;
        width: 60%;
        height: 75%;
        border: none;
        outline: none;
        border-radius: 10px;
        margin: 5px 0 0 10px;
        padding-left: 10px;
    }
    .search button {
        float: right;
        width: 19%;
        height: 80%;
        margin-top: 3px;
        margin-right: 6px;
        outline: none;
        border: none;
        border-radius: 20px;
        background-color: #f39800;
        color: #fff;
        cursor: pointer;
    }
    .upload {
        width: 6%;
        height: 65%;
        line-height: 35px;
        margin: auto 0;
        text-align: center;
        border-radius: 15px;
        color: #f39800;
        background-color: #fff;
        font-size: 14px;
        margin-right: 30px;
        cursor: pointer;
        overflow: hidden;
    }
    .profile {
        position: relative;
        padding-left: 30px;
    }
    .profile .ring {
        position: absolute;
        top: 8px;
        left: -10px;
        margin-top: 20px;
        width: 16px;
        height: 16px;
        line-height: 0;
        margin-right: 10px;
        font-family: 'iconfont';
        font-size: 30px;
        color: #fff;
        cursor: pointer;
    }
    .profile .hp {
        float: right;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-top: 10px;
        background-color: #fff;
        background: url(../img/2.webp) no-repeat center center;
        cursor: pointer;
    }
    
    
复制代码

main {
    width: 47%;
    height: auto;
    margin: 0 auto;
}
@media screen and (max-width:450px) {
    .main {
        width: 90%;
        height: auto;
        margin: 0 auto;
    }
}
.article {
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
}
.article section {
    display: flex;
    height: 60px;
}
.art-hp {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: orange;
    margin-right: 10px;
    cursor: pointer;
}
.art-hp img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.art-name {
    flex: 1;
    padding-top: 9px;
    cursor: pointer;
}
.art-name p {
    font-size: 10px;
    color: gray;
    margin-top: 4px;
}
.art-follow {
    float: right;
    width: 48px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    margin: auto 0;
    background-color: #f39800;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
}
.art-follow2 {
    float: right;
    width: 48px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 12px;
    margin: auto 0;
    background-color: #fff;
    color: #666;
    border: 1px solid #666;
    border-radius: 20px;
    cursor: pointer;
}
.art-content {
    padding: 0 20px 0 80px;
    padding-bottom: 30px;
}
.art-content h4 {
    margin-bottom: 20px;
}
.art-content p {
    margin-bottom: 18px;
}
.art-content img {
    width: 40%;
    height: auto;
    border-radius: 8px;
    margin: 5px 0;
}
.ach {
    margin: 10px 0;
    height: 30px;
}
.ach .lab {
    float: left;
    width: 76px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 35px 35px 35px 2px;
    border: 1px solid #F39800;
    background: rgba(243, 152, 0, 0.10);
    color: #F39800;
    cursor: pointer;
}
.ach p {
    float: right;
    color: #BDC3C7;
}
.art-bottom {
    width: 100%;
    height: 30px;
}
.time {
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #BDC3C7;
    letter-spacing: 0;
    line-height: 24px;
}
.degree {
    float: right;
}
.degree .thumb {
    user-select: none;
    float: left;
    margin-right: 14px;
    cursor: pointer;
}
.degree .reply {
    user-select: none;
    float: right;
    cursor: pointer;
}
.degree span {
    display: inline-block;
    width: 21px;
    height: 21px;
    margin-right: 4px;
    font-family: "iconfont";
    font-size: 20px;
    margin-top: 1px;
}
.comment {
    margin-bottom: 50px;
    padding: 0 20px;
}
.comment-in {
    display: flex;
    position: relative;
    height: 60px;
}
.comment-in img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: top;
    margin: 12px 5px 0 0;
}
.comment-in textarea {
    flex: 1;
    width: 90%;
    height: 60px;
    resize: none;
    border: 0;
    outline: none;
    background-color: #F5F7FA;
    border-radius: 10px;
    padding-left: 5px;
    padding-top: 20px;
    font-size: 16px;
}
.comment-in button {
    position: absolute;
    bottom: -35px;
    right: 5px;
    width: 60px;
    height: 30px;
    background-color: #f39800;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 4px;
}
.all-c-top {
    margin-top: 50px;
    margin-bottom: 10px;
    height: 30px;
}
.all-c-top h3 {
    position: relative;
    float: left;
    width: 72px;
    height: 24px;
    font-size: 16px;
}
.all-c-top h3::before {
    content: '';
    position: absolute;
    top: 1px;
    left: -10px;
    width: 2px;
    height: 20px;
    background-color: #f39800;
}
.all-c-top ul {
    float: right;
}
.all-c-top ul li {
    float: left;
    position: relative;
    margin: 0 5px;
    color: #5f5e5e;
}
.all-c-top .hot {
    color: #202020;
}
.all-c-top ul li:nth-child(2)::after,
.all-c-top ul li:nth-child(3)::after {
    content: '';
    position: absolute;
    top: 4px;
    left: -5px;
    width: 2px;
    height: 16px;
    background-color: #5f5e5e;
}
.all-comment-items .item {
    padding: 0 20px;
}
.item-head {
    display: flex;
}
.item-hp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: orange;
    margin-right: 10px;
    vertical-align: bottom;
}
.item-hp img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.item-name {
    flex: 1;
    font-size: 14px;
}
.item-name p {
    font-size: 10px;
    color: gray;
    margin-top: 4px;
}
.item-content {
    padding: 15px 0 15px 40px;
    color: #666;
}
.item-content p {
    margin-bottom: 5px;
}
.item {
    position: relative;
    margin: 16px 0;
}
.item-bottom {
    width: 100%;
    height: 30px;
}
.item-content::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 16px;
    width: 91%;
    height: 1px;
    background-color: #eee;
}
.answer {
    background-color: #F5F7FA;
    padding: 5px 20px;
    margin: 5px 0;
}
.answer img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
}
.answer p {
    display: inline-block;
    width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 5px;
}
.answer-item {
    margin: 5px 0;
}
.answer-all {
    font-size: 14px;
    padding: 5px;
}
.active {
    color: #f39800;
}
a span {
    font-family: 'iconfont';
    color: #000;
}
.reply_ a {
    color: #000;
}
.reply_ {
    display: none;
    width: 100%;
    height: 120px;
    border-radius: 8px;
    background-color: #eee;
    padding: 5px;
    margin-bottom: 10px;
}
.reply_ #text {
    width: 100%;
    height: 65%;
    border-radius: 8px;
    padding-left: 10px;
    border: none;
    outline: none;
    margin-bottom: 5px;
}
.reply_ a {
    float: left;
    margin-right: 10px;
}
.reply_ #submit {
    float: right;
    width: 88px;
    height: 30px;
    border: none;
    outline: none;
    border-radius: 2px;
    color: #fff;
    background-color: #f39800;
}
复制代码

js代码：

 //关注
        function Follow() {
            let follow = document.querySelector('.art-follow')
            follow.addEventListener('click', function() {
                if (follow.innerHTML === '关注') {
                    follow.innerHTML = '已关注'
                    follow.className = 'art-follow2'
                } else {
                    follow.innerHTML = '关注'
                    follow.className = 'art-follow'
                }
            })
        }
        Follow()
        //发表评论
        function setComment() {
            let comment_in = document.querySelector('.comment-in')
            let text = comment_in.querySelector('textarea')
            let button = comment_in.querySelector('button')
            button.addEventListener('click', function() {
                release()
            })
            text.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    if (text.value === "") {
                        event.returnValue = false
                    } else {
                        release()
                    }
                }
            })
            function release() {
                let content = text.value
                arr.push({
                    "img": "./img/2.webp",
                    "content": content,
                    "id": "3",
                    "content_child": ""
                })
                comment(arr)
                text.value = ''
            }
        }
        setComment()
        // 评论数据
        let arr = [{
            "img": "./img/2.webp",
            "content": "CPU相当手机的大脑，核心的运算能力。强劲的CPU可以为手机带来更高的运算能力，也会增加手机玩游戏 看电影的速度体验，CPU主要参数有2，核心数和主频，当然，这些参数也不是越大越好，合理够用即可",
            "id": "1",
            "content_child": ""
        }, {
            "img": "./img/2.webp",
            "content": "CPU相当手机的大脑，核心的运算能力。强劲的CPU可以为手机带来更高的运算能力，也会增加手机玩游戏 看电影的速度体验，CPU主要参数有2，核心数和主频，当然，这些参数也不是越大越好，合理够用即可",
            "id": "2",
            "content_child": [
                {
                    "id": "01",
                    "content_child_img": "./img/2.webp",
                    "content_child_info": "CPU相当手机的大脑，核心的运算能力。强劲的CPU可以为手机带来更高的运算能力"
                }, {
                    "id": "02",
                    "content_child_img": "./img/2.webp",
                    "content_child_info": "核心的运算能力。强劲的CPU可以为手机带来更高的运算能力"
                }, {
                    "id": "03",
                    "content_child-img": "./img/2.webp",
                    "content_child_info": "强劲的CPU可以为手机带来更高的运算能力"
                }
            ]
        }, ]
        //评论渲染
        function comment([]) {
            let items = document.querySelector('.comtent-items')
            let comment_items = document.querySelector('.comtent-items')
            for (let i = items.children.length; i < arr.length; i++) {
                let li = document.createElement('li')
                li.innerHTML = `
                                

                                    

                                        ${arr[i].img} " alt="">
                                    
                                    

                                        
小白先生
                                        
硬件技术部
                                    
                                
                                

                                    
 ${ arr[i].content }
                                    
                                    

                                
                                图片
                                视频
                                
                            
 
                                    

                                        
2021/08/07 11:49
                                        

                                            

                                                点赞
                                            
                                            

                                                回复
                                            
                                        
                                    
                                
`
                li.className = " item item" + "0" + parseInt(i + 1)
                items.appendChild(li)
                let item_content = document.querySelectorAll('.item-content')
                if (arr[i].content_child !== '') {
                    let j = 0
                    let div = document.createElement('div')
                    div.innerHTML = `

                                        

                                            ${arr[i].content_child[j].content_child_img} " alt="">
                                            
${arr[i].content_child[j].content_child_info}
                                        
                                        

                                            ${arr[i].content_child[j++].content_child_img} " alt="">
                                            
${arr[i].content_child[j].content_child_info}
                                        
                                        

                                            ${arr[i].content_child[j++].content_child_img} " alt="">
                                            
${arr[i].content_child[j].content_child_info}
                                        
                                        

                                            
                                                全部80条回复
                                            
                                        
                                    
`
                    div.className = "answer"
                    item_content[i].firstChild.nextSibling.appendChild(div)
                }
            }
        }
        comment(arr)
        //事件冒泡（点赞 回复）
        let items = document.querySelector('.comtent-items')
        items.addEventListener('click', function(event) {
            //点赞
            if (event.target.className === 'thumb') {
                let num = event.target.lastChild.nodeValue //获取点赞数
                let patrn = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; //判断是否含有数字
                if (event.target.firstElementChild.className.search('active') != -1) {
                    event.target.firstElementChild.className = 'thumb_icon'
                    if (num == 1) {
                        event.target.lastChild.nodeValue = '点赞'
                    } else {
                        num--
                        event.target.lastChild.nodeValue = num
                    }
                } else {
                    event.target.firstElementChild.className = 'active thumb_icon'
                    if (!patrn.exec(num)) {
                        num++
                        event.target.lastChild.nodeValue = num
                    } else {
                        event.target.lastChild.nodeValue = 1
                    }
                }
            } else if (event.target.className.search("thumb_icon") !== -1) {
                let num = event.target.nextSibling.nodeValue //获取点赞数
                let patrn = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; //判断是否含有数字
                if (event.target.className.search('active') != -1) {
                    event.target.className = 'thumb_icon'
                    if (num == 1) {
                        event.target.nextSibling.nodeValue = '点赞'
                    } else {
                        num--
                        event.target.nextSibling.nodeValue = num
                    }
                } else {
                    event.target.className = 'active thumb_icon'
                    if (!patrn.exec(num)) {
                        num++
                        event.target.nextSibling.nodeValue = num
                    } else {
                        event.target.nextSibling.nodeValue = 1
                    }
                }
            }
            //回复
            if (event.target.className === "reply_icon" || event.target.className === "reply") {
                if (event.target.parentNode.parentNode.parentNode.children[1].style.display === "none") {
                    event.target.parentNode.parentNode.parentNode.children[1].style.display = "block"
                } else {
                    event.target.parentNode.parentNode.parentNode.children[1].style.display = "none"
                }
            }
            //回复评论
        })
        //飘窗
        //头部固定
        window.addEventListener('scroll', function() {
            let head = document.querySelector('header')
            if (window.scrollY >= 76) {
                head.style.position = "fixed"
                head.style.opacity = .9
            } else if (window.scrollY <= 20) {
                head.style.position = ""
                head.style.opacity = 1
            }
        })
复制代码

基本功能可以实现，也有好多一部分没有完成，主要是想靠这个模块，和这篇文章，来讲讲风波冒泡，这是一个挺重要的点，大家感兴趣可以查看我的风波冒泡的文章ps:写的不好你们作为一个参考或则一个练习笔记看就好~~