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

首页 > 博客列表 > 微博布局-2019年1月29日
博主信息
博文 44
粉丝 0
访问量 34424
专题推荐
更多>
实例

<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
DOM-概念

2019-01-20 16:55:37
首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

实例
