微博案例

微博案例
科技前沿 • 2025-01-25 07:38 • 阅读 61
大家好，我是讯享网，很高兴认识大家。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博案例</title>
    <style>
*{
    margin: 0; padding: 0;
}

        #weibo{
            width: 208px;
            height: 358px;
            border:1px solid #cecece;
            margin:50px auto;


        }

        #weibo>.title{
            height: 25px;
            background-color: #ecedee;
            line-height: 25px;
            color:#7c85b2;
            padding-left: 9px;


        }

#weibo>.head{

    width: 180px;
    margin:10px auto;
    border-bottom: 2px dotted #ccc;

}


#weibo>.head>img{border:1px solid #ccc;}

        #weibo>.head>p{text-align: center;}
        #weibo>.head>p>span{

            color:#9090aa;
            font:18px "宋体";
            margin-right: 5px;
        }

#weibo>.head>p>em{
    display:inline-block;
    width: 13px;
    height: 13px;
    background:url("image/v.jpg") no-repeat;


}
       #weibo>.head>p.btn{
           height: 30px;
           line-height: 30px;
           margin-bottom: 10px;
       }

      #weibo>.head>p.btn>button{
          background-color:#ecedee;
          border: 1px solid #cecece;
          width: 68px;
          height: 24px;
         line-height: 24px;
          font-size:14px;

          
      }
      #weibo>.head>p.btn>button>strong{

          display: inline-block;
          width: 16px;
          height: 16px;
    background:url("image/vb.jpg");
  vertical-align: -3px;

    
}
        
#weibo>.btn1>p>button{

    outline: none;
    width: 67px;
    height: 21px;
    background-color: #eeeef2;
    border: 1px solid #ccc;
    color: #555555;
}

        .btn1>p{

            margin-bottom: 5px;
            text-align: center;
        }



    </style>



</head>
<body>

<div id="weibo">
    
    <h5 class="title">个人资料</h5>
    
    <div class="head">
        <img src="image/head.jpg" alt="">
        <p class="vip">
            <span>
                V闪闪
            </span>
            <em></em>

        </p>

        <p class="btn">
            <button>
                <strong>

                </strong>
                微博
            </button>

        </p>



    </div>
    




<div class="btn1">

    <p>
        <button>加好友</button>
        <button>发纸条</button>
    </p>

    <p>
        <button>写留言</button>
        <button>加关注</button>


    </p>

</div>

</div>


</body>
</html>
讯享网
相关推荐
