个人练习小览---《教育技术学生技术论坛》

其他 2018-07-16 04:45:31 阅读次数: 0

这是我的一个原创网站，第一次结合我之前学的所有东西自己编写的一个网站，这一次结合了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，做完之后还是很开心的。

猜你喜欢

转载自blog.csdn.net/qq_35281096/article/details/81041996
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022