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

微博输入框布局

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!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)我要回复

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