返回微博输入框布局...登陆

微博输入框布局

A云海2019-01-10 13:04:01303

总结: 都是之前学过的css+html,基本已经完成布局,so easy!

<!doctype html>
<html>
<head>

   <meta charset="UTF-8">
   <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <title>Document</title>
   <style type="text/css">
       body{font-size: 14px;}
    .box{width: 600px;height: 200px;border:8px solid hotpink;margin: 0px auto;padding: 10px;}
    img{width:200px;height:24px;float:left;}
    .box1{float:left;margin-left: 260px}
    .text{width: 590px;height: 120px;border:1px solid green;margin:10px 3px;}
    #sp1,#sp2,#sp3,#sp4,#sp5,#sp6{float:left;margin-left: 10px;}
    button{margin-left: 2px;border: none;border: 1px solid #000;border-radius: 5px;}
    #sp6{margin-left: 140px;}
   </style>
</head>
<body>
<div>
   <img src="/images/1.jpg " alt="">
   <div>还可以输入<span id="sp">字</span></div>
   <textarea></textarea>
   <span id="sp1" ><i class="fa fa-frown-o"></i> 表情</span>
   <span id="sp2" ><i class="fa fa-image"></i> 图片</span>
   <span id="sp3"><i class="fa fa-video-camera"></i> 视频</span>
   <span id="sp4"><i class="fa fa-hashtag"></i> 话题</span>
   <span id="sp5"><i class="fa fa-list-alt"></i> 长微博</span>
   <span id="sp6">公开<i class="fa fa-angle-down"></i><button>发布</button></span>


</div>
</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送