内容：
1、完成网页设计并头尾分离
2、黏性表单
完成网页设计并头尾分离——————————————————————————————————————————————
hearder.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script> <title>分离页面</title> </head> <body> <div class='container"'> <div class="row"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#")><img src="https://www.sanwen8.cn/logo.gif" alt="" style='height: 30px'></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">诗歌</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">类型<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">散文</a></li> <li><a href="#">诗歌</a></li> <li><a href="#">小说</a></li> <li><a href="#">杂文</a></li> <li><a href="#">随笔</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="搜索"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">注册</a></li> <li><a href="#">登入</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> </div> <!--//头-->
footer.php
<div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <nav class="navbar navbar-default text-center" style="height: 30px"> <p style="line-height: 25px">免责声明：本站所发表的作文版权归作者所有，若转载或者抄袭他人作品，带来的一切后果与本站无关。若您发现本站存在您非授权的原创作品，请第一时间联系本站删除！本站享有代替本站作者维权的权力！CopyRight ©2007-2017 散文吧网站鲁ICP备09059645号</p> </nav> </div> </div> </div> <!--底部内容--> </body> </html>
main.php
<?php include 'inc/header.php'?> <div class="container"> <div class="row"> <div class="col-sm-8"> <div class="row"> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg" alt="" width="330" height="180" style="opacity: 0.7"></div> <div class="list-group panel-body"> <a href="#" class="list-group-item">幸福不在别处，而在心里</a> <a href="#" class="list-group-item">登华山</a> <a href="#" class="list-group-item">火得联想</a> <a href="#" class="list-group-item">感谢你，陪我看一路风景</a> <a href="#" class="list-group-item">音乐，慰藉灵魂</a> <a href="#" class="list-group-item">放逐漓江</a> </div> </div> <div class="panel panel-default"> <div class="panel-heading"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=32434654,520803237&fm=11&gp=0.jpg" alt="" width="330" height="180"style="opacity: 0.7"></div> <div class="list-group panel-body"> <a href="#" class="list-group-item">幸福不在别处，而在心里</a> <a href="#" class="list-group-item">登华山</a> <a href="#" class="list-group-item">火得联想</a> <a href="#" class="list-group-item">感谢你，陪我看一路风景</a> <a href="#" class="list-group-item">音乐，慰藉灵魂</a> <a href="#" class="list-group-item">放逐漓江</a> </div> </div> </div> <div class="col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3390961998,1154407883&fm=200&gp=0.jpg" alt="" width="330" height="180" style="opacity: 0.7"></div> <div class="list-group panel-body"> <a href="#" class="list-group-item">幸福不在别处，而在心里</a> <a href="#" class="list-group-item">登华山</a> <a href="#" class="list-group-item">火得联想</a> <a href="#" class="list-group-item">感谢你，陪我看一路风景</a> <a href="#" class="list-group-item">音乐，慰藉灵魂</a> <a href="#" class="list-group-item">放逐漓江</a> </div> </div> <div class="panel panel-default"> <div class="panel-heading"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514455945284&di=dae1fb2ad21aeefdcf591cf22e4df9d4&imgtype=0&src=http%3A%2F%2Fimg1.3lian.com%2F2015%2Fa1%2F95%2Fd%2F105.jpg" alt="" width="330" height="180" style="opacity: 0.7"></div> <div class="list-group panel-body"> <a href="#" class="list-group-item">幸福不在别处，而在心里</a> <a href="#" class="list-group-item">登华山</a> <a href="#" class="list-group-item">火得联想</a> <a href="#" class="list-group-item">感谢你，陪我看一路风景</a> <a href="#" class="list-group-item">音乐，慰藉灵魂</a> <a href="#" class="list-group-item">放逐漓江</a> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="list-group"> <a href="#" class="list-group-item active">网友推荐的散文</a> <a href="#" class="list-group-item">幸福不在别处，而在心里</a> <a href="#" class="list-group-item">登华山</a> <a href="#" class="list-group-item">火得联想</a> <a href="#" class="list-group-item">感谢你，陪我看一路风景</a> <a href="#" class="list-group-item">音乐，慰藉灵魂</a> <a href="#" class="list-group-item">放逐漓江</a> <a href="#" class="list-group-item">2018年，我有话要说</a> <a href="#" class="list-group-item">母亲的蘸水笔</a> <a href="#" class="list-group-item">门前的树和花</a> <a href="#" class="list-group-item">这个冬天，不要让自己太“冷”</a> </div> <div class="list-group"> <a href="#" class="list-group-item active">过去7日阅读榜</a> <a href="#" class="list-group-item">生日</a> <a href="#" class="list-group-item">做一个心怀慈悲的人</a> <a href="#" class="list-group-item">夕阳无限好，黄昏也美丽！</a> <a href="#" class="list-group-item">和谐的色彩</a> <a href="#" class="list-group-item">昨天</a> <a href="#" class="list-group-item">咖啡</a> <a href="#" class="list-group-item">不知为何却有种想哭的感觉</a> <a href="#" class="list-group-item">那一年，桃花如面，说不尽风情万千</a> <a href="#" class="list-group-item">初冬的早晨</a> <a href="#" class="list-group-item">用一朵花开的声音与你相遇</a> </div> </div> </div> </div> <!--//主页内容--> <?php include 'inc/footer.php'?>
效果：
黏性表单——————————————————————————————————————————————————
代码:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<script>confirm("确认提交吗?");</script>';
//验证过程省略
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
body,table,.btn{
padding: 0;
margin: 0;
}
body{
background-image:url("http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/03/26/8a58e91980e0f6014703b42c458cd124.jpg!/fw/1198/fh/561/quality/90/unsharp/true/compress/true/canvas/1198x561a0a0/format/webp");
background-repeat: no-repeat;
background-size: cover;
}
table{
margin: 10% auto 0;
border: solid 1px transparent;
width: 500px;
height: 150px;
text-align: center;
border-collapse: collapse;
background-color:whitesmoke;
opacity:0.6 ;
border-radius: 10px;
}
.font{
width: 40%;
text-align:right;
/*background-color: red;*/
text-align:justify;
/*text-justify:distribute-all-lines;*/
text-align-last:justify;
padding-left:142px ;
}
th{
font-weight: bold;
text-align: center;
margin: 0 0 20px;
letter-spacing: 10px;
font-size: large;
background-color: #5dafd1;
border-radius: 5px;
}
td{
/*background-color: #36b52a;*/
width: 200px;
text-align: left;
height: 38px;
/*margin: 30px;*/
}
tr{
margin: 0;
line-height: 20px;
}
/*border: solid 1px transparent;*/
.btn{
width: 150px;
height: 30px;
margin: 0 auto;
/*background-color: black;*/
position: relative;
}
button {
float: left;
width: 60px;
margin: 0 6px;
line-height: 25px;
/*background-color: deepskyblue;*/
}
p{
/*position: absolute;*/
font-size: 3em;
}
.register{
margin: 0 auto;
width: 300px;
background-color: #f800fe;
}
</style>
</head>
<body>
<h2></h2>
<form action="" method="post" >
<table>
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td class="font">用户名</td>
<td>: <input type="text" name="userName" value=<?php echo (isset($_POST['userName'])?$_POST['userName']:'') ?>></td>
</tr>
<tr>
<td class="font">密码</td>
<td>: <input type="password" name="password" value=<?php echo (isset($_POST['password'])?$_POST['password']:'') ?>></td>
</tr>
<tr>
<td class="font">性别</td>
<td>: <input type="radio" name="gender" value="male" <?php echo (isset($_POST['gender'])&&$_POST['gender']=='male'?'checked':'') ?>>男
<input type="radio"name="gender"value="remale" <?php echo (isset($_POST['gender'])&&$_POST['gender']=='remale'?'checked':'') ?>>女</td>
</tr>
<tr>
<td class="font">爱好</td>
<td>: <select name="hobby" >
<option value="football" <?php echo (isset($_POST['hobby'])&&$_POST['hobby']=='football'?'selected':'') ?>>足球</option>
<option value="run" <?php echo (isset($_POST['hobby'])&&$_POST['hobby']=='run'?'selected':'') ?>>跑步</option>
<option value="cooking" <?php echo (isset($_POST['hobby'])&&$_POST['hobby']=='cooking'?'selected':'') ?>>下厨</option>
</select></td>
</tr>
<tr>
<td colspan="2"><div class="btn">
<button>提交</button>
</div></td>
</tr>
</table>
</form>
</body>
</html>效果：
