PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 综合作业提交:简仿PHP中文网

综合作业提交:简仿PHP中文网

四爽的博客
四爽的博客 原创
2019年08月21日 10:52:03 1076浏览

本次作业综合了老师所交的,选项卡,轮播图,懒加载,分页技术,cookie,session技术,因文件有一些多,仅贴前台部份。
作业最终效果:http://www.glce.cn/test/test/test/1.php
后台网址:http://www.glce.cn/test/test/test/login/index.php
后台帐户:admin
密码:admin

网页中此处是动态数据,别的都是静态形式。


1.jpg

以下是首页代码

实例

<?php
require 'inc/conn.php';//数据库链接页面
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>综合作业:简仿中文PHP网</title>
    <link href="css/style.css?us1" rel="stylesheet" />
    <script src="lib/jquery3.4.1.js"></script>
    <script src="lib/jq.js"></script>
    <style>
        .addariticle-main{
            color:#222;
            padding: 20px;
            font:1.1em Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
        }

        .title-fil {
            border-color:rgba(233,233,233,0.5);
            border-width:1px 0 0;
        }
        .addariticle-main fieldset {
            display: block;
            padding: 10px 18px ;
            border-image: initial;

        }
        .addariticle-main legend {
            display: block;
            font-size: 1.3em;
            padding:0 12px;

        }
        .aa-form-item{
            float: left;
            padding: 6px 10px 6px 15px;
            text-align: right;
            width: 80px;
        }
        .aa-input-block{
            margin-bottom:20px;
            clear:both;
            line-height: 24px;
            overflow: hidden;
        }
        .aa-input-item {
            position: relative;
            margin-left: 110px;
        }
        .aa-input-item .aa-input{
            height: 36px;
            width: 100%;
            border: 1px solid #e1e1e1;
            padding: 0 10px;
            box-sizing: border-box;
            border-radius: 2px;
        }
        .aa-input-item .sel-channel{
            height: 36px;
            border: 1px solid #e1e1e1;
            padding: 0 10px;
            box-sizing: border-box;
            border-radius: 2px;
        }
        .aa-input-block .showwan::after{
            content: '请选择所属栏目,如没有栏目请先创建';
            color: red;
        }
        .aa-input-block .aa-inline{
            float: left;
            width: 300px;
            box-sizing: border-box;
        }
        .aa-input-item .sel-w{
            height: 36px;
            padding: 0 10px;
            display: block;
            box-sizing: border-box;
            position:absolute;
            left: 120px;
            line-height: 36px;
            top:0;
        }
        .aa-form{
            font:1em Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            border-color:rgba(233,233,233,0.5);
        }
        .aa-input-item .aa-textarea{
            border: 1px solid #e1e1e1;
            width: 100%;
            min-height: 300px;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 2px;
        }
        .aa-input-item .textarea-small{
            min-height: 100px;
        }
    </style>
    <script>
        function userCookie(username,useremail,useraddress){
            var userinfo ="<div class=\"user-info\">\n" +
                "<div class=\"contain-r-title\">\n" +
                "<ul><li>用户信息</li></ul>\n" +
                "</div>\n" +
                "<ul class=\"contain-r-contet\">\n" +
                "<li>\n" +
                "<p>欢迎您:"+username+"</p>\n"+
                "<p>您的邮箱是:"+useremail+"</p>\n" +
                "<p>您的地址是:"+useraddress+"</p>\n" +
                "<p><button id=\"userlogout\" onclick='userlogout();'>退出登录</button></p>\n"+
                "</li>\n" +
                "</ul>\n" +
                "</div>";
            var contain1 = document.getElementById('contain1');
            contain1.getElementsByClassName('contain-r')[0].innerHTML = userinfo;
        }
        function userloginform(){
            var userlogin = "<div class=\"login-form\" >\n" +
                                "<div class=\"contain-r-title\">\n" +
                                 "<ul>\n" +
                                    "<li>用户登录</li>\n" +
                                 "</ul>\n" +
                              "</div>\n" +
                              "<ul class=\"contain-r-contet\">\n" +
                                   "<li>\n" +
                                       "<form  id=\"form-userlogin\" method=\"post\" >\n" +
                                            "<p>\n" +
                                            "<label for=\"username\">帐户:</label>\n" +
                                            "<input type=\"text\" id=\"username\" name=\"username\" />\n" +
                                         "</p>\n" +
                                         "<p>\n" +
                                             "<label for=\"userpassword\">密码:</label>\n" +
                                             "<input type=\"password\" id=\"userpassword\" name=\"userpassword\" />\n" +
                                         "</p>\n" +
                                         "<p><button type=\"button\" id=\"login-btn\" onclick=\"userlogin();\">登录</button>" +
                                             "<span id=\"register\" onclick='register();'>免费注册</span>\n" +
                                         "</p>\n" +
                                       "</form>\n" +
                                     "<div id=\"tips\">\n" +
                                         "<ul><li>测试帐户:admin<br/>密码:123456 <br/>或自行注册</li></ul>\n" +
                                     "</div>\n" +
                                 "</li>\n" +
                              "</ul>\n" +
                           "</div>";
            var contain1 = document.getElementById('contain1');
            contain1.getElementsByClassName('contain-r')[0].innerHTML = userlogin;
        }
    </script>
</head>
<body>
<div style="width100%;color:red;z-index: 300;position: relative">
    <h2>本页面为学习作业,学习PHP请到PHP中文网(网址:<a href="http://www.php.cn">www.php.cnPHP中文网</a>)</h2>
</div>
<!--网页头部菜单 开始 采用Jquery编码-->
<div id="box-header">
    <ul id="header-nav">
        <li class="active"><a href="#">首页</a><span class="bgc"></span></li>
        <li><a href="#">视频教程</a><span class="bgc"></span></li>
        <li><a href="#">社区问答</a><span class="bgc"></span></li>
        <li>
            <a href="#">技术文章</a><span class="s"></span><span class="bgc"></span>
            <ul class="header-nav-child">
                <li><a href="#">每日头条</a></li>
                <li><a href="#">php教程</a></li>
                <li><a href="#">php小知识</a></li>
                <li><a href="#">mysql教程</a></li>
                <li><a href="#">开发工具</a></li>
                <li><a href="#">html教程</a></li>
                <li><a href="#">javascript教程</a></li>
                <li><a href="#">css教程</a></li>
                <li><a href="#">服务器运维</a></li>
                <li><a href="#">博客文章</a></li>
            </ul>
        </li>
        <li>
            <a href="#">编程词典</a><span class="s"></span><span class="bgc"></span>
            <ul class="header-nav-child">
                <li><a href="#">php词典</a></li>
                <li><a href="#">原生手册</a></li>
                <li><a href="#">mysql词典</a></li>
                <li><a href="#">Linux词典</a></li>
                <li><a href="#">Redis词典</a></li>
                <li><a href="#">html词典</a></li>
                <li><a href="#">javascript词典</a></li>
                <li><a href="#">css词典</a></li>
                <li><a href="#">Bootstrap词典</a></li>
                <li><a href="#">jquery词典</a></li>
            </ul>
        </li>
        <li>
            <a href="#">资源下载</a>
            <span class="s"></span><span class="bgc"></span>
            <ul class="header-nav-child">
                <li><a href="#">手册下载</a></li>
                <li><a href="#">后端模板</a></li>
                <li><a href="#">学习课件</a></li>
                <li><a href="#">js特效</a></li>
                <li><a href="#">网站源码</a></li>
                <li><a href="#">类库下载</a></li>

            </ul>
        </li>
        <li><a href="#">工具下载</a><span class="dot-red"></span><span class="bgc"></span></li>
        <li><a href="#">菜鸟学堂</a><span class="bgc"></span></li>
    </ul>
</div>

<!--网页头部菜单 结束-->

<!--banner行 开始-->
<div id="box-banner">
    <!--banner行左则 开始 采用js原生码-->
    <div id="banner-left">
        <ul class="banner-left-navlist">
            <li class="banner-left-nav">
                <ul>
                    <li class="banner-left-navname"><a href="#">php开发</a><span>></span></li>
                </ul>
                <ul class="banner-left-navchild">
                    <li>
                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>
                    </li>
                </ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"><a href="#">前端开发</a><span>></span></li></ul>
                <ul class="banner-left-navchild">
                    <li>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                    </li>
                </ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"><a href="#">服务端开发</a><span>></span></li></ul>
                <ul class="banner-left-navchild">
                    <li>
                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                    </li>
                </ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"><a href="#">移动开发</a><span>></span></li></ul>
                <ul class="banner-left-navchild">
                    <li>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                    </li>
                </ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"><a href="#">数据库</a><span>></span></li></ul>
                <ul class="banner-left-navchild"><li>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>

                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>




                    </li></ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"> <a href="#" >服务器运维&下载</a><span>></span></li></ul>
                <ul class="banner-left-navchild">
                    <li>

                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>


                    </li>
                </ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"> <a href="#">在线工具箱</a><span>></span></li></ul>
                <ul class="banner-left-navchild">
                    <li>
                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>





                    </li>
                </ul>
            </li>
            <li class="banner-left-nav">
                <ul><li class="banner-left-navname"><a href="#">常用类库</a><span>></span></li></ul>
                <ul class="banner-left-navchild">
                    <li>

                        <dl>
                            <dt>网站源码</dt>
                            <dd><a href="#">前端模板程</a></dd>
                            <dd><a href="#">后端模板</a></dd>
                            <dd><a href="#">小程序源码</a></dd>
                            <dd><a href="#">微信源码</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                            <dd><a href="#">电商源码</a></dd>
                            <dd><a href="#">dedecms模板</a></dd>
                            <dd><a href="#">phpcms模板</a></dd>
                        </dl>
                        <dl>
                            <dt>php教程</dt>
                            <dd><a href="#">php图文教程</a> </dd>
                            <dd><a href="#">php视频教程</a></dd>
                            <dd><a href="#">php手册教程</a></dd>
                            <dd><a href="#">php实战教程</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>常用软件</dt>
                            <dd><a href="#">Notepad++</a></dd>
                            <dd><a href="#">SublimeText</a></dd>
                            <dd><a href="#">Mac版Wamp</a></dd>
                            <dd><a href="#">PhpStorm 10.0.1 Mac版</a></dd>
                            <dd><a href="#">其他机构教程</a></dd>
                            <dd><a href="#">php原生手册</a></dd>
                            <dd><a href="#">phpstudy工具使用视频教程</a></dd>
                            <dd><a href="#">前端模板</a></dd>
                            <dd><a href="#">wordpress模板</a></dd>
                        </dl>
                        <dl>
                            <dt>开发语言</dt>
                            <dd><a href="#">PHP</a></dd>
                            <dd><a href="#">Python</a></dd>
                            <dd><a href="#">Python3D</a></dd>
                            <dd><a href="#">jango</a></dd>
                            <dd><a href="#">Linux</a></dd>
                            <dd><a href="#">Docker</a></dd>
                            <dd><a href="#">JavaCC++</a></dd>
                            <dd><a href="#">Perl</a></dd>
                            <dd><a href="#">Ruby</a></dd>
                        </dl>



                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!--banner行左则 结束-->

    <!--banner行右则 开始-->
    <div id="banner-right"><!--banner行右则 头部菜单-->
        <div id="banner-right-top">
            <ul id="banner-right-topul">
                <li><a href="#">PHP头条</a><span class="new newbgO">新</span></li>
                <li><a href="#">独孤九贱</a></li>
                <li><a href="#">学习路线</a><span class="new newbgB">新</span></li>
                <li><a href="#">在线工具</a></li>
                <li><a href="#">趣味课堂</a><span class="new newbgY">新</span></li>
                <li><a href="#">社区问答</a></li>
                <li><a href="#">课程直播</a></li>
                <li ><div id="banner-right-topS">
                        <form action="" method="post"  onsubmit="return check()"> <!--采用jquery 代码验证 代码在页面底部-->
                            <input type="search" placeholder="请输入关键字" id="search_Btop" name="search" />
                            <button  id="search_btn" ></button>
                        </form>
                    </div></li>
            </ul>
        </div><!--banner行右则 头部结束-->

        <div id="carousel"><!--banner行右则 轮播器开始 用js 原码编写-->
            <div class="active"  id="carousel-div">
                <div id="carousel-div-l">
                    <div id="carousel-h2"><h2>第七期_PHP与ThinkPHP6基础</h2></div>
                    <div id="carousel-time"></div><!--上课时间用 js 原码 页面底部-->
                    <div id="carousel-btn">立即参加</div>
                    <div id="carousel-div-bottom">PHP中文网来自课程:第七期_PHP与ThinkPHP6基础</div>
                </div>

                <div id="carousel-div-r">
                    <div class="carousel-div-rc">
                        <div id="rc-title">
                            <img src="images/linux-live.gif" /><span class="title-img">精选直播课</span>
                        </div>
                        <div id="rc-content">
                            <a href="#" ><i class="icon"></i><span>已结束</span>web前端布局知识及案例分享</a>
                            <a href="#"><i class="icon"></i><span>已结束</span>仿腾讯视频.电视剧首页</a>
                            <a href="#" ><i class="icon"></i><span>已结束</span>零代码基础8个小时做出头序</a>
                            <a href="#"><i class="icon"></i><span>已结束</span>php全栈开发之小博客大智慧</a>
                            <a href="#"><i class="icon"></i><span>已结束</span>《php全栈开发经验分享》公益</a>
                            <a href="#"><i class="icon"></i><span>已结束</span>Web项目开发流程大揭密</a>
                        </div>
                    </div>
                </div>
            </div>
            <div><a href="#"><img src="images/index_banner1.jpg"  width="985px"  height="330px" /></a></div>
            <div><a href="#"><img src="images/index_banner2.jpg" width="985px"  height="330px" /></a></div>
            <div><a href="#"><img src="images/index_banner3.jpg"  width="985px"  height="330px" /></a></div>

            <ul id="carousel-dot">
                <li></li>
            </ul>
            <span class="kips prev"><</span>
            <span class="kips next">></span>
        </div><!--banner行右则  轮播器结束-->
        <ul id="banner-right-bottom"><!--banner行右则  底部广告开始-->
            <li><a href="#"><img src="images/index_yunv.jpg" /></a></li>
            <li><a href="#"><img src="images/index_php_item2.jpg" /></a></li>
            <li><a href="#"><img src="images/index_php_item3.jpg" /></a></li>
            <li><a href="#"><img src="images/index_php_new4.jpg" /></a></li>
        </ul><!--banner行右则  底部广告开始-->
    </div>
    <!--banner行右则 结束-->
</div>
<!--banner行 结束-->
<!--中间广告栏 -->
<div class="poster">
    <a href="http://www.php.cn"><img src="images/index_ad222.jpg" /></a>
</div>
<!--网页主内容 开始 双飞翼布局-->
<div id="main">
    <!--内容块1 开始-->
    <!--内容块1中间内容 选项卡采用JS原码编码-->
    <?php include 'template/imain.php' ?>
    <!--内容块1 结束-->
    <!--中间广告栏 -->
    <div class="poster">
        <a href="http://www.php.cn"><img src="images/index_banner8.jpg" /></a>
    </div>
    <!--内容块2 开始-->
    <div id="contain2">
        <ul id="learn">

        </ul>

    </div>
    <!--内容块1 结束-->
</div>
<!--网页主内容 结束-->
<!--网页底部-->
<?php include 'template/footer.php'?>
<script>
    // 搜索框检验开始
    var $scontent = $("#search_Btop");
    $scontent.on("focus",function(){
        if($scontent.val()==="请在此处输入关键字!"){
            $(this).val("");
            $(this).removeClass("warnning");
        }
    });
    function check(){
        if($scontent.val()==="" || $scontent.val()==="请在此处输入关键字!"){
            $scontent.val("请在此处输入关键字!");
            $scontent.addClass("warnning");
            return false;
        }else{
            return true;
        }
    }
    // 搜索框检验结束

    // 上课时间代码 开始

    var timer = setInterval(init,1000);
    function init() {
        var date = new Date();
        var day = date.getDate();
        //星期几
        var week = date.getDay();
        //时
        var hh = date.getHours();
        var hours = Number(hh);
        //分
        var mm = date.getMinutes();
        //秒
        var ss = date.getSeconds();

        var timeHTML = document.getElementById("carousel-time");
        var times_h ;
        var times_m = 60-Number(mm);
        var times_s = 60-Number(ss);
        var timeHTMLct ;

        var switchNum = 0;
        if(hours<20){
            switchNum = 0;
        }else if(hours>=22){
            switchNum = 1;
        }


        if(Number(hh)===20 || Number(hh)===21){
            timeHTMLct ="<li id='timeHTML'><img src='images/linux-live.gif' /><span class='timetext'>正在直播!</span></li>";
        }else{

            switch (switchNum){
                case 0:
                    times_h = 19-Number(hh);
                    break;
                case 1:
                    times_h = 23-Number(hh)+20;
                    break;
                default:
                    break;
            }
            if(Number(week)===6){
                times_h += 48;

            }
            if(Number(week)===0){
                times_h += 24;
            }
            timeHTMLct="<li id='timeHTML'>距离上课 <span class='timetext'>"
                +times_h+"</span> 时 <span class='timetext'>"+times_m+"</span> 分 <span class='timetext'>"
                +times_s+"</span> 秒"+"</li>";

        }
        timeHTML.innerHTML = timeHTMLct;

    }
    // 上课时间代码 结束

    // 轮播器 开始
    var carousel = document.getElementById("carousel");//获取carousel节点
    var carouselDivs = carousel.children;//获取carousel节点子元素
    var carouselDivArr = Array.prototype.slice.call(carouselDivs);//carousel节点子元素集转为数合
    var carouselItem = [];//设一个空数组,装要切换的carousel节点子元素
    var carouselDotpar = document.getElementById("carousel-dot");
    var carouselDotList = carouselDotpar.children[0];//获取carouselDotList li节点 控制小按钮父节点

    //筛选要切换的carousel节点子元素
    carouselDivArr.forEach(function(Item){
        if(Item.nodeName === "DIV"){
            carouselItem.push(Item);
        }
    });
    //生成相应个数的小按钮
    for(var i=0; i<carouselItem.length; i++){
        var carouselDot = document.createElement("span");
        if(i === 0){
            carouselDot.classList.add("active");
        }
        carouselDotList.appendChild(carouselDot)//添加小按钮到carouselDotList li节点下
    }

    //计算小按钮的位置left
    var dotNums = carouselItem.length;//小按钮个数
    var dotlistwidth = dotNums*20+10;
    carouselDotList.style.marginLeft = -(dotlistwidth/2)+"px";
    var carouselBtn = $("#carousel-dot span");//小按钮集
    var divNum = 0;//当前显示图片索引
    var btnNum = 0;//当前高亮按钮索引
    var $carouselDiv =$("#carousel > div");//div集
    $carouselDiv.each(function(i,Item){//查找当前显示的DIV索引
        if($(Item).hasClass("active")){
            divNum = i;
        }
    });
    //轮播切换效果使用jquery 代码
    $(function(){
        carouselBtn.on("click",function(){
            btnNum = $(this).index();//点击的按钮索引;
            $(this).addClass("active").siblings().removeClass("active");//点击的按钮高亮
            if( divNum>btnNum ){//判断大小来设置切换方向
                $carouselDiv.eq(divNum).stop().animate({"left":"985px"}).removeClass("active");
                $carouselDiv.eq(btnNum).css({"left":"-985px"}).stop().animate({"left":"0"}).addClass("active");
            }else if(divNum<btnNum){
                $carouselDiv.eq(divNum).stop().animate({"left":"-985px"}).removeClass("active");
                $carouselDiv.eq(btnNum).css({"left":"985px"}).stop().animate({"left":"0"}).addClass("active");
            }
            divNum = btnNum;//重新赋值当前显示DIV索引
        });

        var $kips = $(".kips");
        $kips.on("click",function(){
            if($(this).hasClass("next")){//如果是向前按钮
                if(divNum>=0 && divNum<$carouselDiv.length-1){
                    $carouselDiv.eq(divNum).animate({"left":"-985px"}).removeClass("active");
                    $carouselDiv.eq(divNum+1).addClass("active").css({"left":"985px"}).animate({"left":"0"});
                    divNum = divNum+1;//重新赋值显示的DIV索引
                }else if(divNum >= $carouselDiv.length-1){//最一个DIV倒回第一个DIV
                    $carouselDiv.eq(divNum).animate({"left":"-985px"}).removeClass("active");
                    $carouselDiv.eq(0).addClass("active").css({"left":"985px"}).animate({"left":"0"});
                    divNum = 0;//重新赋值显示的DIV索引
                }
            }
            if($(this).hasClass("prev")){//如果是向前按钮
                if(divNum > 0 ){
                    $carouselDiv.eq(divNum).animate({"left":"985px"}).removeClass("active");
                    $carouselDiv.eq(divNum-1).addClass("active").css({"left":"-985px"}).animate({"left":"0"});
                    divNum = divNum-1;//重新赋值显示的DIV索引
                }else if(divNum <= 0){//最一个DIV倒回第一个DIV
                    $carouselDiv.eq(divNum).animate({"left":"985px"}).removeClass("active");
                    $carouselDiv.eq($carouselDiv.length-1).addClass("active").css({"left":"-985px"}).animate({"left":"0"});
                    divNum = $carouselDiv.length-1;//重新赋值显示的DIV索引
                }
            }
            carouselBtn.eq(divNum).addClass("active").siblings().removeClass("active");//设置按钮高光
        })


    });

    var carouselTimer = null;//定时器
    carouselstar();
    function carouselstar(){
        carouselTimer = setInterval(carouselOn,3500);//设置切换时间
    }
    function carouselOn(){//模拟电脑点击next事件
        var carou_click = new Event("click");
        document.getElementsByClassName("kips next")[0].dispatchEvent(carou_click);
    }
    carousel.addEventListener("mouseover",function(){//监听鼠标进入
        clearInterval(carouselTimer);
    },false);
    carousel.addEventListener("mouseout",carouselstar,false);//监听鼠标移出
    //轮播器 结束


    // 内容块1中间内容 选项卡 开始
    var contain1 = document.getElementById("contain1");
    var containTabnav = contain1.getElementsByClassName("contain-fc-tabnav")[0];
    var containTabnavs = containTabnav.children;
    var containTabArr = Array.prototype.slice.call(containTabnavs);
    var containTabcontent = contain1.getElementsByClassName("contain-fc-tabcontent");
    var containTContentArr = Array.prototype.slice.call(containTabcontent);

    containTabArr.forEach(function(tabIndex, tabId){

        tabIndex.dataset.index = tabId.toString();
        tabIndex.addEventListener("mouseover",function(){

            containTabArr.forEach(function(tabIndex){
                tabIndex.classList.remove("active");
            });
            this.classList.add("active");
            containTContentArr.forEach(function(tentItem){
                tentItem.classList.remove("show");
            });
            containTContentArr[Number(this.dataset.index)].classList.add("show");
        })
    });
    // 内容块1中间内容 选项卡 结束

    //内容块2代码 开始 采用懒加载
    var titleinfoArr = [//建立文档信息数组
        [" "," "," "],
        ["初级","编程学习方法分享直播公益课","1W+次播放"],
        ["初级","2018前端入门_HTML5","18W+次播放"],
        ["初级","CSS视频教程-玉女心经版","10W+次播放"],
        ["初级","JavaScript极速入门_玉女心经系列","18W+次播放"],
        ["中级","独孤九贱(6)_jQuery视频教程","12W+次播放"],
        ["初级","30分钟学会网站布局","6W+次播放"],
        ["初级","[公益直播]Web前端开发极速入门","5W+次播放"],
        ["初级","[phpStudy极速入门视频教程","40W+次播放"],
        ["中级","ThinkPHP6.0极速入门(视频教程)","4W+次播放"],
        ["中级","独孤九贱(4)_PHP视频教程","50W+次播放"],
        ["初级","php完全自学手册","20W+次播放"],
        ["初级","MySQL权威开发指南(教程)","2W+次播放"],
        ["中级","公益直播]PHP实战开发极速入门","3W+次播放"],
        [" "," "," "],
        ["中级","独孤九贱(7)_Bootstrap视频教程","10W+次播放"],
        ["中级","最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上***课)","59W+次播放"],
        ["中级","MySQLi面向对象编程极速入门","20W+次播放"],
        ["中级","PDO操作极速入门,今天你用了吗?","2W+次播放"],
        ["中级","PHP与Ajax极速入门","4W+次播放"],
        ["初级","正则表达式极速入门","3W+次播放"],
        ["中级","命名空间30分钟极速入门","1W+次播放"],
        ["初级","PHP字符串操作经典入门","1W+次播放"],
        ["中级","CI框架30分钟极速入门","4W+次播放"],
        ["中级","PHP实战天龙八部之微信支付视频教程","5W+次播放"],
        ["中级","PHP实战天龙八部之仿爱奇艺电影网站","26W+次播放"],
        ["中级","大型公益实战天龙八部之开发Mini版MVC框架仿糗事百科网站","1W+次播放"],
        ["中级","php全栈开发之小博客大智慧","1W+次播放"]
    ];
    var learnUl = document.getElementById("learn");//获取节点learn
    var fregUl = document.createDocumentFragment();//建立碎片

    for(var j = 0; j<28; j++){//群生成li元素,并包含相应的img
        var learnLi = document.createElement("li");
        if(j===0 || j===14){
            learnLi.innerHTML= "<a href=\"#\"><img src=\"#\" data-index=\"images/delayload/"+j+".jpg\" /></a>";
        }else{
            learnLi.innerHTML= "<a href=\"#\"><img src=\"#\" data-index=\"images/delayload/"+j+".jpg\" />\n" +
                "<div class=\"learn-title\">\n" +
                "<i>"+titleinfoArr[j][0]+"</i><span>"+titleinfoArr[j][1]+"</span>\n" +
                "</div>\n" +
                "<div class=\"learn-playtimes\"><span>"+titleinfoArr[j][2]+"</span></div>"
        }
        fregUl.appendChild(learnLi);
    }
    learnUl.appendChild(fregUl);//把碎片加入到learnUl下
    var $c2LLi = $("#learn li");
    $c2LLi.on("mouseover",function(){
        $(this).find(".learn-title").stop().animate({"bottom":"30px"},500);
    });
    $c2LLi.on("mouseout",function(){
        $(this).find(".learn-title").stop().animate({"bottom":"-30px"},500);
    });
    var learnImgs = learnUl.getElementsByTagName("li");//包含img的li集
    var learnImgArr = Array.prototype.slice.call(learnImgs);//转成数组
    window.addEventListener("scroll",delayImg,false);//监听窗口事件
    function delayImg(){
        var scrollTop = document.documentElement.scrollTop;//滚动距离
        var clientHeight = document.documentElement.clientHeight;//可视区高度
        var content2offsetTop = document.getElementById("contain2").offsetTop;//最外控件到达顶端的高度
        learnImgArr.forEach(function(Item){
            //判断图片是否进入可视区域 为看效果多加100PX
            if(Item.offsetTop+content2offsetTop+100 < scrollTop + clientHeight){
                //图片进入可视区域把data-index的值赋给src
                Item.getElementsByTagName("img")[0]
                    .setAttribute("src",Item.getElementsByTagName("img")[0].dataset.index);
            }
        })

    }
    //内容块2代码 结束
    //注册弹窗页面

    function register(){

        //新建一个碎片
        var dfreg = document.createDocumentFragment();
        //新建一个遮罩层
        var bShade = document.createElement('div');
        //新建一个注册页面层
        var registerDiv = document.createElement('div');

        //给庶罩层添加样式
        bShade.setAttribute("class","bShade");
        // 给注册页面层添加样式
        registerDiv.setAttribute("class","regisgerDivborder");
        registerDiv.innerHTML =
                "<div class=\"regisgerDiv\"><b class=\"close\" onclick=\"shadeClose()\">X</b>\n"+
                "<div class=\"addariticle-main\">\n" +
                "<fieldset class=\"title-fil\">\n" +
                "<legend>新会员注册</legend>\n" +
                "</fieldset>\n" +
                "<form method=\"POST\" class=\"aa-form\">\n" +
                "<div class=\"aa-input-block\">\n" +
                "<label class=\"aa-form-item\">会员用户名</label>\n" +
                "<div class=\"aa-input-item\" >\n" +
                "<input type=\"text\" name=\"user_name\" id=\"user_name\" class=\"aa-input\" placeholder=\"输入管理员网名\" />\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class=\"aa-input-block\">\n" +
                "<label class=\"aa-form-item\">设置密码</label>\n" +
                "<div class=\"aa-input-item\">\n" +
                "<input type=\"password\" name=\"user_password\" id=\"user_password\" class=\"aa-input\"\n" +
                "placeholder=\"设置密码\">\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class=\"aa-input-block\">\n" +
                "<label class=\"aa-form-item\">重填密码</label>\n" +
                "<div class=\"aa-input-item\">\n" +
                "<input type=\"password\" name=\"repassword\" class=\"aa-input\" placeholder=\"再次输入密码\">\n" +
                " </div>\n" +
                "</div>\n" +
                "<div class=\"aa-input-block\">\n" +
                "<label class=\"aa-form-item\">电子邮箱</label>\n" +
                "<div class=\"aa-input-item\">\n" +
                "<input  type=\"email\" name=\"user_email\" id=\"user_email\" class=\"aa-input\" placeholder=\"输入电子邮箱\" />\n" +
                " </div>\n" +
                "</div>\n" +
                " <div class=\"aa-input-block\">\n" +
                "<label class=\"aa-form-item\">通信地址</label>\n" +
                "<div class=\"aa-input-item\">\n" +
                "<textarea type=\"text\" id=\"user_address\" placeholder=\"通信地址\" class=\"aa-textarea textarea-small\"></textarea>\n" +
                "</div>\n" +
                "</div>\n" +
                "<div class=\"aa-input-block\">\n" +
                "<div class=\"aa-input-item\" >\n" +
                "<button type=\"button\" class=\"aa-ajaxbtn\" onclick=\"aaAjaxBtn()\">提交</button>\n" +
                "<button type=\"reset\" class=\"aa-reset\">重置</button>\n" +
                "</div>\n" +
                " </div>\n" +
                "</form>\n" +
                "</div>\n"+
                "</div>";

            //把注册页面层加入遮罩层;
        bShade.appendChild(registerDiv);
            //把两层加入碎片中
        dfreg.prepend(bShade);
            //把碎片加入到页面中
        document.body.prepend(dfreg);

        var shade = document.getElementsByClassName("bShade")[0];
        var close = shade.getElementsByClassName("close");
        //监听表单数据
        var $aaAjaxBtn = $(".aa-ajaxbtn").eq(0);//获取提交按钮
        var $aainpItems =$(".aa-input-item");//获取输入框父节点
        $aainpItems.each(function(){//监听输入情况 有输入去除红外框
            $(this).children(0).on("input",function(){
                $(this).css({"outline":"0px solid blue"});
                if($(this).parent().hasClass('showwan')){//判断父类是否有警告样式
                    $(this).parent().removeClass('showwan');//清除警告样式
                }
            })
        });


    }

    //表单检测代码开始
    function aaAjaxBtn(){//点按钮触发事件
            var pwd = '';//设置空变量 准备装第一次输入的密码
            var $aainpItems =$(".aa-input-item");//获取输入框父节点
            var aaBtnSwitch = true;//设置提交开关
            $aainpItems.each(function(i){
                if(i !==5 ){//排除无需输入的输入元素
                    if($(this).children(0).val().length === 0){//验证必选项是否输入
                        $(this).children(0).css({"outline":"1px solid red"});
                        $(this).children(0).focus();
                        aaBtnSwitch = false;
                        return false;
                    }
                }
                if(i===1){
                    pwd = $(this).children(0).val();//存储第一次输入的密码
                }
                if(i===2){//验证输入密码是否相同
                    console.log(pwd);
                    if($(this).children(0).val() !== pwd){
                        alert("两次输入的密码不相同!");
                        $(this).children(0).css({"outline":"1px solid red"});
                        $(this).children(0).focus();
                        aaBtnSwitch = false;
                        return false;
                    }

                }

                if(i===3){//验证输入的邮箱
                    //邮箱正则表达式
                    var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                    if(!reg.test($(this).children(0).val()))
                    {
                        alert("邮箱格式不对");
                        $(this).children(0).focus();
                        aaBtnSwitch = false;
                        return false;
                    }
                }


            });
            if(aaBtnSwitch===true){//表单填写完毕
                var  $userName = $("#user_name").val();//获取管理员网名
                var  $userPassword = $("#user_password").val();//获取密码
                var  $userEmail = $("#user_email").val();//获取电子邮箱
                var  $useraddress = $("#user_address").val();//获取电子邮箱
                var $aFormData = new FormData();//实例化一个表单空对象

                //给对象添加数据
                $aFormData.append('userName',$userName);
                $aFormData.append('userPassword',$userPassword);
                $aFormData.append('userEmail',$userEmail);
                $aFormData.append('useraddress',$useraddress);

                $.ajax({
                    type:'POST',//提交方式
                    url:'login/pro-user.php',//数据处理文件
                    data:$aFormData,//输入的数据
                    dataType:'json',//输入方式
                    cache:false,//不做缓存
                    processData:false,//数据进行序列化处理
                    contentType:false,
                    success:function(amsg){//回调函数
                        var status = amsg.status;

                        if(amsg.status==='0'){//传递回的信息0为失败,1为成功
                            alert("管理员添加失败!");
                            return false;
                        }else if(amsg.status==='1'){
                            var adduserSuc = '<div class=\"adduserSuc\"><span style=\"color:red\">用户注册成功!三秒后转回首页</span><br/>' +
                                '<button onclick=\"shadeClose()\">立即返回首页</button></div>';
                            $(".regisgerDiv").eq(0).html(adduserSuc);
                            setTimeout(shadeClose,3000);//三秒后跳转 shadeClose是关闭弹出层方法
                        }
                    }
                })
            }
        }


    function shadeClose(){
        $(".bShade").eq(0).remove();
    }

    //登录框检测
    function userlogin(){
        var dptype = '';//控制器类型
        var $username = $("#username").val();
        var $userpassword = $("#userpassword").val();
        if($username.length === 0 || $userpassword.length===0){
            alert("用户名和密码不用为空!");
            return false;
        }else {//验证成功后
            dptype = 'userlogin';//控制器类型
            var $userForm = new FormData();//实例化一个表单对象
            //给表单对象加数据
            $userForm.append('username', $username);
            $userForm.append('userpassword', $userpassword);
            $userForm.append('dptype', dptype);

            $.ajax({
                type: 'POST',//传输方式
                url: 'user/user_dispatch.php',//处理数据的路径
                dataType: 'json',//传输数据的类型
                data: $userForm,//传输的数据
                cache: false,//不用缓存
                processData: false,//数据序列化
                contentType: false,
                success: function (umsg) {//回调函数
                    console.log(umsg.status);
                    if (umsg.status === '0') {//传递回的信息0为失败,1为成功
                        alert("登录失败!");
                        return false;
                    } else if (umsg.status === '1') {
                        userCookie(umsg.username,umsg.useremail,umsg.useraddress);
                    }
                }
            });
        }
    }

    //退出登录
    function userlogout(){//
        dptype = 'userlogout';//设置派发器类型
        var $ccontent = $(".contain-r-contet p");
        var $username = $ccontent.eq(0).text();
        var $useremail = $ccontent.eq(1).text();
        var $useraddress = $ccontent.eq(2).text();
        var userlogout = new FormData();
        userlogout.append('username',$username);
        userlogout.append('useremail',$useremail);
        userlogout.append('useraddress',$useraddress);
        userlogout.append('dptype',dptype);

        $.ajax({
            type:'POST',
            url:'user/user_dispatch.php',
            dataType:'json',
            data:userlogout,
            cache:false,
            processData:false,
            contentType:false,
            success:function(lmsg){
                if(lmsg.status==='0'){
                    userloginform();
                }else if(lmsg.status==='1'){
                    userloginform();
                }
            }
        })
    }
</script>
</body>
<script type="text/javascript" src="lib/js.js" ></script>
</html>
<?php
//验证用户登录cookie

if(isset($_COOKIE['username']) && isset($_COOKIE['useremail']) && isset($_COOKIE['useraddress'])){
    //把cookie里的值提取出来
    $username = $_COOKIE['username'];
    $useremail = $_COOKIE['useremail'];
    $useraddress = $_COOKIE['useraddress'];
    //控制是否显示登录页面还是展示用户信息
    echo "<script>userCookie('$username','$useremail','$useraddress');</script>";
}else{
    //控制是否显示登录页面还是展示用户信息
    echo "<script>userloginform();</script>";
}
?>

运行实例 »

点击 "运行实例" 按钮查看在线实例

css文件,放在 /css 目录下,文件名styles.css

实例

body{
    background-color:#f3f5f7;
    font-family: "微软雅黑";
    font-size:0.9rem;
    margin: 0;
    padding: 0;
    color:#333333;
}
a{  text-decoration:none; color: #333; }
a:hover{ text-decoration: underline}
button{cursor:pointer}
ul,li{
    margin:0; padding:0; list-style: none;
}

/*头部菜单  开始*/
#box-header{
    margin: 0 auto;
    width: 100%;
    height: 60px;
    background-color: black;
}
#header-nav{
    width: 1100px;
    color:#b3b3b3;
    margin: 0 auto;
    line-height: 60px;
}
#header-nav .active{ background-color: #333333}
#header-nav a{
    color:#b3b3b3;
}
#header-nav li{
    float: left;
}
#header-nav li{ min-width: 32px ; padding: 0 28px ; position:relative; cursor:pointer;}
#header-nav li a{position: relative; z-index: 3}
#header-nav li:hover a{ color:#333 }
#header-nav .s{
    display:block;
    width: 13px;
    height: 9px;
    position:absolute;
    z-index: 3;
    background-image: url("../images/tri.png");
    right:8px;
    top:27px;
    background-repeat: no-repeat;
}
#header-nav li .bgc{
    display:block;
    width:100%;
    height: 60px;
    position:absolute;
    background-color: #f1f7fc;
    right:0;
    top:-60px;
}
#header-nav li .dot-red{
    width: 8px;
    height:8px;
    border-radius:50%;
    position: absolute;
    right:14px;
    top: 22px;
    background-color: coral;
    z-index: 3;
}
#header-nav .header-nav-child{
    display: none;
    position:absolute;
    width: 230px;
    background-color: #f1f7fc;
    padding-bottom: 10px;
    left: 0;
    z-index: 15;
}
#header-nav .header-nav-child li{
    float: left;
    padding: 6px 10px 0 12px;
    line-height: 26px;
}
#header-nav .header-nav-child li a{
    color:#333;
}
#header-nav .header-nav-child li:hover {
    background-color: #e1e1e1;
}

/*头部菜单  结束*/

/*banner 开始*/
#box-banner{
    margin: 25px auto 0 auto;
    width: 1200px;
    height:510px;
    border-radius: 10px;
    box-shadow:0px 0px 18px #aaa }

/*banner行左则 开始*/
#banner-left{
    float: left;
    background-color: #2b333b;
    width: 215px;
    height: 510px ;
    border-top-left-radius: 10px;
    border-bottom-left-radius:10px;
    position: relative;
}

.banner-left-navlist{ margin: 15px 0 0 0; position:relative;}
.banner-left-navlist .banner-left-navname {
    height: 40px;
    padding: 10px 25px;
    box-sizing: padding-box;
    color:#b3b3b3;
    position:relative;
}
.banner-left-navlist .banner-left-navname:hover{ background-color:#6b7176; cursor:pointer}
.banner-left-navlist li a{
    color:#b3b3b3;
    font-size: 1rem;
    line-height: 40px;
}
.banner-left-navlist li span{
    color:#b3b3b3;
    font-family: "黑体";
    font-size:1.1rem;
    font-weight: bold;
    position:absolute;
    right: 30px;
    top:21px;
}

.banner-left-navlist .banner-left-navchild{
    position: absolute;
    top:-15px;
    display: none;
    right: -860px;
    padding: 30px;
    width: 800px;
    height: 400px;
    background-color: #fff;
    z-index: 3;
}
.banner-left-navlist .active{ display:block }
#banner-left .banner-left-navchild dl{ display: block; overflow:hidden }
#banner-left .banner-left-navchild dt{
    font-size: 0.8rem;
    font-weight: bold;
}
#banner-left .banner-left-navchild dd{
    float: left;
    line-height: 30px;
}
#banner-left .banner-left-navchild dd a{
    color:#666;
    font-size: 0.8rem;
}
#banner-left .banner-left-navchild dd a:hover{
   color: coral;
    text-decoration:underline;
}
/*banner行左则 结束*/

/*banner行右则 开始*/
#banner-right{
    float: right;
    width: 985px;
    background-color: #fff;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

#banner-right-top{
    height: 60px;
    width: 100%;
}
#banner-right-topul li{
    padding: 10px 22px;
    float: left;
    line-height: 40px;
    position: relative;
}
#banner-right-topul a:hover{ color: coral}
#banner-right-topul .new{
    display: block;
    border-radius:3px;
    width:20px;
    height:18px;
    position: absolute;
    right: 0;
    top:21px;
    font-size:0.7rem;
    line-height: 16px;
    text-align:center;
    color: #fff;
}
#banner-right-topul .newbgO{ background-color:#ff5722 }
#banner-right-topul .newbgB{ background-color:#2f4056 }
#banner-right-topul .newbgY{ background-color:#ffb800 }
#banner-right-topul li:last-of-type{ padding: 13px 0}
#banner-right-topul #banner-right-topS{
    height: 34px;width:255px; line-height: 34px; border-radius:4px; background-color: #f1f0f0
}
#banner-right-topul #search_Btop{
    outline:0;
    width: 220px;
    border: 0;
    padding-left: 5px;
    font-size: 0.8rem;
    background-color: #f1f0f0
}
.warnning{
    color:red;
}
#banner-right-topul #search_btn{
    cursor: pointer;
    outline: 0;
    position: absolute;
    width: 28px;
    height: 28px;
    border: 0;
    top:17px;
    background: url("../images/search_btn1.png") no-repeat;
}

/*轮播器 开始*/
#carousel{ position: relative; overflow: hidden; width: 985px; height: 330px;}
#carousel>div{ position:absolute;top:0 ; left: -985px}
#carousel-div{
    background:url("../images/carouselbg.jpg") no-repeat;
    background-size: 635px 330px;
    width: 985px;
    height: 330px;
}
#carousel-div-l{
    width: 635px;
    height: 330px;
    background-color:rgba(0, 0,0, 0.80);
    float:left;
}
#carousel-h2{
    padding: 20px;
    margin:0 auto;
    text-align: center;
}
#carousel-h2 h2{
    color:#fff;
}
#carousel-time{
    width: 290px;
    height: 40px;
    margin: 0 auto;
    border-radius:20px;
    background-color: #000;
}
#carousel-time #timeHTML{
    font-size:18px;
    font-family: "微软雅黑";
    font-weight: 400;
    text-align: center;
    color: #fff;
    line-height: 40px;

}
#carousel-time #timeHTML .timetext{  color:#0cb1ee; font-weight: 600}
#carousel-btn{
    width: 180px;
    height: 50px;
    background-color: #ff5722;
    margin: 20px auto;
    border-radius:4px;
    text-align: center;
    line-height: 50px;
    color:#fff;
}
#carousel-btn:hover{ cursor: pointer; background-color:#ffb800 }
#carousel-div-bottom{
    margin-top: 50px;
    height:60px;
    width: 100% ;
    background-color: #111;
    text-align: center;
    line-height: 60px;
    font-size: 1.2rem;
    color: #ccc
}

#carousel-div-r{
    width: 350px;
    height: 330px;
    background-color:#f4f4f4;
    float: right;
    box-shadow:inset 4px 0 4px #aaa;
}
#carousel-div-r .carousel-div-rc{

    width: 340px;
    margin: 0 auto;

}
#carousel-div-r .carousel-div-rc #rc-title{
    line-height: 30px;
    padding: 15px 0 5px;
    text-align: center;
    color:#222;
}
#carousel-div-r .carousel-div-rc #rc-title{
    font-size: 18px;
}
#carousel-div-r .carousel-div-rc #rc-content a{
    line-height: 43px;
    font-size: 16px;
    display: block;
    overflow: hidden;
    padding: 0 10px;
    border-left: 4px solid #f4f4f4;

}
#carousel-div-r .carousel-div-rc #rc-content a:hover{
   background-color:#fff;
    cursor: pointer;
    text-decoration: none;
    border-left: 4px solid #05b5f6;
}
#carousel-div-r .carousel-div-rc #rc-content .icon{
    background:url("../images/dot.png") no-repeat;
    display: inline-block;
    width: 12px;
    height: 11px;
    padding-right: 10px;
}
/*#carousel-div-r .carousel-div-rc li:before{*/
    /*content: url("../images/dot.png");*/
    /*color:gray;*/
    /*position:relative;*/
    /*left:-8px;*/
    /*bottom:-1px;*/
/*}*/
#carousel-div-r .carousel-div-rc #rc-content span{
    color: #999;
    display: inline-block;
    padding-right: 8px;
}

#carousel>div{left: -985px}
#carousel .active{ left: 0 }
#carousel .kips{
    display: block;
    width: 35px;
    height: 35px;
    border-radius:50%;
    background-color:rgba(125,125,125,0.50);
    top:50%;
    margin-top:-20px;
    position: absolute;
    font-family: "黑体";
    font-size: 22px;
    text-align:center;
    line-height: 35px;
    font-weight: 600;
    color:#ccc;
    cursor:pointer;
}

#carousel #carousel-dot li{
    position:absolute;
    bottom:30px;
    left: 50%;
    padding: 5px;
    min-width: 20px;
    border-radius: 10px;
    height: 10px;
    background-color:rgba(100,100,100,0.60);
}
#carousel #carousel-dot li span{
    width: 10px;
    height: 10px;
    display: block;
    float: left;
    background-color:rgba(160,160,160,0.90);
    margin: 0 5px ;
    border-radius:50%;
    cursor:pointer;
}
#carousel #carousel-dot .active{ background-color:#fff }
#carousel .kips:hover{ background-color:rgba(125,125,125,0.80)}
#carousel .next{ right: 15px }
#carousel .prev{ left: 15px}
/*轮播器 结束*/
/*banner右侧底部广告*/
#banner-right-bottom{ padding-top:15px  }
#banner-right-bottom li{ padding: 0 5px 11px 5px; float:left;}
#banner-right-bottom li img{ border-radius:6px;}
/*banner行右则 结束*/
/*banner 结束*/

/*中间广告栏 开始*/
.poster{ margin: 20px auto; width: 1200px; }
.poster img{ border-radius: 10px }
/*中间广告栏 结束*/

/*内容开始*/
#main{ width: 1200px; margin: 0 auto;}

#contain1{ width: 1200px; height: 330px; margin: 0 auto; position: relative; }
/*内容块1 开始 使用双飞翼布局*/
.contain-fc{
    width: 620px;
    margin: 0 auto;
    position:absolute;
    left: 310px;
    background-color:#fff;
    border-radius:12px;

}
.contain-fc-tablist .contain-fc-tabnav {overflow: hidden}
.contain-fc-tablist{
    border-bottom:1px dashed #e1e1e1;
    height: 44px;
}
.contain-fc-tablist .contain-fc-tabnav li{
    float: left;
    padding-top: 15px;
    margin-right: 18px;
    margin-left: 18px;
    padding-bottom: 10px;
}
.contain-fc .show{ display: block }
.contain-fc-tablist .contain-fc-tabnav .active{ border-bottom:1px solid red}
.contain-fc-tablist .contain-fc-tabnav li a:hover{ color:red; text-decoration:none }
.contain-fc-tabcontent{ padding: 10px 5px ; display: none }

.contain-fc-tabcontent li{ padding: 5px }
.contain-fc-tabcontent .channel{
    display:inline-block ;
    border-right:1px solid #b1b1b1;
    padding-right: 10px;
    width: 80px;
    text-align: right;
}
.contain-fc-tabcontent .channel a{ color:#b1b1b1 }
.contain-fc-tabcontent .c-text { padding: 0 5px }
.contain-fc-tabcontent .c-date{ color: red; float: right }

.contain-l{
    width: 300px;
    margin: 0 auto;
    position:absolute;
    left:0;
    background-color:#fff;
    border-radius:12px;
}
.contain-l .contain-l-title{
    border-bottom:1px dashed #e1e1e1;
    height: 44px;
}
.contain-l .contain-l-title li{
    padding-top: 15px;
    margin-right: 18px;
    margin-left: 18px;
    padding-bottom: 10px;
    font-weight: bold
}
.contain-l .contain-l-contet{
    float: left;
    padding-top: 10px;
    margin-right: 18px;
    margin-left: 18px;
    padding-bottom: 10px;
}
.contain-l .contain-l-contet li{padding: 5px }

.contain-r{
    width: 260px;
    margin: 0 auto;
    height: 326px;
    position:absolute;
    right:0;
    background-color:#fff;
    border-radius:12px;
}
.contain-r .contain-r-title{
    border-bottom:1px dashed #e1e1e1;
    height: 44px;
}
.contain-r .contain-r-title li{
    padding-top: 15px;
    margin-right: 18px;
    margin-left: 18px;
    padding-bottom: 10px;
    font-weight: bold
}
.contain-r .contain-r-contet{
    float: left;
    padding-top: 10px;
    margin-right: 18px;
    margin-left: 18px;
    padding-bottom: 10px;
}
.contain-r .contain-r-contet li{padding: 5px }
.contain-r #login-btn{ cursor:pointer }
.contain-r #register{ display:inline-block; padding: 0 25px; }
.contain-r #register a{ color: #ff5722}
.contain-r  #tips { margin:35px 0 24px ; line-height: 24px; background-color: #eee; border: 1px solid #ccc }
.adduserSuc{
    padding: 30px;
    line-height: 35px;
}

/*内容块1 结束*/

/*内容块2 开始*/
#contain2{ width: 1200px; margin: 0 auto; position: relative; overflow: hidden }
#contain2 #learn li{
    width: 217px;
    height: 172px;
    float:left ;
    overflow: hidden;
    margin: 10px;
    position:relative;
    box-shadow:2px 2px 6px #d9d9d1;
    border-radius: 10px;
    cursor:pointer;
    background-color:#e1e1e1;
}
#contain2 #learn li:nth-of-type(1){width: 217px; height: 364px}
#contain2 #learn li:nth-of-type(15){width: 217px; height: 364px}
#contain2 #learn img{ border-radius: 10px; width: auto; height:auto; max-width:100%; max-height:100% }
#contain2 #learn .learn-title{
    width: 100%;
    height: 110px;
    box-sizing: border-box;
    background-color: #fff;
    position: absolute;
    bottom:-30px;
    border-radius: 10px;
    padding: 15px;
}
#contain2 #learn .learn-title i{
    display: inline-block;
    padding: 0 1px 1px 1px;
    height: 14px;
    line-height: 14px;
    background-color: #666666;
    font-style:normal;
    font-size: 0.7rem;
    color: #fff;
    margin-right: 10px;
}
#contain2 #learn .learn-playtimes{
    width: 100%;
    height: 45px;
    background-color: #fff;
    position: absolute;
    bottom:0;
    border-radius: 10px;
    font-size: 0.75rem;
    color:#a9a9a9;
    padding: 12px 15px;
    box-sizing: border-box;
}
/*内容块2 结束*/

/*注册弹出窗样式 开始*/
.bShade{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color:rgba(0,0,0,0.8);
    z-index: 150;
}
.regisgerDivborder{
    width:500px;
    height: 600px;
    position:absolute;
    background-color:rgba(200,200,200,0.3);
    z-index: 151;
    top:50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -250px;
    padding: 10px;
    box-sizing: border-box;
}
.regisgerDiv{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position:relative;
    border: 1px solid #666;
    box-sizing:border-box;
}
.regisgerDiv .close{
    width: 13px;
    height: 13px;
    background-color: #ddefff;
    position:absolute;
    top: 5px;
    right: 5px;
    z-index: 152;
    font-size: 10px;
    line-height: 12px;
    display: block;
    text-align: center;
    cursor:pointer;
}
.regisgerDiv .close:hover{
    background-color: #1e50a2;
    color: #fff;
    cursor:pointer;
}
#register:hover{
    cursor:pointer;
    color:#EE5757;
}
/*注册弹出窗样式 结束*/

/*文章列表*/
/*文章列表头部*/
#arc-list-header{
    height: 60px;
    background-color: #0C0C0C;
}
#arc-list-header .arc-list-nav{
    width: 1200px;
    margin: 0 auto;
}
#arc-list-header .arc-list-nav li{
    padding:0 10px;
    line-height: 60px;
    color:#afafaf;
    float: left;
}
#arc-list-header .arc-list-nav li a{
    color:#afafaf;
}
#arc-list-header .arc-list-nav li a:hover{
    color:#cfcfcf;
}
/*文章列表主内容*/
#arc-list-main{
    width: 1200px;
    margin: 40px auto 20px auto;
    position: relative;
    overflow: hidden;
    clear: both
}
#arc-list-main .list-main-left{
    width: 800px;
    background-color: #fff;
    padding-bottom:20px;
    float: left;
    border-top:2px solid #dCdCdC;
    min-height:800px;
}

#arc-list-main .location-nav{
    padding: 20px ;
    border-bottom: 1px solid #efefef;

}
#arc-list-main .location-nav a:hover{
    color: #d43f3a;
}
.list-author{ color:#1E9FFF}
#arc-list-main .list-content{ padding: 20px}
#arc-list-main .list-content li{ padding-bottom: 20px; border-bottom: 1px solid #efefef}
#arc-list-main .list-content li p{ color: #777}
#arc-list-main .list-page-nav{
    float:left;
}
.list-opertion {padding: 15px}
.list-opertion ul {margin-left: 15px}
.list-opertion li { float: left; margin: 0 5px; }
.list-page-nav li:hover { color: #d43f3a; cursor: pointer}
.list-page-total{ float: left}
.list-page-do1{ float: left }
.list-panenum{float: left}
.list-panenum li{
    float: left;
    border: 1px solid #efefef;
    padding: 0 4px;
    margin: 0 5px;
}
.list-panenum .pagecur{ background-color: #1E9FFF}
.list-panenum li:hover{ cursor: pointer; background-color:#b3d6f9}
.list-page-do2{float: left}
#list-page-sel{ width: 24px; margin-right: 5px}
#list-pagebtn{
    margin: 0 5px;
    border: 1px solid #efefef;
    background-color: #b7d9fc;
    padding: 0 2px;
}
#list-pagebtn:hover{ cursor: pointer; background-color: #a8d0f9 }
.list-main-right{
    width: 380px;
    background-color: #fff;
    float: right;
    position:absolute;
    right: 0;
    border-top: 2px solid #dcdcdc;
}
.list-main-right .channel-title{
    padding: 10px;
    line-height: 38px;
    border-bottom: 1px solid #efefef;
    font-size: 16px;
    font-weight: bold;
}
.list-main-right .channel-title a{
    color:#1E9FFF ;
}
.list-main-right .main-right-list{
    padding: 15px;
    border-bottom: 1px solid #efefef;
}
.list-main-right .main-right-list li{
    line-height: 28px;
}


/*网站底部*/
#arc-lis-footer{
    margin-top: 40px;
    background-color: #000;


}
#arc-lis-footer ul{
    width: 1200px;
    margin: 0 auto;
    color: #a1a1a1;
    line-height:60px;
    height: 60px;
    text-align: center;
}
/*内容页样式*/
.arc-content .title{
    display: block;
    line-height: 40px;
    font-size: 24px;
    padding: 0 30px;
}
.arc-content .textcontent{
    padding: 10px 30px;
    line-height: 30px;
    text-indent: 2em;
}
.arc-content .text-author{
    display:block;
    padding: 10px 30px;
    color: #1E9FFF;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

后台样式, 放在/css 目录下,文件名loginstyle.css

 

实例

html,body{height: 100%}
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,
legend,input,textarea,select{margin:0;padding:0}

body{font:13px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
button{ cursor: pointer }


/*头部样式 开始*/
#PHPDS-login{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#header-login{
    padding: 0 20px;
    background: -webkit-linear-gradient(to right,#3c86c5 50%, #88caff 100%); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(to right,#3c86c5 50%, #88caff 100%); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(to right,#3c86c5 50%, #88caff 100%); /* Firefox 3.6-15 */
    background: linear-gradient(to right,#3c86c5 50%, #88caff 100%);
    overflow: hidden;
}
#header-login ul{
    float: left;
}
#header-login ul li{
    float: left;
    padding: 12px;
}
#header-login ul li a{
    color:#fff;
    text-decoration: none;
}
#header-login ul li a:hover{
    color:#fff;
    text-decoration: underline;
}
#header-login .header-ul-right{
    float:right; background:url("../images/dot_nav.png") no-repeat top right ;
}
#header-login .header-ul-right li{
    color:#ffff00;
}
#header-login .header-ul-left{
    float:left;
    color:#00FFFF;
}
#header-login .header-ul-left span{
    color:#ffff00;
}
.color-sel{ background-color: #000 ; height: 20px}

/*头部样式 结束*/
/*主界面 开始*/
.main-login{
    height: 100%;


}
/*主界面 左边*/
.main-login-left{
    width: 18%;
    float: left;
    background-color: #f7f7f7;
    box-sizing: border-box;
    height: 90%;
}

.main-login-left .nav{ width: 200px; margin:20px auto}
.main-login-left .nav { position:relative }
.main-login-left .nav .tab-nav{
    cursor: pointer;
    display: block;
    width: 18px;
    height: 34px;
    border: 1px solid #aaa;
    border-right: 0;
    text-align: center;
    padding: 2px;
    font-weight: bold;
    background-color: #fff;
    background: -webkit-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Firefox 3.6-15 */
    background: linear-gradient(to bottom,#fff 50%,#eee 100%);
}
.main-login-left .nav .active{
    background-color: #c4dcfe;
    background: -webkit-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Firefox 3.6-15 */
    background: linear-gradient(to bottom,#fff 50%,#b8d5ff 100%);

}
.main-login-left .nav .tab-nav-list{
    position: absolute;
    left: 23px;
    top: -20px;
    border: 1px solid #aaa;
    border-top: 0;
    padding: 15px;
    background-color:#fff;
    min-height:300px;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    display: none;
}
.main-login-left .nav .tab-nav-list ul{
    margin-top: 2px;
}
.main-login-left .tab-nav-list .channel-title{ position:relative }
.main-login-left .tab-nav-list .channel-m{
    cursor: pointer;
    border: 1px solid #cfcfcf;
    padding: 4px 40px;
    line-height: 24px;
    border-radius:2px;
    background: -webkit-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(to bottom,#fff 50%,#eee 100%); /* Firefox 3.6-15 */
    background: linear-gradient(to bottom,#fff 50%,#eee 100%);
    font-weight: bold;

}
.main-login-left .tab-nav-list .channel-m-c li{
    padding: 8px 10px 0 10px;
    cursor: pointer;

}
.main-login-left .tab-nav-list .channel-m-c li:hover{
     color:red;

}
.main-login-left .tab-nav-list .channel-m-c .icon{
    width: 12px;
    height: 12px;
    background-image: url("../images/dot_tab.png");
    display: inline-block;
}
.main-login-left .tab-nav-list .icon-nav{
    display:inline-block;
    width: 12px;
    height: 12px;
    background-image: url("../images/dot-chan.png");
    background-position: 0 -21px;
    position:absolute;
    top:6px;
    left: 20px;
    cursor: pointer;

}
.main-login-left .tab-nav-list .list{ background-position: 0px -3px}
.main-login-left .tab-nav-list .channel-m-c{
    display: none;
}
.main-login-left .nav ul{
    margin: 8px 0;
}
.main-login-left .nav .show{
    display: block;
}
/*主界面左边 结束*/
/*主界面右边 开始*/
.main-login-right{
    width: 81%;
    box-sizing: border-box;
    float: right;
    height: 88%;
    padding: 20px;

    overflow: auto;
}
.main-login-right .main-welcome{ color: #d43f3a }
/*主界面右边 结束*/


/*主界面 结束*/

/*添加文章,频道,管理员页样式 开始*/
.addariticle-main{
    color:#222;
    padding: 20px;
    font:1.1em Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
}

.title-fil {
    border-color:rgba(233,233,233,0.5);
    border-width:1px 0 0;
}
.addariticle-main fieldset {
    display: block;
    padding: 10px 18px ;
    border-image: initial;

}
.addariticle-main legend {
    display: block;
    font-size: 1.3em;
    padding:0 12px;

}
.aa-form-item{
    float: left;
    padding: 6px 10px 6px 15px;
    text-align: right;
    width: 80px;
}
.aa-input-block{
    margin-bottom:20px;
    clear:both;
    line-height: 24px;
    overflow: hidden;
}
.aa-input-item {
    position: relative;
    margin-left: 110px;
}
.aa-input-item .aa-input{
    height: 36px;
    width: 100%;
    border: 1px solid #e1e1e1;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 2px;
}
.aa-input-item .sel-channel{
    height: 36px;
    border: 1px solid #e1e1e1;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 2px;
}
.aa-input-block .showwan::after{
    content: '请选择所属栏目,如没有栏目请先创建';
    color: red;
}
.aa-input-block .aa-inline{
    float: left;
    width: 300px;
    box-sizing: border-box;
}
.aa-input-item .sel-w{
    height: 36px;
    padding: 0 10px;
    display: block;
    box-sizing: border-box;
    position:absolute;
    left: 120px;
    line-height: 36px;
    top:0;
}
.aa-form{
    font:1em Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
    border-color:rgba(233,233,233,0.5);
}
.aa-input-item .aa-textarea{
    border: 1px solid #e1e1e1;
    width: 100%;
    min-height: 300px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 2px;
}
/*添加文章页样式 结束*/

/*文档列表样式*/
.arc-box .table{
    width: 100%;
    line-height: 30px;
}
.arc-box .table caption h2{
    line-height: 40px;
    font-size: 18px;
}
.arc-box .table th{
    background-color:#0cb1ee;
    color: #fff;
}
.arc-box .table th,td{
    border:1px solid #dfdfdf;
    border-collapse: collapse;
    text-align: center;
}

.arc-box .table tr:nth-of-type(even){
    background-color: #f9f9f9;
}
.arc-box .table .active{
    background-color:#caeefa !important;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议