微博输入栏布局作业

原创 2018-11-06 19:14:17 300
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>weibo</title> <style type="text/css"> .box{width:640px;height:2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>weibo</title>
<style type="text/css">
.box{width:640px;height:200px;border:10px solid pink;margin:0 auto;}
div img{margin:8px 8px;float:left;}
div .sfont{margin:10px 15px;float:right;font-size:15px;color:#888;}
.box textarea{width:620px;height:100px;margin-left:10px;border-color:#888;}
.box #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{width:32px;height:50px;line-height:50px;padding-left:25px;font-size:15px;color:#888;float:left;}
#sp1{background:url(images/an5.png) no-repeat left center;margin-left:10px;}
#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:150px;color:#888;}
#sm{width:90px;height:40px;float:right;margin:3px 15px;background:orange;border:none;border-radius:5px;}
</style>
</head>
<body>
<div>
<img src="images/12.png"><div>还可以输入<span></span>字</div>
<textarea></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 type="submit" value="发布" id="sm">
</div>
</body>
</html>

一个小小的输入框却运用了大量的知识,比如浮动,盒模型,背景图,字体设置,边距的设置。才能使得圆圆整整。

可见基础的重要性啊。自己在写的时候也发现了自己代码的熟练度还有很高的提升空间要去提升。

总结就是练练练,敲敲敲

发布手记

热门词条