html论坛发帖案例

湖北彭于晏一号

于 2021-09-14 16:50:42 发布

阅读量7.3k

点赞数 3

文章标签： html css html5

本文链接：https://blog.csdn.net/lm0725139/article/details/120291194

版权

设计思路：先导入css和js首先将框架设计好

1.给“我要发帖”图片添加点击时间

点击后隐藏前面内容

2.发帖格式块已经出来：给头像添加点击事件设为头像

使用val()获取内容属性值以及需要的属性值，点击发布后使用hide()隐藏发帖格式块，并使用 show（）显示帖子格式块.

使用append（）插入设计好节点，css js images在底部


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>某网站论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script src="../../come/code/jquery-3.3.1.min.js"></script>
    <style>
        img {
            height: 70px;
            width: 70px;
            margin-top: 15px;
            float: left;
            border-radius:100px;
        }
 
        .div2 {
            margin-left: 10px;
            margin-top: 20px;
            float: left ;
            /* padding-left: 10px;*/
        }
 
        .div3 {
            font-size: 20px;
 
        }
 
        .div4{
            font-size: 14px;
            color: #aaaaaa;
            margin-top: 20px;
        }
 
        li {
            border-bottom: 1px #aaaaaa dashed;
            height: 100px;
 
        }
 
        .im{
            display: none
        }
 
    </style>
    <script>
        $(function () {
            $("div>header").click(function () {
            //点击事件，显示发帖代码块
                $(".post").show()
            });
            var img_ele_src;
            $("img").click(function () {
                //选择点击的图片为头像
                img_ele_src = $(this).attr('src');
            });
            $(".btn").click(function () {
                $(".post").hide();
                //获得输入的标题
                var c=$(".title").val();
                //获得选择的版块
                var b=$("#bankuai").val();
                //获取系统当前时间
               var d=new Date().toLocaleString();
                //设置格式，给div的class设为和主页css一样
                var a=$(" <li>\n" +
                    "              <img src=" + img_ele_src + "> \n" +
                    "                <div class=\"div2\">\n" +
                    "                    <div class=\"div3\">" + c + "</div>\n" +
                    "                    <div  class=\"div4\">板块：" + b + "     &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    发布时间：" + d + "</div>\n" +
                    "                </div>\n" +
                    "            </li>")
                    //向选中标签的前面添加节点
                $("section>ul").after(a)
            })
        })
    </script>
</head>
<body>
<div class="bbs">
    <header><span>我要发帖</span></header>
    <section>
        <ul>
            <li>
                <img src="images/tou01.jpg">
                <div class="div2">
                    <div class="div3">如何学习web前端开发课程</div>
                    <div class="div4">板块：新手报到 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 发布时间：2016-6-30 17：59</div>
                </div>
            </li>
            <li>
                <img src="images/tou02.jpg">
                <div class="div2">
                    <div class="div3">如何学习web前端开发课程</div>
                    <div class="div4">板块：新手报到 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 发布时间：2016-6-30 17：59</div>
                </div>
            </li>
            <li>
                <img src="images/tou03.jpg">
                <div class="div2">
                    <div class="div3">如何学习web前端开发课程</div>
                    <div class="div4">板块：新手报到 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 发布时间：2016-6-30 17：59</div>
                </div>
            </li>
            <li>
                <img src="images/tou04.jpg">
                <div class="div2">
                    <div class="div3">如何学习web前端开发课程</div>
                    <div class="div4">板块：新手报到 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 发布时间：2016-6-30 17：59</div>
                </div>
            </li>
        </ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select id="bankuai">
        <option>请选择版块</option>
        <option>电子书籍</option>
        <option>新课来了</option>
        <option>新手报到</option>
        <option>职业规划</option>
    </select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布">
    </div>
 
</div>
 
</body>
</html>

*{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;}