微博发布简单布局

原创 2018-11-11 08:59:23 1
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>微博输入样式</title>    <style>   &

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>微博输入样式</title>
   <style>
       *{
           font-size: 12px;
       }
       #main{
           width: 600px;
           height: 260px;
           border: 8px solid pink;
           margin: 0 auto;

       }
       #shuru{
           width: 540px;
           height: 160px;
           margin-left: 20px;
       }
       img{
           width: 190px;
           float: left;
           
       }
       #right{
           float: left;
           margin-left: 200px;
       }
       
       #main #bq,#tp,#sp,#ht,#cwb,#gk2{
           float: left;
           width: 40px;
           height: 30px;
           line-height: 32px;
           padding-left: 20px;
           margin-top: 20px;

       }
       #bq{
           background: url("images/an5.png") no-repeat left center;


       }
       #tp{
           background: url("images/an4.png") no-repeat left center;
       }

       #sp{
           background: url("images/an3.png") no-repeat left center;
       }

       #ht{
           background: url("images/an2.png") no-repeat left center;
       }
       #cwb{
           background: url("images/an1.png") no-repeat left center;
       }

       #gk2{
           margin-left: 100px;
       }
       #bt{
           margin-top: 20px;
       }
   </style>
</head>
<body>

<div id="main">
   <img src="images/12.png" alt="">

   <div id="right">
       你还可以输入<span id="number">123</span>字
</div>
   <textarea id="shuru"></textarea>

   <span id="bq">表情</span>
   <span id="tp">图片</span>
   <span id="sp">视频</span>
   <span id="ht">话题</span>
   <span id="cwb">长微博</span>
   <span id="gk2">公开</span>
   <input type="button" value="发布" id="bt">

</div>



</body>
</html>

批改老师:灭绝师太批改时间:2018-11-11 09:29:10
老师总结:布局相对来说比较简单,完成的不错,继续加油】

发布手记

热门词条