HTML 做一个简易腾讯网怎么添加底部的网友评论和热点精选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .clearboth {
            clear: both;
        }

        a:hover {
            color: blue;
        }

        #TopNav {
            height: 80px;
            border-top: 2px solid #8DC9BA;
            border-bottom: 1px solid #EBEBEB;
        }

        #TopNav>a {
            float: left;
            padding: 25px 15px 20px 30px;
        }

        #TopNav a img {
            width: 122px;
        }

        #TopNav .qq_nav ul {
            float: left;
        }

        #TopNav .qq_nav ul li {
            float: left;
            padding: 0 15px;
            height: 80px;
            line-height: 80px;
            font-size: 18px;
        }

        #TopNav .qq_nav .nav_more {
            float: left;
            padding: 28px 15px 24px;
            margin-left: 50px;
        }

        #TopNav .qq_nav .nav_more a {
            display: block;
            padding: 1px 4px;
            /* border-radius属性设置圆角 */
            border-radius: 12px;
            background-color: red;
        }

        #loginWrap {
            float: right;
            padding: 28px 15px 24px;
            margin-right: 30px;
        }

        #loginWrap>a {
            display: block;
            padding: 1px 4px;
            border-radius: 6px;
            background-color: red;
        }

        #TopAd {
            margin: 15px auto;
            width: 1240px;
        }

        #TopAd #TopAdimg1 {
            float: left;
        }

        #TopAd #TopAdimg2 {
            float: right;
        }




        .content {
            margin: 0 auto;
            width: 1240px;
            height: 2900px;
            background-color: red;

        }

        .maincontent {
            margin: 0 auto;
            width: 850px;
            height: 2900px;
            background-color: cadetblue;
        }

        .maincontent h2 {
            padding-left: 20px;
            height: 80px;
            line-height: 80px;
            font-size: 30px;
            color: black;
        }

        .left_nav {
            display: block;
            position: fixed;
            top: 203px;
            left: 50%;
            margin-left: -620px;
            width: 170px;
            height: 270px;
            background-color: bisque;
        }

        .left_nav h4 {
            text-align: center;
            height: 60px;
            line-height: 60px;
        }

        .left_nav li {
            text-align: center;
            width: 170px;
            height: 50px;
        }

        .bottomad {
            position: fixed;
            left: 50%;
            margin-left: 537px;
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div id="TopNav">
        <a href="#"><img src="../images/new_logo.png"></a>
        <div class="qq_nav">
            <ul>
                <li><a href="#">要闻</a></li>
                <li><a href="#">抗肺炎</a></li>
                <li><a href="#">北京</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">军事</a></li>
                <li><a href="#">国际</a></li>
                <li><a href="#">NBA</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">汽车</a></li>
            </ul>
            <div class="nav_more">
                <a href="#">更多+</a>
            </div>
        </div>

        <div id="loginWrap">
            <a href="#">一键登录</a>
        </div>
    </div>
    <div id="TopAd">
        <img src="../images/ad1.png" id="TopAdimg1">
        <img src="../images/ad2.png" id="TopAdimg2">
        <div class="clearboth"></div>
    </div>
    <div class="content">
        <div class="maincontent">
            <h2>热点推荐</h2>
        </div>
    </div>


    <div class="left_nav">
        <h4>相关频道</h4>
        <ul>
            <li><a href="#">手机</a></li>
            <li><a href="#">智能硬件</a></li>
            <li><a href="#">平板电脑</a></li>
            <li><a href="#">人工智能</a></li>
        </ul>
    </div>
    <div class="bottomad">
        <img src="../images/bottomad.png">
    </div>
    </div>
</body>

</html>

你可以将腾讯网的前端代码直接复制下来，然后自己修改它的前端代码，这种直接拷贝其他网站的网页很常见

思路：input type="textArea" 评论完动态创建标签（createElement）然后添加到页面中的标签里（appenchild）参考这个https://www.jb51.net/article/121359.htm

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

HTML 做一个简易腾讯网 怎么添加底部的网友评论和热点精选

HTML 做一个简易腾讯网怎么添加底部的网友评论和热点精选