JQ课工场论坛列表

最新推荐文章于 2022-03-25 01:45:20 发布

Recently 祝祝

最新推荐文章于 2022-03-25 01:45:20 发布

阅读量891

点赞数 1

分类专栏： JQ 文章标签： html css jquery

本文链接：https://blog.csdn.net/qq_45656077/article/details/120690106

版权

JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Demo分析：

加粗样式在这里插入图片描述

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script type="text/javascript" src="../../js/jquery-1.8.2.js"></script>
    <script>
        function funcclear() {
            $(".title").val("");
            $("select").val("请选择板块");
            $(".content").val("");
          }
        function functime() {
            var now = new Date();
            return now.getFullYear()+"-"+((now.getMonth())+1)+"-"+now.getDate()+" "+
           +now.getHours()+":"+now.getMinutes()+":" +now.getSeconds();
        }  
        //主要板块编写
        $(function () {
            $("header>span").click(function () {
                $(".post").show();
              })
              $(".btn:first").click(function () {
                  var li =$("ul>li:first").clone();
                  var num =Math.ceil(Math.random()*3);
                  li.find("img").attr("src","images/tou0"+num+".jpg");
                  //鼠标放到图片上的文字显示
                  if($(".content").val().trim().length>0){
                      li.find("img").attr("title",$(".content").val().trim())
                  }
                  li.children("h1").html($(".title").val());
                  li.find("span:first").html("板块:"+$("select").val());
                  li.find("span:last").html("发布时间："+functime());


                  $("ul>li:first").before(li);
                  $(".post").hide();
                  funcclear();
                })

                $(".btn:last").click(function(){
                    $(".post").hide();
                    funcclear();
                });
        });

    </script>
</head>

<body>
    <div class="bbs">
        <header><span>我要发帖</span></header>
        <section>
            <ul>
                <li>
                    <div>
                        <img src="images/tou01.jpg" title="我的随机头像">
                    </div>
                    <h1>Hello world</h1>
                    <p>
                        <span>板块</span>
                        <span>发布时间:2021-10-10 17:58</span>
                    </p>
                </li>
            </ul>
        </section>
        <div class="post">
            <input class="title" placeholder="请输入标题（1-50个字符）">
            所属版块：<select>
                        <option>请选择版块</option>
                        <option>电子书籍</option>
                        <option>新课来了</option>
                        <option>新手报到</option>
                        <option>职业规划</option>
                    </select>
            <textarea class="content"></textarea>
            <input class="btn" value="发布">
            <input class="btn" value="关闭">
        </div>
    </div>

</body>

</html>

CSS：

*{margin: 0; padding: 0; font-family: "Arial";}
ul,li{list-style: none;}
.bbs{margin: 0 auto; width: 600px; position: relative;}
header{padding: 5px 0; border-bottom: 1px solid #cecece;}
header span{display:inline-block; width: 220px; height: 50px; color: #fff; background: #009966; font-size: 18px; font-weight: bold; text-align: center;line-height: 50px; border-radius: 8px; cursor: pointer;}
.post{position: absolute; background: #ffffff; border: 1px #cccccc solid; width: 500px; left: 65px; top:70px; padding: 10px; font-size: 14px; z-index: 999999; display: none;}
.post .title{width: 450px; height:30px; line-height: 30px; display: block; border: 1px #cecece solid; margin-bottom: 10px;}
.post select{width: 200px; height: 30px;}
.post .content{width: 450px; height: 200px; display: block; margin: 10px 0;border: 1px #cecece solid;}
.post .btn{width: 160px; height: 35px; color: #fff; background: #009966; border: none; font-size: 14px; font-weight: bold; text-align: center; line-height: 35px; border-radius: 8px; cursor: pointer;}

.bbs section ul li{padding: 10px 0; border-bottom: 1px #999999 dashed;
    overflow: hidden;}
.bbs section ul li div{float: left; width: 60px; margin-right: 10px;}
.bbs section ul li div img{ border-radius:50%; width: 60px;}
.bbs section ul li h1{float: left; width: 520px; font-size: 16px; line-height: 35px;}
.bbs section ul li p{color: #666666; line-height: 25px; font-size: 12px; }
.bbs section ul li p span{padding-right:20px;}
.bbs section ul li:last-child{display:none;}