Date: 2021/10/25 Author: Orange

I. Demand analysis

1. Complete the static page; 2. Write and optimize the style; 3.

Second, project design

Design depends on your own ideas and creativity, what kind of web page is to see individuals, everyone to learn the code and web page presentation will certainly deviation, there are some parts without pictures, relatively simple, just for reference!!

Iii. Project coding

  • Starting with the simplest is the rendering of the page, which I won’t go into here. Note: HTML structure pay attention to semantic, CSS pay attention to reduce repeated code, use the same class name to write better, here recommend Flex layout and adaptive layout (percentage/REM, etc. / percentage is the simplest) if you do not know flex layout or adaptive layout can go to the relevant documentation to learn, Flex layout attributes

  • I will write two articles separately. If you are interested, you can have a look and give your opinions

Four, small module source code

<header> <div class="logo"> <! - < img SRC = "#" Alt = "" > -- > < / div > < div class =" column "> < ul > < li > < a href =" # "> library of knowledge assets < / a > < / li > < li > < a Href = "#" > knowledge project < / a > < / li > < li > < a href = "#" > knowledge map < / a > < / li > < li > < a href = "#" > community < / a > < / li > < / ul > < / div > < form class = "search" > <input type="text" placeholder=" please input content "> <button> submit </button> </form> <div class="upload"> </div> <div class="profile"> <div class="ring">&#xe619</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 > <p> Hardware technology department </p> <div class="art-follow"> follow </div> <div class="art-content"> <div Class ="wenben"> <h4>【📣 new essay activity is coming online! </h4> <p> "Programmers must Know small knowledge" creation challenge, you can share: important small knowledge points for programmers, practice and experience in stomping holes, useful technical tools from the community, brush the problem to find a unique idea, etc. Specially designed for students with writing difficulties, solve all your writing problems, easily win the prize! < / p > < p > > > details: juejin. Cn < / p > < p > 💥 today, come first boiling point building draw preheating, < / p > < p > - 👀 boiling point building activity rules: </p> <p> - You can participate in the lucky draw by commenting on keywords [Share tips on September 24] at the bottom of this article (note that there is no space for keywords). </ P > < P >- Building time: from now on to 23:59:59 on September 18 🎁 Building activity reward: draw 3 people, each one a gold digging pillow </ P > <p>⏰ Drawing time: On September 19, please scan the code in advance to enter the group, and pay attention to the notices and system messages in the group, so as not to miss the prize ~ [add friends] to enter the group: scan figure 2, add nuggets sauce as a friend, reply keywords "little knowledge" into the group. < / p > < / div > < img SRC = ". / img / 1. Webp "Alt =" "> < div class =" ach "> < div class =" lab "> fishing player < / div > < p > 126 people expressed the attitude 👀 < / p > < / div > <div class="art-bottom"> <div class="time"> today 13:39 </div> <div class="degree"> <span>&#xec7f</span>1458 </div> <div class="reply"> <span>&#xe8b4</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" <div class="all-comment"> <div class="all-c-top"> All comments < h3 > < / h3 > < ul > < li class = "hot" > top < / li > < li class = "early" > first < / li > < li class = "new" > new < / li > < / ul > < / div > < div class="all-comment-items"> <ul class="comtent-items"> </ul> </div> <input type="text" placeholder=""> </div> </footer> </div> </main>Copy the code

The CSS code:

@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; }Copy the code
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: #Awesome!;
    border: 1px solid #Awesome!;
    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: #Awesome!;
}

.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;
}
Copy the code

Js code:

 / / concern
        function Follow() {
            let follow = document.querySelector('.art-follow')
            follow.addEventListener('click'.function() {
                if (follow.innerHTML === 'attention') {
                    follow.innerHTML = 'Concerned'
                    follow.className = 'art-follow2'
                } else {
                    follow.innerHTML = 'attention'
                    follow.className = 'art-follow'
                }
            })
        }
        Follow()

        // Make a comment
        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()



        // Comment data
        let arr = [{
            "img": "./img/2.webp"."content": "The CPU is the brain of the phone, the computing power at its core. Strong CPU can bring higher computing capacity for mobile phones, but also increase the speed experience of playing games and watching movies on mobile phones. The main PARAMETERS of CPU are 2, core number and main frequency. Of course, these parameters are not the bigger the better, reasonable enough."."id": "1"."content_child": ""

        }, {
            "img": "./img/2.webp"."content": "The CPU is the brain of the phone, the computing power at its core. Strong CPU can bring higher computing capacity for mobile phones, but also increase the speed experience of playing games and watching movies on mobile phones. The main PARAMETERS of CPU are 2, core number and main frequency. Of course, these parameters are not the bigger the better, reasonable enough."."id": "2"."content_child": [{"id": "01"."content_child_img": "./img/2.webp"."content_child_info": "The CPU is the brain of the phone, the computing power at its core. "Powerful cpus can bring more computing power to phones."
                }, {
                    "id": "."."content_child_img": "./img/2.webp"."content_child_info": "The computing power of the core. "Powerful cpus can bring more computing power to phones."
                }, {
                    "id": "3"."content_child-img": "./img/2.webp"."content_child_info": "Powerful cpus can bring more computing power to phones."}}],]// Comment rendering
        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 = `
                                <div class="item-head">
                                    <div class="item-hp">
                                        <img src=" ${arr[i].img}"Alt =" "> < / div > < div class =" item - the name "> < h4 > Mr White < / h4 > < p > hardware technology < / p > < / div > < / div > < div class =" item - the content "> < p >${ arr[i].content }</p> <form action="" class="reply_"> <input type="text" value="" placeholder=" id=" autocomplete =" off"> <a Href = "#" > < span > & # xe8ba picture < / span > < / a > < a href = "#" > < span > & # xe54d < / span > video < / a > < input type = "submit" id = "submit" Value =" comment "> </form> <div class="item-bottom"> <div class="time">2021/08/07 11:49</div> <div class="degree"> <div Class ="thumb"> <span class="thumb_icon">&#xec7f</span> </div> <div class="reply"> <span Class = "reply_icon" > & # xe607 reply < / span > < / div > < / div > < / div > < / div > `
                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 = `<div class="answer">
                                        <div class="answer-1 answer-item">
                                            <img src=" ${arr[i].content_child[j].content_child_img} " alt="">
                                            <p>${arr[i].content_child[j].content_child_info}</p>
                                        </div>
                                        <div class="answer-2 answer-item">
                                            <img src=" ${arr[i].content_child[j++].content_child_img} " alt="">
                                            <p>${arr[i].content_child[j].content_child_info}</p>
                                        </div>
                                        <div class="answer-3 answer-item">
                                            <img src=" ${arr[i].content_child[j++].content_child_img} " alt="">
                                            <p>${arr[i].content_child[j].content_child_info}< / p > < / div > < div class = "answer - all" > < a href = "#" > all 80 article < / a > < / div > < / div > `
                    div.className = "answer"
                    item_content[i].firstChild.nextSibling.appendChild(div)
                }
            }
        }
        comment(arr)




        // Event bubbling (like reply)
        let items = document.querySelector('.comtent-items')
        items.addEventListener('click'.function(event) {
            / / thumb up
            if (event.target.className === 'thumb') {
                let num = event.target.lastChild.nodeValue // Get likes
                let patrn = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; // Check if there are numbers
                if (event.target.firstElementChild.className.search('active') != -1) {
                    event.target.firstElementChild.className = 'thumb_icon'
                    if (num == 1) {
                        event.target.lastChild.nodeValue = 'thumb up'
                    } 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 // Get likes
                let patrn = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; // Check if there are numbers
                if (event.target.className.search('active') != -1) {
                    event.target.className = 'thumb_icon'
                    if (num == 1) {
                        event.target.nextSibling.nodeValue = 'thumb up'
                    } 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}}}/ / reply
            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"}}// Reply to comments


        })







        / / window









        // Head fixed
        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}})Copy the code

Basic functions can be achieved, but there are many parts left unfinished, mainly because I want to rely on this module and this article to talk about event bubbling, which is a very important point, you can check mine if you are interestedEvent bubbling article

Ps: write bad everyone as a reference or an exercise notes look good ~~