<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>底部注册</title>
<style type="text/css">
*,body{
margin: 0
padding: 0
}
.register-div{
position: fixed
bottom: 0
width: 100%
height: 72px
background-color: #DB2442
padding-left: 30px
z-index: -99
min-width: 990px
}
.tuan-title{
display: inline-block
font: 600 34px/72px "Microsoft YaHei",SimHei
color: #fff
vertical-align: top
}
.tuan-form{
display: inline-block
width: 53%
height: 72px
line-height: 72px
color: white
text-align: center
vertical-align: top
}
.tuan-form .label{
display: inline-block
width: 60px
margin: 0px 10px 0px 10px
font: 200 15px/72px SimSun,"Microsoft YaHei",SimHei
vertical-align: top
}
.tuan-form input[type="text"]{
display: inline-block
width: 23%
height: 30px
line-height: 72px
margin: 19px 0 19px 0
}
#submit{
background-color: #FF6600
border-width: 0
padding: 11px 16px 11px 16px
margin: 10px 20px 10px 30px
width: 132px
text-align: center
vertical-align: top
color: white
font: 200 26px/30px "Microsoft YaHei",SimHei
}
.tuan-telephone{
display: inline-block
list-style: none
width: 28%
margin: 0 auto
line-height: 72px
padding: 0
}
.tuan-telephone>li{
line-height: 50%
text-align: center
}
.tuan-telephone hr{
position: relative
display: inline-block
width: 100%
height: 0
top: 15px
z-index: -9
}
.tuan-hotline{
display: inline-block
text-align: center
margin: 0 auto
background-color: #fff
border-radius: 15px
font: 300 15px/28px "Microsoft YaHei",SimSun
padding-left: 15px
padding-right: 15px
}
.tuan-hotline-num{
display: inline-block
text-align: center
vertical-align: middle
color: #fff
font: 300 24px/34px "Microsoft YaHei",SimSun
}
</style>
</head>
<body>
<div class="register-div">
<span class="tuan-title">团购报名：</span>
<form class="tuan-form">
<span class="label" for="username">姓名：</span>
<input type="text" name="username" id="username">
<span class="label" for="telephone">电话：</span>
<input type="text" name="telephone" id="telephone">
<input id="submit" type="submit" value="立即报名">
</form>
<ul class="tuan-telephone">
<li><hr><span class="tuan-hotline">报名热线</span></li>
<li><span class="tuan-hotline-num">400-987654321</span></li>
</ul>
</div>
</body>
</html>
你没发在编程板块，代码就不好格式化了，你复制过去运行一下吧。
基本定位是用position:fixed以及bottom:0，表单和各元素横排用display: inline-block, 那个横线用的是<hr>，颜色神马的我都是从你图里用吸管工具取的，基本是自适应设计的。
1、标准流——标签按照规定好默认方式排列
2、浮动
3、定位
多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float属性用于创建浮动框，将其移动到一边，直到左边或者右边边缘及包含块或另一个浮动框的边缘。
选择器:{ float:属性值}
1、 浮动的元素会脱离标准流（脱标），不再保留原来的位置
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特性
1、为了约束浮动元素，一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动左右位置，符合网页布局第一准则。
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响当前浮动盒子后面的标准流，不会影响前面的标准流
父级盒子不给高度，自己盒子会撑开父级盒子高度，但是加上浮动就会无效。
额外标签法也称为隔墙法，是W3C推荐的做法。会在浮动元素的末尾添加一个空的标签。例如：<div style="chear:both"></div>。新的标签必须是块级元素。
选择器:{ clear :属性值}
实际工作中几乎只用clear :both 。清除浮动的策略是闭合浮动，只让浮动在父级盒子内部影响。
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。这个属性还用于外边距合并。 缺点就是无法显示溢出部分。
:after伪元素法相当于额外标签法的升级版，也是在浮动元素尾部添加空的块级元素，用法是给父元素添加属性。以下为固定格式。
类似于:after 伪元素法，只不过前后都会插入一个盒子，更符合闭合的概念。
