博客列表 >仿微博发布页面布局-2019年1月28日

仿微博发布页面布局-2019年1月28日

的博客
的博客原创
2019年02月26日 16:05:251235浏览

实例

<!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>
    <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{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;}
        .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;{}
    </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>
                        <textarea></textarea>
                        <p>
                            <span><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>
                    <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>
    
    
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议