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

实例

html>

新浪微博

*{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;{}

                    

首页

视频 

发现

游戏

名字

13

首页

我的收藏

我的赞

---

热门微博

热门视频

---

好友圈

特别关注

V+微博

美图摄影

同事

同学

名人明星

展开

---

有什么新鲜事告诉大家？因春节要参加各种聚会，女子租个2万的包回老家>> 热门微博

表情

视频

#话题

头条文章

发布

公布 

                                

某大大1分钟前

小时候总梦想仗剑走天涯，长大了却无时不想家。在异乡奋斗的你，曾为理想背井离乡，但别忘记家的方向。

                                

---

收藏

666

1266

1000

                        

某大大  lv36

• 308关注
• 188粉丝
• 208微博

运行实例 »

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