完善所有微博布局及jq效果 - 1月29日作业

Home > List of blog posts > 完善所有微博布局及jq效果
Blogger Information
Blog 49
fans 0
comment 4
visits 41899
Special Recommendation
More>
Related recommendations
实例

<!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">
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="jquery-3.1.0.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="icon" type="image/x-icon" href="image/images/logo.png">
    <title>新浪微博</title>
<style>
*{
    margin: 0;
    padding: 0;
}
.clear{
   clear: both;
}
.mc{margin:0 auto;}
.l{float: left;}
.r{float:right;}
.br{
    border-radius: 3px;
}
.mr{
    margin-right: 10px;
}
body{
    background:#0D3B6C;
}
.box{
    background: url("image/images/bg.jpg")no-repeat top center;
    padding-top: 53px;
}
nav{
    background: rgba(255,255,255,0.9);
    position:fixed;
    top: 0;
    width: 100%;
    border-top: 2px solid #ff6500;
    line-height: 50px;
}
.header{
    width: 80%;
}
.nav_l form{
    width:450px;
    margin-left: 35px;
    position: relative;
}
.nav_l form input{
    width: 435px;
    height: 27px;
    padding-left: 15px;
}
nav .layui-icon-search{
    position: absolute;
    right: 10px;
    top: 0;

}
nav .layui-icon{
    font-size: 18px;
    font-weight: bold;
}
.nav_r a{
    margin-right: 15px;
     position: relative;
}
.nav_r a:hover{
    color: #ff6500;
}
.a_span{
    position: absolute;
    top: -7px;
    right: -10px;
}
.icon{
    width:6px;
    height: 6px;
    border-radius: 3px;
    background: #ff6500;
}
.msg{
    font-size: 12px;
    background: #ff6500;
    width:20px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    color: aliceblue;
    border-radius: 3px;
}
/* 导航结束 主体内容 */
.content{
    /* height: 500px; */
    width:63%;
    padding-top: 20px;
    background: rgba(13,59,108,0.5);
}
.content_l{
    width:73%;
}
.content_r{
    width: 24%;
}
.content_nav{
 width:20%;
}
.content_nav>a {
    font-size: 14px;
    font-weight: bold;
}
.content_nav a{
    display: block;
    line-height: 35px;
    padding-left: 10px;
    color: #fff;
    position: relative;
}
.content_nav a:hover{
    background:rgba(255,255,255,0.3);
}
hr{
    margin: 10px 0;
    background: rgba(255,255,255,0.3);
}
.content_msg{
 width:80%;
}
.c_span{
 position: absolute;
 top:15px;
 right: 5px;
}
#va{
    width: 35px;
    height: 18px;
    line-height: 18px;
    background: rgba(255,255,255,0.3);
    text-align:center;
    position: relative;
    margin:0 auto;
    padding: 0;
}
#va span{
    position: absolute;
    top: 0;
    right: 0;

}
.content_msg .text{
    padding: 10px;
    background: rgba(7,26,55,0.8);
}
.content_msg p{
    color:#fff;
    line-height: 30px;
}
.content_msg .textarea{
    width:100%;
    border:1px solid #40649D;
    height: 90px;
    background: #0C2343;
    color:rgba(255,255,255,0.3);
    resize: none;
    padding: 3px;
}
.content_msg p span{
    margin-right: 8px;
    margin-top: 8px;
}
.menu{
    line-height: 40px;
    position: relative;
}
#but{
    width: 90px;
    height: 35px;
}
.item_msg{
    width: 100%;
    background: rgba(7,26,55,0.8);
    margin-top:10px;
    padding-top:8px;
}
.message{
    width:90%;
    color:rgba(255,255,255,0.8);
}
.message .user img{
   width: 50px;
    height: 50px;
    border-radius: 50%;
}
.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 rgba(255,255,255,0.3);
}
.msg_menu span:hover{
    color: rgba(255,255,255,0.4);
}
.msg_menu span:hover i{
    color:#ff6500;
}

/* 个人信息 */
.use{
    background: rgba(7,26,55,0.8);
    text-align: center;
    color:rgba(255,255,255,0.7);

}
.user_pic{
    width:100%;
    background: url("image/images/bg1.jpg") no-repeat;
    /* height: 150px; */
}
.user_pic img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border:4px solid rgba(255,255,255,0.4);
    margin-top: 35px;
}
.lv{
    padding:1px;
    background: #ff6500;
    border-radius: 6px;
}
.user_pic ul{
    width: 100%;
}
.user_pic ul li{
    list-style: none;
    float: left;
    width: 33%;
    margin:10px 0;
}
.user_pic b:hover{
    color:#1C6FC9;
}
/* 表情包 */
.emoji{
    cursor: pointer;
}
.myEmoji{
    width: 500px;
    background: #fff;
    padding: 15px;
    border-radius: 3px;
    border:1px solid #eee;
    box-shadow: 0 4px 20px 1px rgba(0,0,0,0.2);
    position: absolute;
    z-index: 9999;
    display: none;
}
.myEmoji img{
    border:1px solid #ccc;
    padding: 4px;
}
.mypic:hover{
    height: 200px;
    cursor: url("image/images/enlarge.png"),auto;
}
</style>
</head>
<body>
    <div class="box">
       <nav>
           <div class="header mc">
              <div class="nav_l">
                 <a class="l" href=""><img src="image/images/WB_logo.png"></a>
                 <form class="l">
                     <input type="text" placeholder="大家都在搜：易烊千玺说别碰我">
                     <i class="layui-icon layui-icon-search"></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 a_span"></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>游戏</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">36</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>
           </div>
           <div class="clear"></div>
       </nav>
       <!-- 导航结束 主体内容 -->
       <div class="content mc">
          <div class="l mr content_l">
             <div class="l content_nav">
                <a href="">首页
                    <span class="icon c_span"></span>
                </a>
                <a href="">我的收藏</a>
                <a href="">我的赞</a>
                <hr>
                <small><a href=""><i class="layui-icon layui-icon-tree"></i>热门微博
                    <span class="icon c_span"></span>
                </a></small>
                <small><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></small>
                <small><a href=""><i class="layui-icon layui-icon-rate-solid"></i>特别关注</a></small>
                <small><a href=""><i class="layui-icon layui-icon-"></i>V+微博</a></small>
                <small><a href=""><i class="layui-icon layui-icon-camera"></i>美图摄影</a></small>
                <small><a href=""><i class="layui-icon layui-icon-circle"></i>同事</a></small>
                <small><a href=""><i class="layui-icon layui-icon-circle"></i>同学</a></small>
                <small><a href=""><i class="layui-icon layui-icon-circle"></i>名人明星</a></small>
                <small><a href=""><i class="layui-icon layui-icon-circle"></i>搞笑</a></small>
                <samll><a href="" id="va" class="br">展开
                    <span class="icon c_span"></span>
                </a></samll>
                <hr>
             </div>
        <div class="l content_msg">
            <div class="text">
                <p><b>有什么新鲜事告诉大家？</b><small class="small r">因春节要参加各种聚会，女子租个2万的包回老家>>热门微博</small></p>
                <div class="br textarea" contenteditable="true" id="text"></div>
                <p class="menu">
                    <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:#55E30F;"></i>视频</span>
                    <span><i>#</i style="color:#55E30F;">话题</span>
                    <span><i class="layui-icon layui-icon-chart" style="color:#ff6500;"></i>头条文章</span>
                    <span><i class="layui-icon layui-icon-more"></i></span>
                    <button id="but" class="layui-btn layui-btn-warm r">发布</button>
                    <span class="r">公布<i class="layui-icon layui-icon-down"></i></span>
                    <div class="myEmoji 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="emoji_1"></div>
                            </div>
                            <div class="layui-tab-item" id="hot">
                                    <div class="emoji_2"></div>
                               </div>
                         </div>
                    </div>
                </p>
            </div>
            <div class="item_msg br">
                <div class="message mc">
                   <div class="user">
                       <img src="image/images/8.jpg">
                       <b>某大大</b><small class="date">1分钟前</small>
                   </div>
                   <div class="msg_content">
                       <p>小时候总梦想仗剑走天涯，长大了却无时不想家。在异乡奋斗的你，曾为理想背井离乡，但别忘记家的方向。</p>
                       <img class="mypic" src="image/images/bg1.jpg">
                    </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>1298</span>
                   <span><i class="layui-icon layui-icon-praise"></i>1000</span>
                </div>
            </div>
        </div>
          </div>
          <div class="l mr content_r"  style="width:24%;height:500px;">
             <div class="use br">
                 <div class="user_pic">
                     <img src="image/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>
   <script type="text/javascript">
     layui.use('element',function(){
         var element=layui.element;
     })
     $(function(){
        //  添加表情包
        for(var i=1;i<60;i++){
            $('.emoji_1').append("<img src='image/images/f"+i+".png' style='width:30px;height:30px;' >")
        }
        for(var i=1;i<61;i++){
            $('.emoji_2').append("<img src='image/images/h"+i+".png' style='width:30px;height:30px;' >")
        }
        // 点击表情出现表情框
        $('.emoji').click(function(){
            $('.myEmoji').show()
        })
        $('.text').mouseleave(function(){
            $('.myEmoji').hide()
        })
        // 将表情添加到输入框
        $('.myEmoji img').each(function(){
            $(this).click(function(){
                var url = $(this)[0].src //通过下标找到点击的emoji
                $('#text').append("<img src='"+url+"' style='width:25px;height:25px;' >")
            })
        })
        // 键盘输入内容时，上边计算输入字符长度
        $('#text').keyup(function(){
            var len=$(this).text().length
            $('.small').text("已输入"+len+"个字符")
            if(len==0){
                $('.small').text('因春节要参加各种聚会，女子租个2万的包回老家>>热门微博')
            }
        })
        $('#but').click(function(){
            if($('#text').text().length==0){
                alert('请输入内容')
                return 
            }
            var date = new Date();
            var yy = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
            var content=$('#text').html()
            $('.text').after($('<div class="item_msg br"><div class="message mc"><div class="user"><img src="image/images/8.jpg"><b>某大大</b><small class="date">'+yy+'</small></div><div class="msg_content"><p>'+content+'</p><img src="image/images/bg1.jpg"></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-reply-fill"></i>1298</span><span><i class="layui-icon layui-icon-praise"></i>1000</span></div></div>'))
       
         $('#text').html(" ")
        })
        // 放大或缩小预览图片
        $('.mypic').click(function(){
            if($(this).height()==200){
                $(this).height(250)
            }else{
                $(this).height(200)
            }
        })
     })
    </script>
</body>

</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
QQ图片20190117120816.png
Correction status：Uncorrected

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
1 comments
虎哥 2019-03-06 19:12:14
过儿，这微博没做右边下半部分的效果么？
1 floor
Author's latest blog post
css中实现缓慢上升动作的代码

2019-02-08 20:58:04