bootstrap模仿发布微博表情图片文字响应式页面效果代码-html代码-BFW代码库

bootstrap模仿发布微博表情图片文字响应式页面效果代码

代码语言：html

所属分类：响应式

代码描述：bootstrap模仿发布微博表情图片文字响应式页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title>bootstrap仿文博页面样式</title>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
    <style>
        body{

    	font-family: tahoma,"microsoft yahei";
    }
    .navbar-right a{
    	color: #444
    }
    .navbar-header{
    	padding-left:140px;
    	padding-right: 50px;
    	font-weight: bold;
    }
    .btn_search{
    	position: relative;
    	left:-28px;
    	cursor: pointer;
    }
    .my_edit{
        margin-top:80px; 
    }
    #edit_form{
    	background: #fff;
    	padding-bottom: 8px;
    	border-radius: 3px;
        border: 1px solid #eee;
    }
    .container_bg{
    	background: #dd6572;
    	background-color:rgba(255, 255, 255, 0.5);
    	padding-bottom: 30px; 
    }
     #content{
     	height:95px;
     	border-style:solid;
     	border-width:1px;
     	border-color:#AEEEEE}
     #content img{
    
     }
    .emoji{
    	background: url(//repo.bfw.wiki/bfwrepo/images/face/1/face.png)  no-repeat;
    	padding:1px 0 10px 25px;
    	cursor: pointer;
    	font-size: 13px;
    	
    	
    }
    .pic{
    	background: url(//repo.bfw.wiki/bfwrepo/images/face/1/pic.png)  no-repeat;
    	margin-left: 10px;
    	padding:1px 0 10px 25px;
    	cursor: pointer;
    	font-size: 13px;
    	
    }
    .myEmoji{
    	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;
        top:40px;
        z-index: 9999;
        display: none
    }
    .myEmoji img{
    	 border: 1px solid #ccc;
    	 padding: 4px;
    }
    #send{
    	 margin-top:-5px ;
    	 background: #e0620d;
    	 color: #fff;
    	 padding: 8px 30px
    }
    .message{
    	background:#fff;
    	height: 100%;
    	margin-top:5px;
    	border: 1px solid #eee;
    	padding :15px;
    }
    .msg_content{
    
    	margin-top:10px;
    }
    .sort{
    	color:#777;
    }
    .part_right{
    	margin-top: 80px;
    	padding-left: 20px;
    }
    .inform{
    	background: #fff;
    	
    	border-radius: 3px;
    	
        border: 1px solid #eee;
    }
    .inform img{
    	border-radius: 50%;
    	width: 80px;
    	height: 80px;
    	margin-top: 20px;
    }
    .my_inform{
    	padding: 10px;
    }
    .item_hot{
    	padding: 10px 20px
    }
    .item_num{
    	color: #999
    }
    .mypic{
    	margin-top:5px;
    	width: 100%;
    	height: 200px;
    }
    .mypic:hover{
    	cursor:url('//repo.bfw.wiki/bfwrepo/images/face/1/enlarge.png'),auto;
    }
    .part_hot{
    	background: #fff;
    	margin-top:5px;
    	border: 1px solid #eee;
    }
    
    @media screen and (max-width: 699px) and (min-width: 320px) {
      .my_edit{
        margin-top:160px; 
      }
      .item_hot{
    	font-size: 12px;
    }
.........完整代码请登录后点击上方下载按钮下载查看