一、技术要求
1、站点目录层次分明，不能将内容都放在站点根目录下；不能使用中文；为每种类型文件都建立一个独立的目录。（例如images文件夹用于存放图像,目录的层次不能没有，但尽量少，以便于管理 ）；
2、要求网站有10个以上页面，包括2个以上功能模块（如会员管理、论坛管理等）；
3、网站主题要明确、内容完整、结构规范。要求选取内容健康，具有时代气息。网站提供的信息应与网站主题相符合；
4、每个页面都要求有导航条和页脚信息，使用外部CSS统一网站页面的样式，主页命名必须为index.html；
5、网站使用DIV+CSS布局，网页中有文字、图像、多媒体、超链接、表单等，网站达到图文并茂的效果。网站要有自己制作的logo（如果是下载图片请自己处理后使用，不可以直接使用商业网站logo）；
6、要求使用一定量的JavaScript脚本，使得网页具有一定的交互功能；
7、要求首页和子页之间能够相互跳转。页面中不允许有链接错误，图片不显示错误；
8、主页中包含一个会员注册和登录的链接，点击注册后打开一个用户注册的页面，注册信息至少包含用户名、密码、确认密码、email、生日、用户所在地。生日使用日期控件实现，可由用户自己选择；表单提交时使用JavaScript进行前台验证，用户名、密码不能为空，且密码和确认密码必须相同，否则不能提交。点击登录后，可以使用已经注册的用户名和密码进行会员登录，登录成功与否给与提示；
9、使用PHP或者JSP进行动态网页制作部分，实现数据库连接，用户数据与浏览数据的增删改查任务。
二、注册
1、注册的效果图
2、注册的.xml
<!DOCTYPE html>
<html lang="en">3
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript">
function check() {
if (document.myform.uname.value== "") {
window.alert("用户名不能为空！");
document.myform.uname.focus();
return false;
}
if (document.myform.psw.value=="")
{
window.alert("密码不能为空!");
document.myform.psw.focus();
return false;
}
}
</script>
</head>
<body>
<form action="tijiao.php" method="post" name="myform" οnsubmit="return check();">
昵称：<input type="text" name="uname" size="20"><br>
密码：<input type="password" name="psw" size="20"><br>
邮箱：<input type="email" name="ymail" size="20"><br>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女<br>
生日：<input type="date" name="birth" ><br>
<input type="submit" value="注册">
</form>
</body>
</html>
3、注册的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
4、注册的.js
//验证用户名
//
var a=0;
function check_userName() {
var userName = document.getElementById("name").value;
var regName = /[a-zA-Z]\w{4,16}/
if (userName == "" || userName.trim() == "") {
document.getElementById("err_name").innerHTML = "请输入用户名";
a=0;
} else if (!regName.test(userName)) {
document.getElementById("err_name").innerHTML = "用户名格式错误"
a=1;
} else {
document.getElementById("err_name").innerHTML = "ok!!!";
a=0;
}
}
//验证昵称
function check_nickName() {
var nickName = document.getElementById("nick").value;
var regName = /[\u4e00-\u9fa5]{2,6}/
if (nickName == "" || nickName.trim() == "") {
document.getElementById("err_nick").innerHTML = "请输入姓名";
a=0;
} else if (!regName.test(nickName)) {
document.getElementById("err_nick").innerHTML = "由2-4个汉字组成";
a=0;
} else {
document.getElementById("err_nick").innerHTML = "ok!!!";
a=1;
}
}
//验证邮箱
function check_email() {
var email = document.getElementById("email").value;
var regEmail = /^\w+@\w+((\.\w+)+)$/;
if (email == "" || email.trim() == "") {
document.getElementById("err_email").innerHTML = "请输入邮箱";
a= 0;
} else if (!regEmail.test(email)) {
document.getElementById("err_email").innerHTML = "1邮箱账号@域名。如good@tom.com、whj@sina.com.cn";
a= 0;
} else {
document.getElementById("err_email").innerHTML = "ok!!!";
a= 1;
}
}
//验证密码
function check_pwd() {
var pwd = document.getElementById("pwd").value;
var regPwd = /^\w{4,10}$/;
if (pwd == "" || pwd.trim() == "") {
document.getElementById("err_pwd").innerHTML = "请输入密码";
a= 0;
} else if (!regPwd.test(pwd)) {
document.getElementById("err_pwd").innerHTML = "格式错误";
a= 0;
} else {
document.getElementById("err_pwd").innerHTML = "ok!!!";
a= 1;
}
}
//确认密码
function check_pwd2() {
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
if (pwd2 == "" || pwd2.trim() == "") {
document.getElementById("err_pwd2").innerHTML = "请输入密码";
a=0;
} else if (pwd!=pwd2) {
document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致";
a=0;
} else {
document.getElementById("err_pwd2").innerHTML = "ok!!!";
a=1;
}
}
//验证时间
function check_date() {
var birthday = document.getElementById("birthday").value;
/* var regDate = /[13,15,18]\d{9}/;*/
var regDate =/^(\d{4})-(\d{2})-(\d{2})$/
if (birthday == "" || birthday.trim() == "") {
document.getElementById("err_date").innerHTML = "请输入日期";
a=0;
} else if (!regDate.test(birthday)) {
document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间";
a=0;
} else {
document.getElementById("err_date").innerHTML = "ok!!!";
a=1;
}
}
function sure()
{
if (a==1)
alert("恭喜你注册成功！！！赶快登陆一下吧！");
else alert("你输入的信息有误！！！请重新输入");
}
三、登录
1、登录的效果图
2、登录的.xml
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" type="text/css" href="css/登录.css">
<script type="text/javascript" src="javascript/登录.js">
</script>
<script type="text/javascript" src="javascript/时间.js">
</script>
</head>
<body >
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>会员登录</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="登录.html">登录</a>
<a href="注册.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div>
<!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
<a href="会员管理.html" class="amenu">会员管理</a> 
</div>
<div style="background: url(image/029.gif);height: 500px;">
<div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 65% ";>
<center>
<form>
<table width="50%" align="center">
<tr>
<td colspan="2"><font color="blue" size="6"><center>登录</center>
</font></td></tr>
<br><br><br><br>
<tr>
<td>用户名:</td>
<td><input type="text" name="1"
id="name" placeholder="英文和数字，英文开头4~16字符"
οnblur="check_userName()" >
</td></tr>
<tr>
<td> </td>
<td> <span id="err_name"></span></td></tr>
<tr>
<td>密码:</td>
<td><input type="password" name="2"
id="pwd" placeholder="英文和数字，英文开头4~10字符"
οnblur="check_pwd()"value="" />
</td>
</tr>
<tr>
<td> </td>
<td> <span id="err_pwd"></span></td></tr>
<tr>
<td><input type="submit" width="100"
οnclick="sure()" value="登录" name="submit" border="0">
</td>
</tr>
</table></form></center></div>
</div>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
<?php
session_start();
if (isset($_SESSION['user'])) {
echo '当前登录用户：' . $_SESSION['user'] . '。'; // 用户已登录
echo '<a href="logout.php">退出<a>';
} else {
header('Location: login.html'); // 用户未登录，跳转到登录页面
exit;
}
?>
</body>
</html>
3、登录的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
4、登录的.js
//验证用户名
//
var a=0;
function check_userName() {
var userName = document.getElementById("name").value;
var regName = /[a-zA-Z]\w{4,16}/
if (userName == "" || userName.trim() == "") {
document.getElementById("err_name").innerHTML = "请输入用户名";
a=0;
} else if (!regName.test(userName)) {
document.getElementById("err_name").innerHTML = "用户名格式错误"
a=1;
} else {
document.getElementById("err_name").innerHTML = "ok!!!";
a=0;
}
}
//验证昵称
function check_nickName() {
var nickName = document.getElementById("nick").value;
var regName = /[\u4e00-\u9fa5]{2,6}/
if (nickName == "" || nickName.trim() == "") {
document.getElementById("err_nick").innerHTML = "请输入姓名";
a=0;
} else if (!regName.test(nickName)) {
document.getElementById("err_nick").innerHTML = "由2-4个汉字组成";
a=0;
} else {
document.getElementById("err_nick").innerHTML = "ok!!!";
a=1;
}
}
//验证密码
function check_pwd() {
var pwd = document.getElementById("pwd").value;
var regPwd = /^\w{4,10}$/;
if (pwd == "" || pwd.trim() == "") {
document.getElementById("err_pwd").innerHTML = "请输入密码";
a= 0;
} else if (!regPwd.test(pwd)) {
document.getElementById("err_pwd").innerHTML = "格式错误";
a= 0;
} else {
document.getElementById("err_pwd").innerHTML = "ok!!!";
a= 1;
}
}
//确认密码
function check_pwd2() {
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
if (pwd2 == "" || pwd2.trim() == "") {
document.getElementById("err_pwd2").innerHTML = "请输入密码";
a=0;
} else if (pwd!=pwd2) {
document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致";
a=0;
} else {
document.getElementById("err_pwd2").innerHTML = "ok!!!";
a=1;
}
}
function sure()
{
if (a==1)
alert("恭喜你登录成功！！！！");
else alert("你输入的信息有误！！！请重新输入");
}
四、子页面之诚信
超链接；诚信
1、诚信的效果图
2、诚信的.xml
<!DOCTYPE html>
<html>
<head>
<title>诚信</title>
<link rel="stylesheet" type="text/css" href="css/诚信.css">
<script type="text/javascript" src="javascript/时间.js ">
</script>
</head>
<body >
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>诚信</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="登录.html">登录</a>
<a href="注册.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div>
<!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
<a href="会员管理.html" class="amenu">会员管理</a> 
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<div class="f"><center>诚信百科<br></center></div><div class="h">
诚信: <br> "诚"字首见于《尚书》。但作为实词使用，却最早见于《左传》:"明允笃诚"，疏云:"诚者，实也。"又见于《易·文言》:"闲邪存其诚"，"修辞立其诚"，疏云:"诚谓诚实。"又见于《礼记·乐记》:"著诚云伪"，疏云:"诚谓诚信也。"基本上，"诚"具备四个层面上的含义:首先，指说话符合实际，言语真实不欺;其次，与"伪"相对，即是指真实;第三，诚者成也，成就、完成之意;最后，恭敬、审慎的态度，如 《礼记·大学》:"欲正其心者，先诚其意
<br>内容简介:<br> 在一般意义上，"诚"即诚实诚恳，主要指主体真诚的内在道德品质;"信"即信用信任，主要指主体"内诚"的外化。"诚"更多地指"内诚于心"，"信"则侧重于"外信于人"。"诚"与"信"一组合，就形成了一个内外兼备，具有丰富内涵的词汇，其基本含义是指诚实无欺，讲求信用。作者认为，千百年来，诚信被中华民族视为自身的行为规范和道德修养，形成了其独具特色并具有丰富内涵的诚信观。这样的诚信观在当今的市场经济和构建社会主义核心价值体系中具有极其重要的道德作用。
<br>作者简介:<br> 韩震，山东省阳谷县人，哲学博士，教授，博士生导师，北京外国语大学党委书记。曾任北京师范大学副校长、北京外国语大学校长。主要社会兼职有:马克思主义理论研究和建设工程咨询委员会委员，教育部高等学校教学指导委员会哲学类专业教学指导委员会主任委员，北京市哲学学会副会长等。曾入选北京市"跨世纪青年理论工作者百人工程"培养计划、教育部"跨世纪人才"培养计划、人事部等部委首批"新世纪百千万国家级人才"、中宣部"四个一批"人才培养人选、中组部"哲学社会科学领军人才"。主要研究方向为近现代欧美哲学、西方历史哲学、价值哲学。先后主持多项国家和省部级重大攻关项目，多次获得国家级和省部级人文社会科学优秀成果奖。
<br>图书目录:<br> Chapter 1 The Origin of Chengxin(Integrity)<br> Section One Cheng,a Selfreferring Imperative</div>
<div class="e">
<div class="f"><center>诚信格言<br></center></div>
<br>
修辞立其诚。--《周易"乾"文言》言语应该建立在诚信的基础上<br>
<br><a href="https://baike.so.com/doc/1253664-1325864.html">
不精不诚，不能动人。--《庄子"鱼父》<br></a>
<br>失信不立。--《左传"襄公二十二年》<br>
<br>
轻诺必寡信。--《老子》第63章 轻易向别人承诺的人一定很少讲信用。<br>
<br><a href="https://baike.so.com/doc/575170-608930.html">
吾日三省吾身:为人谋而不忠乎?与朋友交而不信乎?传不习乎?--《论语"学而》<br></a>
<br><a href="https://baike.so.com/doc/3382816-3561131.html">
与朋友交，言而有信。--《论语"学而》<br></a>
<br><a href="https://baike.so.com/doc/4323966-4528467.html?from=2887714&redirect=merge">
人而无信，不知其可也。 --《论语"为政》可:可以立身处世。<br></a>
<br><a href="https://baike.so.com/doc/562804-595793.html">
民无信不立。--《论语"颜渊》<br></a>
<br><a href="https://baike.so.com/doc/2631313-2778423.html">
言必信，行必果。--《论语"子路》果:果断<br></a>
<br>一诺千金。--《史记"季布栾布列传》<br>
</font></div>
<div class="g">
<img src="image/030.gif"><img src="image/031.gif"><img src="image/032.gif">
</div>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
</body>
</html>
3、诚信的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.e{background-image: url("../image/028.gif");background-size: cover;font-style: "楷体";font-size: 27px;color: red;}
.f{background-image: url("../image/029.gif");background-size: cover;font-style: "楷体";font-size: 34px;color: black;}
.g{background-image: url("../image/027.gif");background-size: cover;}
.h{background-size: cover;font-style: "楷体";font-size: 27px;color:black;}
四、子页面之持节
持节的超链接；持节
1、持节的效果图
2、持节的.xml
<!DOCTYPE html>
<html>
<head>
<title>持节</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/持节.css">
<script type="text/javascript" src="javascript/时间.js ">
</script>
</head>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>持节</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div>
<!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<center>
<div class="e">
<h2>持节格言</h2>
</div>
<div class="ed">
<ol type="A" start="3">
<li>岁寒，然后知松柏之后凋也。--《论语·子罕》</li><br>
<li>穷则独善其身，达则兼善天下。--《孟子"尽心上》</li><br>
<li>志士仁人，无求生以害仁，有杀身以成仁。 --《论语"卫灵公》</li><br>
<li>不为穷变节，不为贱易志。--桓宽《盐铁论"地广》</li><br>
<li>宁可玉碎，不能瓦全。--《北齐书"元景安列</li><br>
<li>千磨万击还坚劲，任尔东南西北风。--郑燮(xiè)《题画"竹石》</li><br>
<li>咬定青山不放松，立根原在破岩中。</li><br>
<li>粉身碎骨浑不怕，留得清白在人间。--于谦《石灰吟》</li><br>
<li>名节重泰山，利欲轻鸿毛。--于谦《无题》</li><br>
<li>时穷节乃见，一一垂丹青。--文天祥《正气歌》</li><br>
<li>出淤泥而不染，濯清涟而不妖。--周敦颐《爱莲说》</li><br>
<li>疾风知劲草，板荡识诚臣。--李世民《赐萧瑀》</li><br>
<li>宁可玉碎，不能瓦全。--《北齐书"元景安列传》</li><br>
<li>不降其志，不辱其身。--《论语"微子》</li><br>
<li>三军可夺帅也，匹夫不可夺志也。--《论语·子罕》</li><br>
<li>富贵不能淫，贫贱不能移，威武不能屈。--《孟子"滕文公下》</li><br>
<li></li></ol><br></center>
</div>
<!-- 第二部分-->
<center>
<div class="d">
<h2>持节小故事</h2></center>
</div>
<div class="cd">
<img src="image/匹夫不可夺志.jpg"> <img src="image/富贵不能淫.jpg"> <img src="image/人固有一死.jpg"><br>
<a href="https://baike.so.com/doc/6604602-6818389.html">
匹夫不可夺志</a> <a href="https://baike.so.com/doc/5343764-5579207.html">富贵不能淫</a> <a href="https://baike.so.com/doc/5356425-5591922.html">人固有一死</a><br>
<img src="image/宁可玉碎,不能瓦全.jpg"> <img src="image/疾风知劲草.jpg"> <img src="image/出淤泥而不染.jpg"><br>
<a href="https://baike.so.com/doc/576363-610177.html">宁可玉碎,不能瓦全</a> <a href="https://baike.so.com/doc/2128008-2251489.html">疾风知劲草</a> <a href="https://baike.so.com/doc/295244-312572.html">出淤泥而不染</a></div><br>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
</body>
</html>
3、持节的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;
}
.cd{background-image:url("../image/007.gif");}
.d{background-image:url("../image/008.gif");font-size: 40px;width: 100%;font-family: "宋体"；}
.d h2{color: #761772;font-size: 40px;}
.d h3{color:#220e1a;font-size: 35px; }
.e{background-image:url("../image/009.gif");font-size: 40px;width: 100%;font-family: "宋体"；}
.e h2{color:#401825;font-size: 40px;}
.e h3{color:#6fc1cc;font-size: 35px; }
.ed{background-image:url("../image/009.gif");font-size: 28px;width: 100%;font-size:"隶书";color:#ad1c4b;}
五、子页面之爱国
爱国的超链接爱国
1、爱国的效果图
2、爱国的.xml
<!DOCTYPE html>
<html>
<head>
<title>爱国</title>
<link rel="stylesheet" type="text/css" href="css/爱国.css">
<script type="text/javascript" src="javascript/时间.js ">
</script>
</head>
<body>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>爱国</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div> <!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<div class="diyibufen"><center>
爱国格言<br></div></center>
<center>
<div class="dierbufen">
<br>以家为家，以乡为乡，以国为国，以天下为天下。 --《管子"牧民》<br>
<br>临患不忘国，忠也。--《左传"昭公元年》<br>
<br>长太息以掩涕兮，哀民生之多艰。--屈原《离骚》<br>
<br><a href="https://baike.so.com/doc/5378916-5615135.html">
先天下之忧而忧，后天下之乐而乐。--范仲淹《岳阳楼记》<br></a>
<br>天下兴亡，匹夫有责。--顾炎武《日知录.正始》<br>
<br>苟利国家，不求富贵。--《礼记"儒行》<br>
<br>捐躯赴国难，视死忽如归。--曹植《白马篇》<br>
<br>烈士之爱国也如家。--葛洪《抱朴子"外篇"广譬》烈士:有抱负.有作为的人<br>
<br>位卑未敢忘忧国。--陆游《病起书怀<br>
<br><a href="https://baike.so.com/doc/1202804-24192526.html">
人生自古谁无死，留取丹心照汗青。--文天祥《过零丁洋》<br></a>
<br><a href="https://baike.so.com/doc/6744180-6958721.html">
王师北定中原日，家祭无忘告乃翁。--陆游《示儿》<br></a>
</font>
</div></center>
<img src="image/025.gif"><img src="image/026.gif">
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
</body>
</html>
3、爱国的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.diyibufen{background-image:url("../image/048.gif");width: 100%;height:70px;
line-height: 70px;font-size: 40px;font-size:"隶书";color:#ad1c4b;}
.dierbufen{background-image:url("../image/023.gif");width: 100%;height: auto;font-size: 30px;}
.tupian{width: 30%;height: auto;}
六、子页面之明志
明志的超链接明志
1、明志的效果图
2、明志的.xml
<!DOCTYPE html>
<html>
<head>
<title> 明志 </title>
<link rel="stylesheet" type="text/css" href="css/明志.css">
<script type="text/javascript" src="javascript/时间.js ">
</script>
</head>
<body>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>明志</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div> <!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<div class="diyibufen"><center>
明志格言<br></div></center>
<center>
<div class="dierbufen">
<br>闻道，夕死可矣。--《论语"里仁》<br>
<br><a href="https://baike.so.com/doc/2545243-2688442.html">
士志于道，而耻恶衣恶食者，未足与议也。 --《论语"里仁》<br></a>
<br><a href="https://baike.so.com/doc/5412084-5650208.html">
士不可以不弘毅，任重而道远。--《论语·泰伯》<br></a>
<br><a href="https://baike.so.com/doc/1333041-1409356.html">
燕雀安知鸿鹄之志哉!--《史记"陈涉世家》<br></a>
<br>志不强者智不达。--《墨子·修身》<br>
<br>志当存高远。--诸葛亮《诫外甥书》<br>
<br><a href="https://baike.so.com/doc/2490463-2631881.html">
非淡泊无以明志，非宁静无以致远。--诸葛亮《诫子书》<br></a>
<br>志小则易足，易足则无由进。--张载《经学理窟·学大原下》<br>
<br>古之立大事者，不惟有超世之才，亦必有坚忍不拔之志。--苏轼《晁错论》<br>
<br><a href="https://baike.so.com/doc/3288545-3464247.html">
有志者事竟成。--《后汉书·耿弇列传》<br></a>
<br><a href="https://baike.so.com/doc/6736003-6950394.html">
有志不在年高，无志空长百岁。--石成金《传家宝·俗谚牧民》<br></a>
</font>
</div></center>
<img src="image/045.gif"><img src="image/046.gif"><img src="image/047.gif">
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
</body>
</html>
3、明志的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.diyibufen{background-image:url("../image/024.gif");width: 100%;height:70px;
line-height: 70px;font-size: 40px;font-size:"隶书";color:#ad1c4b;}
.dierbufen{background-image:url("../image/023.gif");width: 100%;height: auto;font-size: 30px;}
.tupian{width: 30%;height: auto;}
七、子页面之厚仁
厚仁的超链接厚仁
1、厚仁的效果图
2、厚仁的.xml
<!DOCTYPE html>
<html>
<head>
<title>厚仁</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/厚仁.css">
<script type="text/javascript" src="javascript/时间.js"></script>
</head>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>厚仁</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div> <!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<center>
<div class="e">
厚仁？<br>厚仁格言小警句<br>
</div></center>
<div class="c"><br>二人同心，其利断金。--《周易"系辞上》<br>
<br><a href="https://baike.so.com/doc/855054-904059.html">
亲仁善邻，国之宝也。--《左传"隐公六年》</a><br>
<br><a href="https://baike.so.com/doc/234944-248546.html">
礼之用，和为贵。--《论语"学而》</a><br>
<br><a href="https://baike.so.com/doc/6725982-6940206.html">
君子和而不同，小人同而不和。--《论语"子路》</a><br>
<br>
君子和而不流。(流:盲从)--《礼记"中庸》
乐民之乐者，民亦乐其乐; 忧民之忧者，民亦忧其忧。--《孟子"梁惠王下》<br>
<br>
天时不如地利，地利不如人和。--《孟子"公孙丑下》<br>
<br>
千人同心，则得千人力;万人异心，则无一人之用。--《淮南子"兵略训》<br>
<br>
单者易折，众则难摧。--崔鸿《三十国春秋"西秦录》<br>
<br>
和以处众，宽以接下，恕以待人，君子人也。--林逋《省心录》<br>
<br><a href="https://baike.so.com/doc/1435186-1517022.html">
有朋自远方来，不亦乐乎?--《论语"学而》</a><br></div>
<div class="d"><img src="image/015.gif"></div>
<div class="d"><img src="image/016.gif"></div>
<div class="f"><img src="image/018.gif"></div>
<div class="f"><img src="image/019.gif"></div>
<div class="f">
<br>
老吾老，以及人之老；幼吾幼，以及人之幼。——《孟子·梁惠王上》<br>
<br>
君子莫大乎与人为善。——《孟子·公孙丑上》<br>
<br>
爱人者，人恒爱之；敬人者，人恒敬之。——《孟子·离娄下》<br>
<br>
与人善言，暖于布帛；伤人以言，深于矛戟。——《荀子·荣辱》<br>
<br>
不蔽人之善，不言人之恶。——《战国策·魏策》<br>
<br>
爱之不以道，适所以害之也。——《资治通鉴》<br>
<br>
以爱己之心爱人，则尽仁。——张载《正蒙·中正》<br>
<br>
民，吾同胞；物，吾与也。——张载《正蒙·乾称》<br>
<br>惟仁者能好人，能恶人。——《论语·里仁》<br></div>
<div class="f"><img src="image/020.gif"></div>
<div class="f"><img src="image/021.gif"></div>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="http://www.zgjzfpw.org.cn/">精准扶贫网</a><br>
版权信息归精准扶贫网所有<br></div>
</body>
</html>
3、厚仁的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.e{background-image: url("../image/017.gif");background-size: cover;font-style: "楷体";font-size: 27px;color: red;}
.f{height:auto;width: 50%;background-image: url("../image/022.gif");background-size: cover;
font-style: "宋体";font-size: 20px;color:blue;float:left;}
.c{height:auto;width: 50%;background-image: url("../image/014.gif");background-size: cover;
font-style: "宋体";font-size: 20px;color:blue;float:left;}
.d{width: 50%;height: 300px;float:left;}
八、子页面之自强
自强的超链接自强
1、自强的效果图
2、自强的.xml
<!DOCTYPE html>
<html>
<head>
<title>自强</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/自强.css">
<script type="text/javascript" src="javascript/时间.js"></script>
</head>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>自强</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div>
<!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<div class="c">
<center>
<h2>自强？</h2>
</center>
<h4> 自强，汉语词语，zì qiáng，亦作" 自强 "。意思是(1)指自己努力向上。自我勉励，奋发图强。(2)指国家自力图强。(3)修身自立，不断提升和完善自己。指自己奋发图强。见《楚辞·九章·怀沙》:"惩连改忿兮，抑心而自强。"
<br> 自强是一种精神，是一种美好的品德，是一个人活出尊严、活出人生价值的必备品质;是一个人健康成长、努力学习、成就事业的强大动力。自强是在自爱、自信的基础上充分认识自己的有利因素，积极进取，努力向上，不甘落后，勇于克服困难，做生活的强者。树立自强的目标有助于克服意志消沉、性格软弱，从而振奋精神，担负起时代赋予的重任。
</h4><img src="image/004.gif"><img src="image/005.gif"><img src="image/049.gif"></div>
<div class="e"> <!-- 第二部分-->
<center>
<h3> 自强格言</h3>
</center></div>
<br>
<div class="b"><center>
<br>天行健，君子以自强不息。--《周易"乾"象》<br>
<br>胜人者力，自胜者强。--《老子》第三十三章<br>
<br>不怨天，不由人。--《论语"宪问》<br>
<br><a href="https://baike.so.com/doc/1542192-1630350.html">
百尺竿头，更进一步。--朱熹《答巩仲至》<br></a>
<br>天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。 --《孟子"告子下》<br>
<br>生于忧患而死于安乐。--《孟子"告子下》<br>
<br>路漫漫其修远兮，吾将上下而求索。--屈原《离骚》<br>
<br>以修身自强，则名配尧禹。--《荀子"修身》<br>
<br>能胜强敌者，先自胜者也。--《商君书"画策》<br>
<br><a href="https://baike.so.com/doc/1004661-1062157.html">
老骥伏枥，志在千里;烈士暮年，壮心不已。--曹操《龟虽寿》<br></a>
<br><a href="https://baike.so.com/doc/5414897-5653039.html">
生当作人杰，死亦为鬼雄。--李清照《乌江》<br></a>
</font></div></center>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
</body>
</html>
3、自强的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.c{background-image:url("../image/003.gif");font-family: "宋体";width: 100%;font-size: 35px;}
h2{color: black;font-size: 40px;}
h3{color: red;font-size: 35px;}
h4{color: green;font-size: 30px;}
.d{width: 50%; float: right;}
.e{background-image:url("../image/006.gif");width: 100%;height: auto;font-size: 30px;}
.e h2{color: blue;font-family: "宋体";font-size: 40px;}
.e h3{color: green;font-family: "宋体";font-size: 35px;}
九、首页
首页的超链接主页
1、首页的效果图
2、首页的.xml
<!DOCTYPE html>
<html>
<head>
<title>主页</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/首页.css" >
<script type="text/javascript" src="javascript/时间.js ">
</script>
</head>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="https://baike.so.com/doc/357503-378739.html">中华民族传统美德</a>
<p>首页</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div>
<!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</div>
<!-- 中间部分-->
<!-- 第一部分小故事-->
<center>
<div class="c">
中华民族传统美德
</div>
</center>
<center>
<div class="d">
起源
</div>
</center>
<div class="e">
形成和发展
</div>
</center>
<div class="f">
<br> 从炎帝传说研究早期中华民族传统美德民族，炎黄二帝是中国古代文明全面的象征。我们应大量宣传炎黄二帝的贡献。正因为如此，我们不仅要研究、继承从孔夫子到孙中山为代表的中华民族传统美德，而且，要把上限延伸到黄帝，延伸到炎帝神农氏，对他们为代表的早期中华民族传统美德也要研究、继承。<br>
<br> 中国历史发展的事实也证明了这点。中华民族是一个传统的农业民族，炎帝神农氏作为中国农业文明的始创者，黄帝作为中国农业文明的进一步开创者与推动者，他们在联合的基础上，共同孕育出了中华民族的早期文明，而且也共同孕育出了以后的西周农耕文明。周人实现了由氏族社会向宗法社会的转变，建立了以父系个体家庭和宗亲血缘亲疏关系为基础的等级制国家。为了维护宗法等级制度的存在和国家的长治久安，周公制礼作乐，创造了礼乐文化。"礼"是由祭礼而生的，起源于 "腊祭"，而这些都和炎帝神农氏有关。炎帝神农氏"削桐为琴，练丝为弦"，发明了腊祭和原始音乐，可见周人的礼乐文化发端于姜炎文化。腊祭作为炎帝神农时代大型的冬季仪式活动，是炎帝部族们对大自然生生育化，"终岁献功"的顶礼膜拜，也是对具有无限生命力的来年和新生命的期盼。中华民族几千年来的"春节"系列活动，不能不和姜炎文化有关。周人礼乐文化中所体现的一些传统美德，不能不和姜炎文化中所体现的中华民族早期传统美德有关。<br>
<br> 李逢春先生在《炎帝功业与周秦文化》一文中说:"古雍州，今宝鸡这块山清水秀的风水宝地上曾经养育过华夏民族的一位人文初祖--炎帝神农氏。是炎帝神农氏的丰功伟业照亮了华夏大地的古雍州、今宝鸡，这里才产生了代表中国和东方文明的周礼周乐以及享名于世的西周青铜器和陈仓石鼓。也就是说，炎帝神农氏在农业、医药、制陶、祭祀等方面的创造和发明奠定了周秦文化的基础;周秦文化是在炎帝神农氏开始创造的这个经济基础上发生、发展和繁荣昌盛起来的。"这个评价是很有道理的。当然，周秦文化中的礼乐文化、伦理道德文化也都是在炎帝一系列事迹所提供的物质文化、精神文化，包括伦理道德文化在内的基础上产生和发展起来的。<br>
</div>
<div class="g">
<br> 中华民族传统美德是怎样形成和发展的呢?"仁、义、礼、智、信"是中国古代儒家提出并归纳的五个最重要的道德要求，从文字记载看，距今已有2500多年历史，从口头传播来看，还要早得多。在漫长的历史进程中，随着社会演变和文明的推进，逐渐得到明确、规范、升华、丰富和发展<br>
<br> 首先，春秋初期著名的政治家、思想家管仲提出了"礼、义、廉、耻"四个道德要素。管子对这四个要素非常看重，称"四维张则君令行"，"四维不张，国乃灭亡"，意思是说，这四大道德要素如果能够弘扬，君主的政令就能够畅通，反之国家就要灭亡，从关系国家生死存亡的高度强调了这四大道德要素之重要。何谓"四维"?管子说"一曰礼，二曰义，三曰廉，四曰耻"，"礼义廉耻，国之四维"。<br>
<br> 春秋末的老子提出人要"上善若水"。意思是最善的人要像水一样，具体地说，要"居，善地;心，善渊;与，善仁;言，善信;政，善治;事，善能;动，善时;夫唯不争，故无尤"。显然老子倡导"仁"、"信"等道德操守。随后，战国思想家孟子在此基础上把"仁、义、礼、智"这四个要素整理归纳出来，作为道德的基本要求。《孟子·告子》篇写道"恻隐之心，仁也;羞恶之心，义也;恭敬之心，礼也;是非之心，智也。仁义礼智，非由外铄我也，我固有之也，弗思耳矣。"孟子的意思是说，"仁、义、礼、智"这四个方面是我自身独有的，并不是外界给我的，人就应该有这样的本质和品德。孟子把"恻隐之心、羞恶之心、恭敬之心、是非之心"总结归纳为"仁、义、礼、智"，并把它们作为基本的道德规范、道德准则和道德理念。<br>
<br> 随着历史的发展，特别是到魏晋之后，官方、民间出现了道德认识的不同观点、不同主张，对"仁、义、礼、智、信"也进行了多种阐述，进行了新的创造和新的规范。尽管如此，"仁、义、礼、智、信"作为传统道德之主要架构并没有发生根本改变。其间，特别是作为宋明理学的"顶梁"人物程颢、程颐、朱熹等思想家在这方面的贡献最为突出。二程将"仁、义、礼、智、信"发展为"五常全体四支"说，即"仁义礼智信五者，性也。仁者，全体;四者，四支。"意思是说，如果把"仁"看作是整个身体，"义礼智信"则是身体的四肢。朱熹则提出"仁包四德"的著名论断。<br>
</div>
<!-- 第二部分视频、图片-->
<center>
<center>
<div class="d">
中华民族传统美德视频</div>
</center>
<div class="e">
中华民族传统美德照片集
</div>
</center> <div class="h"><center>
<video src="image/新闻联播.mp4" controls="controls"></video> </center></div>
<div class="h">
<img src="image/039.gif">
<img src="image/040.gif">
<img src="image/041.gif">
<img src="image/042.gif">
<img src="image/043.gif">
<img src="image/044.gif">
</div>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="https://baike.so.com/doc/357503-378739.html">中华名族传统美德</a><br>
版权信息归中华名族传统美德所有<br></div>
</body>
</html>
3、首页的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.c{background-image: url("../image/033.gif");font-style: "宋体";
font-size: 29px;color: black;width: 100%;height: 100px;line-height: 100px;}
.d{background-image: url("../image/034.gif");width: 50%;height: 70px;font-size: 25px;
color:red;line-height: 70px;float: left;}
.e{background-image: url("../image/035.gif");width: 50%;height: 70px;font-size: 25px;
color:black;line-height: 70px;float: left;}
.f{background-image: url("../image/036.gif");width: 50%;height:auto;float: left;font-size: 23px;font-style: "仿宋"；}
.g{background-image: url("../image/037.gif");width: 50%;height:auto;float: left;font-size: 23px;font-style: "仿宋"；}
.h{background-image: url("../image/038.gif");height: auto;}
十、时间
1、时间的效果图
2、时间的.js
function time(){
var date=new Date();
var time ="今天是"+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"
+date.getHours()+":"+date.getMinutes()+"分"+date.getSeconds()+"秒";
document.getElementById("time").innerHTML=time;
};
setInterval("time()",1000);
十一、论坛管理
论坛管理的超链接论坛管理
1、论坛管理的页面
2、论坛管理的.xml
<!DOCTYPE html>
<html>
<head>
<title>论坛管理</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/厚仁.css">
<script type="text/javascript" src="javascript/时间.js"></script>
</head>
<body>
<!-- 这是logo部分-->
<div class="logo">
<img src="image/logo.jpg">
<a href="#">中华民族传统美德</a>
<p>论坛管理</p>
<div style="width: 200px;height: 100%;float: right;line-height: 70px;">
<a href="denglu.html">登录</a>
<a href="zhuce.html">注册</a> <marquee id="time"><br/>
</marquee>
</div></div> <!--清除浮动-->
<div style="clear:both;"></div>
<!--导航条部分-->
<div style="width: 100%;height:50px;background-color:#e0ced7;">
<a href="首页.html" class="amenu"> 首页</a>
<a href="爱国.html" class="amenu">爱国</a>
<a href="明志.html" class="amenu">明志</a>
<a href="持节.html" class="amenu">持节</a>
<a href="自强.html" class="amenu">自强</a>
<a href="厚仁.html" class="amenu">厚仁</a>
<a href="诚信.html" class="amenu">诚信</a>
<a href="论坛管理.html" class="amenu">论坛管理</a>
</a> 
</div>
<!-- 中间部分-->
<!-- 第一部分-->
<center>
<div class="e"><br><br>
发帖吧
<div id="lyxt">
<div id="lyleft"></div>
<div id="lycenter">
<div id="txt">
<br><br>
<textarea id="text" value="" cols="80" rows="10"></textarea><br>
<button type="button" id="btn">评论留言</button>
<div id="lis">
<ol id="text_li">
</ol>
</div>
</div>
<script type="text/javascript">
var tet= document.getElementById("text");
var butt= document.getElementById("btn");
var tet_li= document.getElementById("text_li")
butt.onclick = function msg(){
var Li= document.createElement("li");
Li.innerHTML= tet.value;
tet_li.appendChild(Li);
}
</script>
</div>
<div id="lyright"></div>
</div></div>
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a><br>
友情链接：<a href="http://www.zgjzfpw.org.cn/">精准扶贫网</a><br>
版权信息归精准扶贫网所有<br></div>
</body>
</html>
3、论坛管理的.css
*{
margin: 0px ;padding: 0px;
}
.logo{
width: 100%;
height:110px;
float: left;
line-height: 100px;
background-image:url("../image/logo背景.gif");
}
.logo img{
float: left;
}
.logo a{
/* 去掉 下划线 */
color: red;
font-family: "隶书";
float: left;
margin-left: 20px;
font-size: 30px;
}
.logo p{
float: left;
color: black;
font-family:"黑体";
margin-left: 210px;
font-size: 30px;
}
/* 导航栏设置*/
.amenu {
color: white;
height: 50px;
line-height: 50px;
text-decoration: none;
font-size: 28px;
}
.b{background-image:url("../image/001.gif");}
#bottom{
width: 100%;
background-image:url("../image/002.gif");
font-family: "宋体"；
font-size:20px;
height: 30px;
line-height: 30px;
text-align: center;}
.e{background-image: url("../image/017.gif");background-size: cover;font-style: "楷体";font-size: 27px;color: red;}
.f{height:auto;width: 50%;background-image: url("../image/022.gif");background-size: cover;
font-style: "宋体";font-size: 20px;color:blue;float:left;}
.c{height:auto;width: 50%;background-image: url("../image/014.gif");background-size: cover;
font-style: "宋体";font-size: 20px;color:blue;float:left;}
.d{width: 50%;height: 300px;float:left;}
十一、.php
1、yzdl.php
<?php
session_start();
$dbhost = 'localhost'; // mysql服务器主机地址
$dbuser = 'yxy'; // mysql用户名
$dbpass = '123456'; // mysql用户名密码
$dbname='meide';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass,$dbname);
$num1=$_POST['num1'];
$firstname=$_POST['firstname'];
$key=$_POST['denglu'];
//数据库连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
mysqli_query($conn,"set names utf8");
if (isset($key)) {
if ($num1 == "" || $firstname == "") {
echo "<script>alert('信息不能为空！请重写');window.location.href='denglu.html'</script>";
} elseif ((strlen($num1) != 8) || (preg_match('/^\w$/i', $num1))) {
echo "<script>alert('账号不足8位or含有非法数字，请重输入');window.location.href='denglu.html'</script>";
} else {
$sqlf = "SELECT user1 FROM yonghubiao where num1='$num1' AND firstname='$firstname'";
mysqli_select_db($conn,'meide');
$result=mysqli_query($conn,$sqlf);
$rs=$conn->query($sqlf);
if ($rs&&$rs->num_rows>0){
$_SESSION['one']=$num1;
echo "<script>alert('登录成功！');window.location.href='论坛管理.html'</script>";
}else{
echo "<script>alert('账号不存在or密码错误！');window.location.href='denglu.html'</script>";
}
}
$conn->close();
}
?>
2、登录.php
<?php
$dbhost = 'localhost'; // mysql服务器主机地址
$dbuser = 'yxy'; // mysql用户名
$dbpass = '123456'; // mysql用户名密码
$dbname='meide';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass,$dbname);
$num1=$_POST['num1'];
$user1=$_POST['user1'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$both1=$_POST['both1'];
$email=$_POST['email'];
$address=$_POST['address'];
$key=$_POST['zhuce'];
//数据库连接
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
if (isset($key)){
if($num1==""||$user1==""||$firstname==""||$lastname==""||$both1==""||$email==""||$address==""){
echo "<script>alert('信息不能为空！请重写');window.location.href='zhuce.html'</script>";
}elseif ((strlen($num1)!=8)||(preg_match('/^\w$/i',$num1))){
echo "<script>alert('账号不足8位，含有非法数字，请重输入');window.location.href='zhuce.html'</script>";
}elseif (strlen($num1)<6){
echo "<script>alert('密码小于6位，请重输入');window.location.href='zhuce.html'</script>";
}elseif ($firstname!=$lastname){
echo "<script>alert('两次输入密码不同，请重输入');window.location.href='zhuce.html'</script>";
}elseif (!preg_match('/^[\w\.]+@\w+\.\w+$/i',$email)){
echo "<script>alert('邮箱不合法，请重输入');window.location.href='zhuce.html'</script>";
}elseif (mysqli_fetch_array(mysqli_query($conn,"select * from login where num1='$num1'"))){
echo "<script>alert('输入的账号已存在，请重输入');window.location.href='zhuce.html'</script>";
}else{
//将数据导入表中
$sql = "INSERT INTO yonghubiao (num1,user1,firstname,lastname,both1,email,address)
VALUES ('$num1', '$user1', '$firstname','$lastname','$both1','$email','$address')";
if (mysqli_query($conn, $sql)) {
echo "<script>alert('注册成功');window.location.href='denglu.html'</script>";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}$conn->close();
}
}
?>
十二、注意点（这些要格外注意，不要最后败在细节处）
2691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
