通过背景图控制,float浮动在经过元素属性细致改动达到页面排版的效果

原创 2018-11-16 10:42:43 110
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>微博输入</title> <style type="text/css">      body{    &nbs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微博输入</title>
<style type="text/css">
      body{
      font-size: 12px;
      }
     .box{
     	width:600px;
     	height:160px;
     	border:8px solid pink;
     	margin:0px auto;
     	padding:10px;
     }
     img{float:left;}
     .box1{
     	float:left;
     	margin-left:255px;
     	width:150px;
     	height: 24px;
     	text-align: right;
     	font-size:14px;
     	color:#888;
     }
     .box span{
     	font-size:16px;
     	font-weight:bold;
     }
     #text{
     	width:600px;
     	height:100px;
     	border:1px solid #888;
     	margin-top:5px;
     }
     .box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{
      float:left;
      height: 32px;
      line-height: 32px;
      padding-left:26px;
      width:32px;
     }
     #sp1{
     	background:url(images/an5.png) no-repeat left center;
     }
     #sp2{
     	background:url(images/an4.png) no-repeat left center;
     }
     #sp3{
     	background:url(images/an3.png) no-repeat left center;
     }
     #sp4{
     	background:url(images/an2.png) no-repeat left center;
     }
     #sp5{
     	background:url(images/an1.png) no-repeat left center;
      width:50px;
     }
     #sp6{
     	margin-left: 139px;
     	margin-right:15px;
     	color:#888;
     }
     #bt{
     	float:left;
     	width:80px;
        height:30px;
        border:none;
        background:#ffc09f;
        border-radius:10px;
        text-align: center;
     }
</style>
</head>
<body>
<div class="box">
<img src="images/12.png">
<div class="box1">还可输入<span id="number"></span>zi</div>
<textarea id="text"></textarea>
<span id="sp1">表情</span>
<span id="sp2">图片</span>
<span id="sp3">视频</span>
<span id="sp4">话题</span>
<span id="sp5">长微博</span>
<span id="sp6">公开</span>
<input tyoe="button" value="发布" id="bt">
</div>
</body>
</html>


发布手记

热门词条