![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：辛苦了, 写得真不赖, 差不多可以做点小项目了
Collection
Collection
本次作业综合了老师所交的，选项卡，轮播图，懒加载，分页技术，cookie,session技术，因文件有一些多，仅贴前台部份。
作业最终效果：http://www.glce.cn/test/test/test/1.php
后台网址：http://www.glce.cn/test/test/test/login/index.php
后台帐户:admin
密码：admin
网页中此处是动态数据，别的都是静态形式。
以下是首页代码
<?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;
}点击 "运行实例" 按钮查看在线实例