微博布局-2019年1月29日 - 前端学习总结

Home > List of blog posts > 微博布局-2019年1月29日
Blogger Information
Blog 44
fans 0
comment 0
visits 35523
Special Recommendation
More>
Related recommendations
实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>新浪微博</title>
    <style>
        *{padding: 0px;margin:0%;}
        a{text-decoration: none;}
        body{background: #0d3b6c}
        .clear{clear: both;}
        .box{background: url(static/images/bg.jpg) no-repeat top center;}
        .mc{margin: 0 auto;}
        .l{float: left}
        .r{float: right;}
        .br{border-radius: 50%;}
        nav{z-index: 9999;;height: 60px;background: rgba(255, 255, 255, 0.89);border-top: 2px solid #ff6500;position: fixed;top: 0px;width: 100%;}
        nav .layui-icon{font-size: 17px;font-weight: bold;padding-right: 3px;}
        .header{width: 70%;line-height: 60px;}
        .nav_l form{width: 400px;margin-left: 35px;position: relative;}
        .nav_l form input{width: 355px;height: 27px;padding-left: 10px;border:none;border-radius: 3px;}
        .nav_r a{margin-right: 15px;text-decoration: none;position: relative;}
        .nav_r a:hover{color: #ff6500;}
        .icon-radius{width: 6px;height: 6px;background: #ff6500;}
        .a_span{position: absolute;top:-7px;right:-5px;}
        .msg{width: 15px;height: 15px;background:#ff6500;color: #fff;font-size: 12px;text-align: center;line-height: 15px;border-radius: 15%;}
        .content{width: 53%;padding: 10px 0px;margin-top: 60px;;background: rgba(6, 50, 98, 0.5)}
        .content_l{width: 73%;}
        .content_r{width: 25%;margin-left: 1%;}
        .content_nav{width: 20%;}
        .content_nav a{display: block;color: white;font-size: 14px;font-weight: bold;line-height: 35px;padding-left: 10px;position: relative;text-decoration: none;}
        .content_nav a:hover{background: rgba(255, 255, 255, 0.3);}
        hr{margin: 10px auto;width: 95%;background: rgba(255, 255, 255, 0.3);}
        .content_nav small>a{font-weight:unset;font-size: 12px;}
        .content_nav a>span{position:absolute;right:10px;top:5px;}
        i{margin-right: 4px;}
        #va{width: 35px;background: rgb(87, 127, 179);margin: 5px auto;text-align: center;padding-left: 0;height: 18px;line-height: 18px;border-radius: 5px;cursor: pointer;}
        #va span{right: 0;top: 0;}
        .content_msg{width: 80%;;}
        .content_msg .text{padding: 10px;color: white;margin-top: 0px;position: relative;}
        .content_msg>div{background: rgba(7,26,55,0.8);border-radius: 4px;margin-top: 10px;}
        .content_msg .text>.textarea{width: 100%;height: 100px;border: 1px solid rgb(87, 127, 179);background: rgba(21, 57, 112, 0.863);border-radius: 5px;margin: 5px 0;resize: none;}
        .content_msg .text>p>span{margin-left: 10px;line-height: 30px;}
        .content_msg_text_but{border: none;width: 80px;height: 30px;background: #FFB800;border-radius: 3px;}
        .message{color:rgba(255,255,255,0.7);margin: 0 25px;padding: 10px 0;} 
        .use>img{width:50px;height: 50px;border-radius: 50%;margin-left: 10px;}
        .msg_content{color: white;margin: 10px 0px;}
        .msg_content>p{line-height: 30px;}
        .msg_content>img{height:200px;}
        .msg_menu{color: #40649D;height: 30px;}
        .msg_menu>span{display: inline-block;width:24%;text-align: center;}
        .s_b{border-right: 1px solid #40649D}
        .user{background: rgba(7,26,55,0.8);text-align: center;border-radius: 4px;}
        .user_pic{width: 100%;background: url(static/images/003_s.jpg) no-repeat;border-radius: 4px;color:rgba(255,255,255,0.7);}
        .user_pic>img{width: 68px;height: 68px;border-radius: 50%;border:4px solid rgba(255,255,255,0.4);margin-top: 35px; }
        .user_pic>ul>li{float: left;width: 33%;margin: 10px 0px;height: 30px;line-height: 15px;}
        .lv{background:#ff6500;border-radius: 5px;padding: 1px;}
        .emoji_tab{background: white;color: #ccc;border-radius: 5px;padding: 10px;position: absolute;left: 0;display: none;}
        .my_emoji1>img,.my_emoji2>img{margin: 1px;width: 35px;height: 35px;}
    </style>
</head>
<body>
    
    
  <div class="box">
        <nav>
            <div class="header mc">
                <div class="nav_l">
                    <a href="" class="l"><img src="static/images/wb_logo.png" alt=""></a>
                    <form action="" class="l">
                        <input type="text" placeholder="大家正在搜:易烊千玺">
                        <i class="layui-icon layui-icon-search" style="position:absolute;right:55px;"></i>
                    </form>
                </div>
                <div class="nav_r r">
                    <a href="" style="color:#ff6500;"><i class="layui-icon layui-icon-home"></i>首页</a>
                    <a href=""><i class="layui-icon layui-icon-video"></i>视频 <span class="icon-radius br"></span></a>
                    <a href=""><i class="layui-icon layui-icon-add-circle-fine"></i>发现</a>
                    <a href=""><i class="layui-icon layui-icon-theme"></i>游戏
                        <span class="icon-radius br a_span"></span>
                    </a>
                    <a href=""><i class="layui-icon layui-icon-user"></i>名字</a>
                    <a href=""><i class="layui-icon layui-icon-more-vertical"></i></a>
                    <a href=""><i class="layui-icon layui-icon-chat"></i>
                        <span class="msg a_span">13</span>
                    </a>
                    <a href=""><i class="layui-icon layui-icon-set"></i></a>
                    <a href="" style="color:#ff6500;"><i class="layui-icon layui-icon-survey"></i></a>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </nav>
        <div class="clear"></div>
        <div class="content mc">
            <div class="content_l l" >
                <div class="content_nav l">
                    <a href="">首页
                        <span class="icon-radius br" ></span>
                    </a>
                    <a href="">我的收藏</a>
                    <a href="">我的赞</a>
                    <hr>
                    <small>
                        <a href=""><i class="layui-icon layui-icon-tree"></i>热门微博
                            <span class="icon-radius br"></span>
                        </a>
                        <a href=""><i class="layui-icon layui-icon-video"></i>热门视频
                        </a>
                    </small>
                    <hr>
                    <small>
                        <a href=""><i class="layui-icon layui-icon-star"></i>好友圈</a>
                        <a href=""><i class="layui-icon layui-icon-star-fill"></i>特别关注</a>
                        <a href=""><i class="layui-icon layui-icon-note"></i>V+微博</a>
                        <a href=""><i class="layui-icon layui-icon-camera"></i>美图摄影</a>
                        <a href=""><i class="layui-icon layui-icon-circle"></i>同事</a>
                        <a href=""><i class="layui-icon layui-icon-circle"></i>同学</a>
                        <a href=""><i class="layui-icon layui-icon-circle"></i>名人明星</a>
                        <a  id="va">展开
                            <span class="icon-radius br"></span>
                        </a>
                    </small>
                   <hr>
                </div>
                
                <div class="content_msg l">
                    <div class="text">
                        <p><b>有什么新鲜事告诉大家？</b><small class="r">因春节要参加各种聚会，女子租个2万的包回老家>> 热门微博</small></p>
                        <div class="textarea" contenteditable="true"></div>
                        <p>
                            <span class="emoji"><i class="layui-icon layui-icon-face-smile-b" style="color: #FED901;"></i>表情</span>
                            <span><i class="layui-icon layui-icon-video" style="color: rgb(227, 15, 15);"></i>视频</span>
                            <span><i style="color: #55E30F;">#</i>话题</span>
                            <span><i class="layui-icon layui-icon-chart"></i>头条文章</span>
                            <span><i class="layui-icon layui-icon-more"></i></span>
                            <button class="r content_msg_text_but">发布</button>
                            <span class="r">公布 <i class="layui-icon layui-icon-down"></i></span>
                            <div class="clear"></div>
                        </p>
                        <div class="emoji_tab ">
                            <div class="layui-tab">
                                <ul class="layui-tab-title">
                                    <li class="layui-this"><a href="#set">预设</a></li>
                                    <li><a href="#hot">热门</a></li>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show" id="set">
                                        <div class="my_emoji1"></div>
                                    </div>
                                    <div class="layui-tab-item" id="hot">
                                        <div class="my_emoji2"></div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    <div class="item_msg">
                        <div class="message mc">
                            <div class="use">
                                <img src="static/images/8.jpg">
                                <b>某大大</b><small class="date">1分钟前</small>
                            </div>
                            <div class="msg_content">
                                <p>小时候总梦想仗剑走天涯，长大了却无时不想家。在异乡奋斗的你，曾为理想背井离乡，但别忘记家的方向。</p>
                                <img src="static/images/bg1.jpg" class="mypic">
                            </div>
                        </div>
                        <hr>
                        <div class="msg_menu">
                            <span class="s_b"><i class="layui-icon layui-icon-star"></i>收藏</span>
                            <span class="s_b"><i class="layui-icon layui-icon-share"></i>666</span>
                            <span class="s_b"><i class="layui-icon layui-icon-reply-fill"></i>1266</span>
                            <span><i class="layui-icon layui-icon-praise"></i>1000</span>
                        </div>
                   </div>
                </div>
                
            </div>
            <div class="content_r l" style="">
                <div class="user ">
                    <div class="user_pic">
                        <img src="static/images/8.jpg">
                        <p>某大大 <i class="layui-icon layui-icon-star-fill"></i> <small class="lv">lv36</small></p>
                        <ul>
                            <li class="s_b"><b>308</b><br><small>关注</small></li>
                            <li class="s_b"><b>188</b><br><small>粉丝</small></li>
                            <li><b>208</b><br><small>微博</small></li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>

  </div>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
        //…
    });

    $(document).ready(function () {
        for (let index = 1; index < 60; index++) {
            $(".my_emoji1").append("<img src='static/images/f"+index+".png' >");
        }
        for (let index = 1; index < 60; index++) {
            $(".my_emoji2").append("<img src='static/images/h"+index+".png' >");
        }

        $(".emoji").click(function (e) { 
            $(".emoji_tab").show();
        });
        $(".text").mouseleave(function () { 
            $(".emoji_tab").hide();
        });

        $(".my_emoji1>img,.my_emoji2>img").on("click", function () {
            $(".textarea").append("<img src='"+$(this).attr("src")+"' style='width:30px;height:30px;'>");
            // console.log($(this).attr("src"));
        });

        $(".content_msg_text_but").click(function (e) { 
            if ($(".textarea").text().length==0) {
                alert("请输入内容！");
                return false;
            }
            var date=new Date()
            var yy=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();//将日期以指定格式输出
            var content=$('.textarea').html()
            // $('.text').after($(".item_msg").clone())//复制一个节点包括它的子节点
            $('.text').after($('<div class="item_msg br" ><div class="message mc" ><div class="use"><img src="static/images/8.jpg" class="mr"><b> 某大大 </b> <small class="date" style="color:#999">'+yy+'</small></div><div class="msg_content"><p>'+content+'</p></div></div><div class="clear"></div><hr class="hr"><div class="msg_menu"><span class="s_b"><i class="layui-icon layui-icon-star"></i> 收藏</span><span class="s_b"><i class="layui-icon layui-icon-share"></i> 666</span><span class="s_b"><i class="layui-icon layui-icon-reply-fill"></i> 1260</span><span><i class="layui-icon layui-icon-praise"></i> 1000</span></div></div>'))
            $('.textarea').html('');
        });


    });
</script>
    
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
DOM-概念

2019-01-20 16:55:37