HTML開發部落格之註冊頁面設計（三）
底部欄
<div id="bottom"> <div id="bottom-content"> <div id="content-left"> <p><img src="img/3.jpg" height="150px"></p> <p> 网站位置 | 关于我们 |意见反馈|免责声明</p> <p>合作伙伴</p> </div> <div id="content-right"> <p>友情链接</p> <p>PHP中文网 | 小猪CMS</p> <p>公司网址：php.cn</p> </div> </div> </div>
建立一個div.id選擇器為bottom
對樣式進行修改
#bottom{
width:100%;
background-color:#323333;
height:300px;
margin-top:70px;
}
#bottom-content{
width:1000px;
overflow:hidden;
margin:0 auto;
color:white;
height:280px;
}
#content-left{
width:460px;
float:left;
height:280px;
}
#bottom-content p{
margin-top:10px;
}
#content-right{
width:460px;
float:right;
height:280px;
text-align: center;
margin-top: 40px;
}將底部欄分為兩個div，一個做左浮動，一個做右浮動，這樣可以分別對兩個欄位進行操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
<style>
@charset "utf-8";
body{
background-color: #F0F0F0;
}
*{
border: 0px;
padding: 0px;
margin: 0px;
font-size: 14px;
}
#top{
width: 100%;
height: 90px;
background-color: white;
border-bottom: 1px solid #bbbbbb;
}
#menu{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}
#menu ul li{
float: left;
height: 90px;
line-height: 90px;
margin-right: 50px;
}
#menu ul li a{
color: black;text-decoration: none;
display: inline-block;
}
#menu ul li a:hover{color: #FFD700;text-decoration: none}
#box{
width: 900px;
height: 370px;
background-color: white;
margin: 0 auto;
margin-top: 50px;
padding: 50px;
}
#box p{
text-align: center;
}
.p_line{
border-bottom: 1px solid #bbbbbb;
height: 40px;
line-height: 50px;
}
.txtBox{
border: 1px solid #bbbbbb;
width: 350px;
margin-top: 30px;
height: 50px;
padding-left: 10px;
border-radius: 5px;
}
.btn {
width: 365px;
height: 50px;;
color: white;
background-color: #DD0000;
margin-top: 25px;}
#bottom{
width:100%;
background-color:#323333;
height:300px;
margin-top:70px;
}
#bottom-content{
width:1000px;
overflow:hidden;
margin:0 auto;
color:white;
height:280px;
}
#content-left{
width:460px;
float:left;
height:280px;
}
#bottom-content p{
margin-top:10px;
}
#content-right{
width:460px;
float:right;
height:280px;
text-align: center;
margin-top: 150px;
}
</style>
</head>
<body>
<div id="top">
<div id="menu">
<ul>
<li><img src=/upload/course/000/000/004/5816f7b0056da728.png></li>
<li><a href="index.html"> 首页</a></li>
<li><a href="list.html">科技资讯</a></li>
<li><a href="list.html">心情随笔</a></li>
<li><a href="list.html">资源收藏</a></li>
<li><a href="list.html">图文图片</a></li>
<li><a href="list.html">留言板</a></li>
<li ><a href="">登陆</a>/<a href="">注册</a></li>
</ul>
</div>
</div>
<div id="box">
<p>注册账号<span style="padding-left: 730px">已有账号直接登陆</span></p>
<p style="margin-top: 40px"><input type="text" placeholder="请输入账号"></p>
<p><input type="password" placeholder="请输入密码"></p>
<p><input type="submit" value="提交注册"></p>
</div>
<div id="bottom">
<div id="bottom-content">
<div id="content-left">
<p><img src="/upload/course/000/000/004/581701b3557ed481.jpg" height="150px"></p>
<p> 网站位置 | 关于我们 |意见反馈|免责声明</p>
<p>合作伙伴</p>
</div>
<div id="content-right">
<p>友情链接</p>
<p>PHP中文网 | 小猪CMS</p>
<p>公司网址：php.cn</p>
</div>
</div>
</div>
</body>
</html>
