696. 大学生HTML5期末大作业 ―【琴棋书画茶文化主题网页(7页)】 Web前端网页制作 html5+css3+js-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/144494282

欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css3+js，代码精简，div+css布局，带登录非空验证，可账号密码登录。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含7个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>首页</title>
       <link rel="stylesheet" href="./css/index.css">
   </head>
   <body>
   <div id="wrap">
       <div id="logo">
           <div id="logolefet">
               <img src="img/logo.png" width="110" height="80">
           </div>
           <div id="logoright">
               <a href="#">设置为首页</a>
               <a href="#">收藏本站</a>
           </div>
       </div>
       <table id="table">
           <td><a href="index.html">首页 </a></td>
           <td><a href="qin.html">琴</a></td>
           <td><a href="qi.html">棋</a></td>
           <td><a href="shu.html">书</a></td>
           <td><a href="hua.html">画</a></td>
           <td><a href="cha.html">茶</a></td>
       </table>
       <div><img src="img/bg.png" width="1120" height="350"></div>
       <div id="center">
           <div id="left">
               <ul id="line">
                   <li><a href="index.html">首页 </a></li>
                   <li><a href="qin.html">琴</a></li>
                   <li><a href="qi.html">棋</a></li>
                   <li><a href="shu.html">书</a></li>
                   <li><a href="hua.html">画</a></li>
                   <li><a href="cha.html">茶</a></li>
               </ul>
           </div>
           <div id="right">
               <p>       本网站是一个介绍琴棋书画茶的网站，主要介绍了与琴棋书画茶相关的内容，致力于中国古风文化的学习、交流、探索和传承。共有7个页面，分别为登录页面、首页、琴、棋、书、画、茶各一个。<br>
                          为实现网络交流，资源共享，为学习，交流、探索、传承中国传统文化，创建了属于你我的文化信息学习平台。
               </p>
           </div>
       </div>
       <div id="footer">
           Copyright © 2024 xxx
       </div>
   </div>
   </body>
</html>

...

2.CSS

代码如下（节选示例）：

/* "*"是全局选择器 */
*{
margin: 0;
}

body {
   width: 1120px;
   margin-top: 0px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
}
#logo {
   background-color: #acdfe3;/* 顶部背景颜色 */
   height: 90px;/* 高度设置成90px */
}
#logolefet {
   float: left;/* 设置为左浮动 */
   padding-left: 10px;
   padding-top: 3px;
}

#logoright {
   padding: 16px;
   float: right;/* 设置为右浮动 */
}
#logoright a {
   text-decoration: none; /* 去掉超链接的下划线 */
   font-size: 22px;/* 字体大小 */
   color: #FFF;/* 字体颜色 */
}

#left {
   background-color: #b9f0f4;
   /* 左边列表的背景颜色 */
   float: left;
}
#right {
   background-color: #FFF;
   float: right;
   height: 620px;
   width: 840px;
   font-size: 22px;
}
#center #left #line li a {
   text-decoration: none;
   color: #000;
}
#table {
   width: 1120px;
   text-align: center;
   background-color: #9ccad0;
   height: 60px;
}

#table a {
   color: #000000;
   text-decoration: none;
   font-size: 26px;
}

#center #left {
   /* 中间左半部分的宽、高 */
   height: 700px;
   width: 280px;
}
#center #left #line li {
   line-height: 50px;
   list-style-type: none;/* 列表项无序号; */
   background-color: antiquewhite;
   width: 200px;
   font-size: 26px;
   text-indent: 3em;/* 缩进2字符 */
   margin-top: 50px;
}

...

3.JS

代码如下（节选示例）：

//自定义函数
function Check() {
   //alert("登录");
   var uname = form1.username.value;
   var passwd = form1.password.value;
   if (uname == "") {
       //alert("用户名不能为空!");
       document.getElementById("errorname").innerText = "用户名不能为空";
   } else if (uname.length < 6) {
       document.getElementById("errorname").innerText = "用户名不能低于6位";
   } else {
       document.getElementById("errorname").innerText = "";
       console.log(document.getElementById("errorname").innerHTML);

       if (passwd == "") {
           document.getElementById("errorpasswd").innerHTML = "<span style='color:red'>密码不能为空</span>";
           //console.log(uppasswd)
       } else if (passwd.length < 6)

...