科技企业网站(4) - 主页面设计

最新推荐文章于 2020-07-26 17:27:24 发布

UIEngineer

最新推荐文章于 2020-07-26 17:27:24 发布

阅读量367

点赞数

分类专栏： Thinkphp+mysql实现企业网站微信小程序

Thinkphp+mysql实现企业网站同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

微信小程序

5 篇文章 0 订阅

订阅专栏

1.jQuery照片轮显技术核心代码如下：

<div id="jquery">
    <ul class="ul_2">
        <li class="li_2"><img src="../Public/Images/jquery-1.gif" /></li>
        <li class="li_2"><img src="../Public/Images/jquery-2.gif" /></li>
        <li class="li_2"><img src="../Public/Images/jquery-3.gif" /></li>
        <li class="li_2"><img src="../Public/Images/jquery-4.gif" /></li>
    </ul>
</div>

<script>
    // 定时器
    setInterval(function(){
        // 如果指定的li标签的最后一个为可见状态
        if($("#jquery .ul_2 .li2_2:last").is(":visible")){
            // li标签的第一个以淡入的效果显示
            $("#jquery .ul_2 .li_2:first").fadeIn("3000");
            // li标签的最后一个隐藏
            $("#jquery .ul_2 .li_2:last").hide();
        }else{
            // 如果li某个标签为可见状态，则下一个标签显示
            $("#jquery .ul_2 .li_2:visible").next().fadeIn("3000");
            // 不处于动画状态的图片隐藏
            $("#jquery .ul_2 .li_2:not(:animated)").hide();
        }
    },2000);
</script>

2.主页面实现过程
view/Index/index.html关键代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

  </head>
  <body>
    <!--{__URL__}-->
   <div id="continue">
      <div class="search">
        <div class="titleTop"><img src="./Public/Images/logo.jpg" /></div>
      </div>
      <div class="titleSea">
        <form action="__URL__/action" method="post">
            <span>
               MY &nbsp;&nbsp;|&nbsp;&nbsp;PHONE
            </span><br />
            <input class="inputOne" type="text" name="text" />
            <input type="submit" name="sub" class="inputTwo" value="搜索" />
        </form>
      </div>
   </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

  </body>
</html>

注意：URL指的的是/WEBSITE/index.php/Home/Index

数据库配置文件config.php关键代码如下：

<?php
return array(
    //'配置项'=>'配置值'

    // 数据库配置信息
    'DB_TYPE'   =>  'mysql',        // 数据库类型
    'DB_HOST'   =>  '127.0.0.1',    // 服务器地址
    'DB_NAME'   =>  'db_project',   // 数据库名
    'DB_USER'   =>  'root',         // 用户名
    'DB_PWD'    =>  'root',         //  密码
    'DB_PORT'   =>  3306,           // 端口
    'DB_PREFIX' =>  'think_',       // 数据库表前缀
    'DB_CHARSET'    =>  'utf8',     // 字符集
    'DB_DEBUG'  =>  true,           // 数据库调试模式，开启后可以记录SQL日志
);

Home\Controller\IndexController.php的action方法关键代码如下：

<?php
namespace Home\Controller;
use Think\Controller;
use Think\Model;

header("content-type:text/html;charset=utf-8");

class IndexController extends Controller {
    public function index(){
        $this->display();
    }

    public function action(){
        $book = M('book');              // 实例化基础模型类
        $new = M('news');               // 实例化基础模型类
        $str = I('text');               // 接收参数
        // echo '$str = '.$str;
        // 执行模糊查询操作
        $book_look = $book->where("new_book like '%$str%'")->select();
        // print_r($book_look);
        $news_look = $new->where("title like '%$str%'")->select();
        // print_r($news_look);

        // 如果返回的数据条数都为0
        if(count($book_look) === 0 && count($news_look) === 0){
            // 将字符串传入到模板变量
            $this->assign('hint','未得到查询结果');
            $this->assign('url','__URL__');           // 传入URL地址
            $this->display('information');                       // 指向模板文件
        }else{
            $this->assign('book',$book_look);       // 将数组传入模板的变量
            $this->assign('news',$news_look);
            $this->display('actionBook');           // 指向模板文件
        }
    }
}

(2)同样菜单栏关键代码如下：

<div id="totle">
    <ul>
        <li><a href="__URL__">网站首页</a></li>
        // 指向控制器的myself方法
        <li><a href="__URL__/myself">关于我们</a></li>
        // 指向控制器的news方法
        <li><a href="__URL__/news">业界新闻</a></li>
        // 指向控制器的develop方法
        <li><a href="__URL__/develop">图书开发</a></li>
    </ul>
</div>

(3)第三部分是图片轮显的功能菜单，这些内容在上面已经讲过，这里不再赘述。
(4)第四部分是图像菜单链接的相关内容。

<div id="show">
    <div class="one">
        <a href="__URL__/show/image/1">
            <img src="../Public/Images/Java.gif" />
        </a>
    </div>
    <div class="two">
        <a href="__URL__/show/image/2">
            <img src="../Public/Images/c.gif" />
        </a>
    </div>
    <div class="three">
        <a href="__URL__/show/image/3">
            <img style="position:absolute;" src="../Public/Images/PHP.gif" />
        </a>
    </div>
</div>

(5)最后一部分是网站的footer部分，大多数的网站程序都在此处放置一些外部链接、友情链接和网站备案号等。Footer部分关键代码如下：

<div id="footer">
    <div class="footContent">
        MY Self &nbsp;&nbsp;|&nbsp;&nbsp;HOME&nbsp;&nbsp;|&nbsp;&nbsp;EMAIL&nbsp;&nbsp;|&nbsp;&nbsp;PHONE
    </div>
    <div class="footContentB">版权所有(c)周瑜网站</div>
</div>

UIEngineer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
科技企业网站(4) - 主页面设计

1.jQuery照片轮显技术核心代码如下：<div id="jquery"> <ul class="ul_2"> <li class="li_2"><img src="../Public/Images/jquery-1.gif" /></li> <li class="li_2"><img src="../Public/Images/jquery-2.gif"
复制链接

扫一扫