新浪微博制作 - 1月28日作业

Home > List of blog posts > 新浪微博制作
Blogger Information
Blog 49
fans 0
comment 4
visits 41748
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="testtest.css">
    <link rel="icon" type="image/x-icon" href="image/images/logo.png">
<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: 82%;
}
.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;
}
.content_msg p span{
    margin-right: 8px;

}
#but{
    width: 90px;
    height: 35px;
}
.content_nav_m{
    margin:10px 0;
    background: #061A36;
    height: 30px;
    
}
.content_nav_m ul li{
    margin:3px 10px;
    float: left;
    line-height: 25px;
    text-align: cente;
}
.content_nav_m ul li a{
    color: aliceblue;
    font-size: 10px;
    color:rgba(255,255,255,0.5);
}
.content_nav_m form{
    position: relative;
    float:right;
    margin-right: 5px;
    line-height: 30px;
    opacity: 0.5;
}
.content_nav_m form i{
    position: absolute;
    right:5px;
    top:0;
}
.content_nav_m form #i1{
    position: absolute;
    right:20px;
    top:0;
}
.content_msg_1{
    width: 100%;
    height: 130px;
    background: #061A36;
}
.content_smg_1tou{
    width:10%;
    
}
.content_smg_1tou img{
    margin-left: 15px;
    margin-top:15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.content_smg_1rong{
    margin-top:15px;
    margin-left: 15px;
    padding:0;
}
.content_smg_1rong h5{
    color: rgba(255,255,255,0.5);
    font-weight: bold;
}
.content_smg_1rong small{
    color: rgba(255,255,255,0.2); 
}
.content_smg_1rong p{
    color: rgba(255,255,255,0.5); 
    font-size: 14px;
    line-height: 20px;
}
.content_smg_1di{
    padding:0;
    width: 100%;
    height: 50px;
    margin: 0;
}
.content_smg_1di span{
    line-height: 35px;
    width: 23%;
    margin: 0;
    color:rgba(255,255,255,0.2);
    text-align: center;
    display: inline-block;
}
.content_smg_1di #i{
    color: rgba(255,255,255,0.1); 
    font-size: 25px;
}
</style>
    <title>新浪微博</title>
</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="r">因春节要参加各种聚会，女子租个2万的包回老家>>热门微博</small></p>
                <textarea class="br"></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:#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>
                </p>
            </div>
           
           <div class="content_nav_m br br">
               <ul>
                   <li><a href="">全部</a></li>
                   <li><a href="">原创</a></li>
                   <li><a href="">图片</a></li>
                   <li><a href="">视频</a></li>
                   <li><a href="">音乐</a></li>
                   <li><a href="">文章</a></li>
               </ul>
               <form>
                   <input type="text" placeholder="搜索我关注人的微博">
                   <i id="i1" class="layui-icon layui-icon-search"></i>
                   <i class="layui-icon layui-icon-triangle-d"></i>
               </form>
           </div>
           <div class="content_msg_1 br">
               <!-- 头像 -->
               <div class="content_smg_1tou l">
                   <img src="/image/images/h17.png">
               </div>
               <!-- 微博内容 -->
               <div class="content_smg_1rong l">
                   <h5>崔永元</h5>
                   <small>29分钟前 来自 iphone客户端</small>
                   <p>kjalkjdfaklsjfkl@163.com<br/>我的邮箱，面对上海、杭州、济南、南京网友开放，欢迎投稿。</p>
               </div>
               <div class="content_smg_1di l">
                   <hr style="opacity: 0.2;margin: 0;">
                   <span><i class="layui-icon layui-icon-star"></i>收藏</span><i id="i">|</i>
                   <span><i class="layui-icon layui-icon-release"></i>555</span><i id="i">|</i>
                   <span><i class="layui-icon layui-icon-reply-fill"></i>1260</span><i id="i">|</i>
                   <span><i class="layui-icon layui-icon-praise"></i>3040</span>
               </div>
           </div>

           <div class="content_msg_1 br" style="margin-top:15px;">
                <!-- 头像 -->
                <div class="content_smg_1tou l">
                    <img src="/image/images/h17.png">
                </div>
                <!-- 微博内容 -->
                <div class="content_smg_1rong l">
                    <h5>崔永元</h5>
                    <small>29分钟前 来自 iphone客户端</small>
                    <p>kjalkjdfaklsjfkl@163.com<br/>祝福大家新的一年快乐吉祥如意。</p>
                </div>
                <div class="content_smg_1di l" >
                    <hr style="opacity: 0.2;margin: 0;">
                    <span><i class="layui-icon layui-icon-star"></i>收藏</span><i id="i">|</i>
                    <span><i class="layui-icon layui-icon-release"></i>555</span><i id="i">|</i>
                    <span><i class="layui-icon layui-icon-reply-fill"></i>1260</span><i id="i">|</i>
                    <span><i class="layui-icon layui-icon-praise"></i>3040</span>
                </div>
            </div>
            <div class="content_msg_1 br" style="margin-top:15px;">
                    <!-- 头像 -->
                    <div class="content_smg_1tou l">
                        <img src="/image/images/h17.png">
                    </div>
                    <!-- 微博内容 -->
                    <div class="content_smg_1rong l">
                        <h5>崔永元</h5>
                        <small>29分钟前 来自 iphone客户端</small>
                        <p>kjalkjdfaklsjfkl@163.com<br/>又快到年底了，大家一定要开开心心的哦。</p>
                    </div>
                    <div class="content_smg_1di l" >
                        <hr style="opacity: 0.2;margin: 0;">
                        <span><i class="layui-icon layui-icon-star"></i>收藏</span><i id="i">|</i>
                        <span><i class="layui-icon layui-icon-release"></i>555</span><i id="i">|</i>
                        <span><i class="layui-icon layui-icon-reply-fill"></i>1260</span><i id="i">|</i>
                        <span><i class="layui-icon layui-icon-praise"></i>3040</span>
                    </div>
                </div>
           
           </div>
          </div>
          <div class="l mr content_r"  style="width:24%;height:500px;background:#fff"></div>
       </div> 
        <div class="clear"></div>
    </div>
</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
0 comments
Author's latest blog post
css中实现缓慢上升动作的代码

2019-02-08 20:58:04