实例
<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例