说明文档
- 前言
-
- 一、环境配置
-
- 主界面效果图
- 二、二级页面（Java板块）
- 三、后台登陆界面
- 四、对于表单数据校验
- 五、公告功能
- 六、公告对应的表建立
- 七、公告连接数据库与显示
- 结语
前言 审美不好大家不喜勿喷，没有使用任何框架，全凭自己感觉构建但是基本功能可以实现。使用的脚本语言和技术比较老旧，由于CSS渲染的部分很少所以使用的是内部CSS，不是很精通JS主要用它实现简单的界面跳转间弹窗交互
一、环境配置
【JSP|【三剑客+JSP+Mysql+Tomcat】从前到后搭建简易编程导航小网站（期末作业）】1.JDK版本：jdk1.8.0_301
2.Tomcat版本：9.0.0.M26
3.MySQL版本：8.0.0.11
4.jar包：8.0.29
5.编辑器：Notepad++
6.浏览器：Chrome
技术栈
HTML+CSS+JS+JSP+MySQL+Tomcat
主界面效果图 首页面
有些区块代码里写了超链接，用的###填充拿去交作业的话可以自己改成相应的链接
核心代码：
body{
background-image:url(img/88.jpg);
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
编程导航学习网站div{
text-align:center;
color:white;
font-size:18;
font-weight:900;
}
.button {
background-color:#555555;
border-radius: 4px;
transition-duration: 0.4s;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
background: rgba(222,222,2220,2222.3);
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
li a.active1 {
color: red;
background-color: #4CAF50;
}.list{
position: left;
top: 500px;
left: 1380px;
font-family: "微软雅黑";
font-size: 20px;
color:white;
}
.list a {
text-decoration: none;
color:white;
}
* {
box-sizing: border-box;
}
div.search {
padding: 0 0;
}
form {
position: relative;
width: 400px;
margin: 0 auto;
}
input,button {
border: none;
outline: none;
}
.search input {
width: 100%;
height: 42px;
padding-left: 13px;
border: 2px solid #c5464a;
border-radius: 19px;
background: transparent;
}
.search button {
height: 42px;
width: 42px;
cursor: pointer;
position: absolute;
background: #c5464a;
border-radius: 0 19px 19px 0;
width: 60px;
right: 0;
}
.search button:hover {
background-color: #c7585c;
}
.search button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
- "active" href="https://www.it610.com/article/###">首页
- "active1" href="https://www.it610.com/article/zhuce.jsp">请先登陆注册~~
- "java.jsp">Java
- "###">Python
- "###">php
- "###">Go
- "###">Spring全家桶
- "###">Ajax
- "###">数据结构与算法
- "###">前端三剑客
- "###">面试刷题
- "###">数据库
- "###">Go
- "active" href="https://www.it610.com/article/###">退出
"search">
"wdress.html" target="_blank">
文章图片
"wdress.html" target="_blank">
文章图片
"wdress.html" target="_blank">
文章图片
"wdress.html" target="_blank">
