这是我的一个原创网站,第一次结合我之前学的所有东西自己编写的一个网站,这一次结合了php连接上了数据库MySql,用的是Navicat来管理的,PHP用的是phpstudy。php学的很浅显,基本就是装进去而已。完成时间是2017年的2月份,总共六个界面,分别是首页,登录,注册,个人中心管理,发布以及后台。框架全部是bootstrap。
index.html
<?php
include 'global.php';
?>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--Ie的最新渲染模式-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>教育技术学生技术论坛</title>
<!-- Bootstrap -->
<link href="css/mian.css" rel="stylesheet">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="less/base.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header id="header">
<div class="container visible-lg visible-md">
<div class="row text-center">
<div class="col-md-5"> <a href="index.php">教技师生技术论坛</a> </div>
<div class="col-md-1"> <a href="#">手机端</a> </div>
<div class="col-md-1"> <a href="#">PC端</a> </div>
<div class="col-md-2"> <a href="login.php">登录</a> <a href="newone.php">注册</a> </div>
<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>
</div>
</div>
<div class="fix">
<ul>
<li><a href="#">返回顶部</a></li>
<li><a href="#yejiao">直达底部</a></li>
<li><a>询问客服</a></li>
<li><a>我的空间</a></li>
<li><a>
<!-- #BeginDate format:Sp1 -->20/2/17<!-- #EndDate -->
</a></li>
</ul>
</div>
</header>
<!--#banner-->
<section id="banner">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 指示物 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 包装的幻灯片 -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="images/gundong_1.jpg" class="banner-img-1">
<!--<picture>
<source srcset="images/slide_01_640x340.jpg" media="(max-width:600px)">
<source srcset="images/slide_01_2000x410.jpg" media="(min-width:601px)">
<img src="images/slide_01_2000x410.jpg">
</picture>-->
</div>
<div class="item"> <img src="images/gundong_2.jpg" class="banner-img-2"> </div>
<div class="item"> <img src="images/gundong_3.jpg" class="banner-img-3"> </div>
</div>
<!-- 控制器 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
</section>
<!--/#banner-->
<section id="page01">
<div class="news">
<h1 class="toLeft">最新新闻</h1>
<ul>
<?php
$query = mysql_query("SELECT * FROM `first_news` ORDER BY `id` DESC");
$i = 1;
while($row = mysql_fetch_assoc($query) and $i<5){
echo "<li>$row[tittle]</li>";
$i++;
}
?>
</ul>
</div>
<div class="hot">
<h1 class="toLeft">时事热点</h1>
<ul>
<?php
$query = mysql_query("SELECT * FROM `second_news` ORDER BY `id` DESC");
$i = 1;
while($row = mysql_fetch_assoc($query) and $i<5){
echo " <li>$row[tittle]</li>";
$i++;
}
?>
</ul>
</div>
</section>
<section id="page01">
<marquee direction="right">您好欢迎来到我的网站!</marquee>
<div class="news_2">
<h1 class="toLeft">最热帖子</h1>
<ul>
<?php
$query = mysql_query("SELECT * FROM `third_news` ORDER BY `id` DESC");
$i = 1;
while($row = mysql_fetch_assoc($query) and $i<5){
echo " <li><a href=\"platform.php\">【".$i."】:$row[tittle]</a></li>";
$i++;
}
?>
</ul>
</div>
<div class="hot_2">
<h1 class="toLeft">新鲜讨论</h1>
<ul>
<?php
$query = mysql_query("SELECT * FROM `fourth_news` ORDER BY `id` DESC");
$i = 1;
while($row = mysql_fetch_assoc($query) and $i<5){
echo " <li><a href=\"platform.php\">~".$i."~:$row[tittle]</a></li>";
$i++;
}
?>
</ul>
</div>
</section>
<section id="apart">
<div class="container visible-lg visible-md">
<div class="row text-center">
<div class="col-md-3"> <span>分享精选</span> </div>
<div class="col-md-6"> <a href="#">JAVA</a> <a href="#">android</a> <a href="#">C语言</a> <a href="#">PS</a> </div>
<div class="col-md-3"> <span>创新活动</span> </div>
</div>
</div>
</section>
<section id="page02">
<div class="left">
<button type="button" class="btn btn-info">SQL经典案例</button>
<button type="button" class="btn btn-info">JAVA作业文档</button>
<button type="button" class="btn btn-info">平面设计赏析</button>
<button type="button" class="btn btn-info">C语言面试技巧</button>
<button type="button" class="btn btn-info">PS课堂素材下载</button>
</div>
<div class="middle">
<div id="carousel-example-generi" class="carousel slide" data-ride="carousel">
<!-- 指示物 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generi" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generi" data-slide-to="1"></li>
<li data-target="#carousel-example-generi" data-slide-to="2"></li>
<li data-target="#carousel-example-generi" data-slide-to="3"></li>
<li data-target="#carousel-example-generi" data-slide-to="4"></li>
</ol>
<!-- 包装的幻灯片 -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <img src="images/gundong_4.jpg" class="banner-img-1">
<!--<picture>
<source srcset="images/slide_01_640x340.jpg" media="(max-width:600px)">
<source srcset="images/slide_01_2000x410.jpg" media="(min-width:601px)">
<img src="images/slide_01_2000x410.jpg">
</picture>-->
</div>
<div class="item"> <img src="images/gundong_5.jpg" class="banner-img-2"> </div>
<div class="item"> <img src="images/gundong_6.jpg" class="banner-img-3"> </div>
<div class="item"> <img src="images/gundong_7.jpg" class="banner-img-4"> </div>
<div class="item"> <img src="images/gundong_8.jpg" class="banner-img-5"> </div>
</div>
<!-- 控制器 -->
<a class="left carousel-control" href="#carousel-example-generi" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generi" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div>
</div>
<div class="right">
<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" onmouseover="this.stop();" onmouseout="this.start();" direction="down">
<p>理学院举行创业活动</p>
<p>自强选拔赛</p>
<p>数字媒体节</p>
<p>考研毕业生交流活动</p>
<p>师范技能大赛</p>
</marquee>
</div>
</section>
<section id="apart">
<div class="container visible-lg visible-md">
<div class="row text-center">
<div class="col-md-3"> <span>活动现场</span> </div>
<div class="col-md-6"> </div>
<div class="col-md-3"> </div>
</div>
</div>
</section>
<section id="page03">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"> <img src="images/anniu_1.jpg"> </div>
<div role="tabpanel" class="tab-pane" id="profile"> <img src="images/anniu_2.jpg"> </div>
<div role="tabpanel" class="tab-pane" id="messages"> <img src="images/anniu_3.jpg"> </div>
<div role="tabpanel" class="tab-pane" id="settings"> <img src="images/anniu_4.jpg"> </div>
<div role="tabpanel" class="tab-pane" id="last"> <img src="images/anniu_1.jpg"> </div>
</div>
</div>
<div class="col-md-4">
<ul class="nav" role="tablist">
<li data-title="lanqiu" class="active"> <a href="#home" role="tab" data-toggle="tab"> <img src="images/xiaotu_1.jpg"> </a> </li>
<li data-title="2"> <a href="#profile" role="tab" data-toggle="tab"> <img src="images/xiaotu_2.jpg"> </a> </li>
<li data-title="3"> <a href="#messages" role="tab" data-toggle="tab"> <img src="images/xiaotu_3.jpg"> </a> </li>
<li data-title="4"> <a href="#settings" role="tab" data-toggle="tab"> <img src="images/xiaotu_4.jpg"> </a> </li>
<li data-title="5"> <a href="#last" role="tab" data-toggle="tab"> <img src="images/xiaotu_1.jpg"> </a> </li>
</ul>
</div>
</div>
</div>
</section>
<section id="apart">
<div class="container visible-lg visible-md">
<div class="row text-center">
<div class="col-md-3"> <span>相关链接</span> </div>
<div class="col-md-6"> </div>
<div class="col-md-3"> </div>
</div>
</div>
</section>
<section id="page04">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li data-title="1" class="active"><a href="#first" role="tab" data-toggle="tab">链接管理</a></li>
<li data-title="2"><a href="#second" role="tab" data-toggle="tab">二级院校</a></li>
<li data-title="3"><a href="#third" role="tab" data-toggle="tab">学校部门</a></li>
<li data-title="4"><a href="#fouth" role="tab" data-toggle="tab">功能管理</a></li>
</ul>
</div>
<div class="col-md-8">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="first">
<button type="button" class="btn btn-info"><a href="login.php">后台管理</a></button>
<button type="button" class="btn btn-info">新闻发布</button>
<button type="button" class="btn btn-info">数据管理</button>
<button type="button" class="btn btn-info">工资管理</button>
<button type="button" class="btn btn-info">地址名簿</button>
<button type="button" class="btn btn-info">新闻管理</button>
</div>
<div role="tabpanel" class="tab-pane" id="second">
<br>
<button type="button" class="btn btn-info">理学院</button>
<button type="button" class="btn btn-info">马克思学院</button>
<button type="button" class="btn btn-info">艺术系</button>
<button type="button" class="btn btn-info">石油学院</button>
<button type="button" class="btn btn-info">机电学院</button>
<button type="button" class="btn btn-info">中文系</button></div>
<div role="tabpanel" class="tab-pane" id="third">
<br><br>
<button type="button" class="btn btn-info">财务部</button>
<button type="button" class="btn btn-info">教务处</button>
<button type="button" class="btn btn-info">保卫科</button>
<button type="button" class="btn btn-info">信息中心</button>
<button type="button" class="btn btn-info">校友中心</button>
<button type="button" class="btn btn-info">新闻中心</button>
</div>
<div role="tabpanel" class="tab-pane" id="fouth">
<br><br><br>
<button type="button" class="btn btn-info">支付功能</button>
<button type="button" class="btn btn-info">发布功能</button>
<button type="button" class="btn btn-info">上传数据</button>
<button type="button" class="btn btn-info">修改资料</button>
<button type="button" class="btn btn-info">新生必看</button>
<button type="button" class="btn btn-info">军训须知</button>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="apart">
<div class="container visible-lg visible-md">
<div class="row text-center">
<div>
<p><a name="yejiao">版权所有:广东石油化工学院教育技术专业全体师生 </a></p>
</div>
<div>
<p>联系电话:123-123456 邮箱地址:[email protected] </p>
</div>
<div>
<p>阿里巴巴:123456 QQ:123456
<p>
</div>
</div>
</div>
</section>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="js/mian01.js"></script>
<script src="js/tlttle.js"></script>
</body>
</html>
首页是这个样子的:
当时还没有学会系统的学会视觉设计,所以用的就是黑白灰,界面不是很好看的。
登录和注册界面:
两个都弄了表单验证,不过这里的js验证都是用js写的,js验证通过之后php才允许跳转。
page.html
论坛的界面
界面看上去的是真的不好看,都是黑白灰的,样式也是中规中矩。最下面的文本编辑器是可以用的,但是没有连接php后台,所以这里的文字编辑器事实上是一个摆设。
还有两个界面就是静态样式,看看图片就可以了
platform.html
后台实在太丑了就不展示了。
感受:
制作一个全部的网站真的十分的耗费精力,这五个网站大概花费了我一个星期的时间,加上对网页的美感设计不了解,真正是崩溃的不行,后面一个一个网站做,加上入门级的php,做完之后还是很开心的。