当前位置：网站首页>[web] personal homepage web homework "timetable", "photo album" and "message board"
[web] personal homepage web homework "timetable", "photo album" and "message board"
2022-06-10 19:16:00 【Laurie three provinces】
List of articles
It's near the end of the term , The big homework that can't escape is coming again (555), There is no limit to the theme of this work , Let me make a simple version of my personal homepage .
Exhibition
Don't talk much , First, let's show the final results .
home page :
Lesson schedule :
Photo album :
Message board :
Function introduction
Photo album can be enlarged by clicking the small picture
The message board can display messages at the bottom , Time can also be displayed . Click on the right side of the message to delete the message
Code
html
home page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/frame.css">
<link rel="stylesheet" href="css/index.css">
<title> home page </title>
</head>
<body>
<div class="header">
<h1>YUDAOTOR</h1>
<p>Only action can change destiny.</p>
</div>
<div class="NavigationBar">
<ul>
<li><a href="index.html"> home page </a></li>
<li><a href="classForm.html"> Lesson schedule </a></li>
<li><a href="album.html"> Photo album </a></li>
<li><a href="message.html"> Message board </a></li>
<li><a href="about.html"> About </a></li>
</ul>
</div>
<div class="main">
<h3> home page </h3>
<div class="mainBox">
<br>
<h2>Welcome to Laurie's website!</h2>
<br>
<h2>Good luck!</h2>
</div>
</div>
<div class="footer">
<p>copyright:@laurie repeatedly examine one's conscience </p>
</div>
</body>
</html>
Lesson schedule
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/frame.css">
<link rel="stylesheet" href="css/classForm.css">
<script src="class.js" type="text/javascript"></script>
<title> Lesson schedule </title>
</head>
<body>
<div class="header">
<h1>YUDAOTOR</h1>
<p>Only action can change destiny.</p>
</div>
<div class="NavigationBar">
<ul>
<li><a href="index.html"> home page </a></li>
<li><a href="classForm.html"> Lesson schedule </a></li>
<li><a href="album.html"> Photo album </a></li>
<li><a href="message.html"> Message board </a></li>
<li><a href="about.html"> About </a></li>
</ul>
</div>
<div class="main">
<h3> Lesson schedule </h3>
<div>
<table>
<tr>
<td> week / Section </td>
<td> Monday </td>
<td> Tuesday </td>
<td> Wednesday </td>
<td> Thursday </td>
<td> Friday </td>
</tr>
<tr>
<td>1</td>
<td></td>
<td rowspan="3"> operating system </td>
<td></td>
<td></td>
<td rowspan="4"> Software project training </td>
</tr>
<tr>
<td>2</td>
<td></td>
<td rowspan="4"> Computer network and security </td>
<td rowspan="4"> Database principle and Application </td>
</tr>
<tr>
<td>3</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6</td>
<td rowspan="3">Web Development technology </td>
<td></td>
<td></td>
<td rowspan="2"> Multimedia technology and application </td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td></td>
<td></td>
<td rowspan="2"> College sports - Table Tennis ( primary )</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td rowspan="2"> Fundamentals of software engineering </td>
<td rowspan="2"> College Physics B</td>
<td rowspan="3"> College Physics B</td>
<td rowspan="2">Python Language </td>
<td></td>
</tr>
<tr>
<td>11</td>
<td></td>
</tr>
<tr>
<td>12</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
<div class="footer">
<p>copyright:@laurie repeatedly examine one's conscience </p>
</div>
</body>
</html>
Photo album
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/frame.css">
<link rel="stylesheet" href="css/album.css">
<title> Photo album </title>
</head>
<body>
<div class="header">
<h1>YUDAOTOR</h1>
<p>Only action can change destiny.</p>
</div>
<div class="NavigationBar">
<ul>
<li><a href="index.html"> home page </a></li>
<li><a href="classForm.html"> Lesson schedule </a></li>
<li><a href="album.html"> Photo album </a></li>
<li><a href="message.html"> Message board </a></li>
<li><a href="about.html"> About </a></li>
</ul>
</div>
<div class="NavigationBar2">
<ul>
<li><a href="album.html"> ocean </a></li>
<li><a href="album2.html"> natural </a></li>
</ul>
</div>
<div class="main">
<h3> ocean </h3>
<div class="pic ls" id="p0">
<a href="photo/s8.png" class="tn"><img src="photo/thumb/sea1.png" /></a>
<ul>
<li class="title"> Sea one </li>
<li class="catno">Trip01</li>
<li class="date">2020/3/21</li>
</ul>
</div>
<div class="pic ls" id="p1">
<a href="photo/s7.png" class="tn"><img src="photo/thumb/sea2.png" /></a>
<ul>
<li class="title"> Dahai II </li>
<li class="catno">Trip02</li>
<li class="date">2021/4/23</li>
</ul>
</div>
<div class="pic pt" id="p2">
<a href="photo/s6.png" class="tn"><img src="photo/thumb/sea3.png" /></a>
<ul>
<li class="title"> Sea three </li>
<li class="catno">Trip03</li>
<li class="date">2021/7/30</li>
</ul>
</div>
<div class="pic pt" id="p3">
<a href="photo/s5.png" class="tn"><img src="photo/thumb/sea4.png" /></a>
<ul>
<li class="title"> Sea four </li>
<li class="catno">Trip04</li>
<li class="date">2019/6/15</li>
</ul>
</div>
<div class="pic ls" id="p4">
<a href="photo/s4.png" class="tn"><img src="photo/thumb/sea5.png" /></a>
<ul>
<li class="title"> Sea five </li>
<li class="catno">Trip06</li>
<li class="date">2020/9/12</li>
</ul>
</div>
<div class="pic pt" id="p5">
<a href="photo/s3.png" class="tn"><img src="photo/thumb/sea6.png" /></a>
<ul>
<li class="title"> Sea six </li>
<li class="catno">Trip07</li>
<li class="date">2020/7/27</li>
</ul>
</div>
<div class="pic ls" id="p6">
<a href="photo/s1.png" class="tn"><img src="photo/thumb/sea7.png" /></a>
<ul>
<li class="title"> Sea seven </li>
<li class="catno">Trip07</li>
<li class="date">2022/5/28</li>
</ul>
</div>
<div class="pic ls" id="p7">
<a href="photo/s2.png" class="tn"><img src="photo/thumb/sea8.png" /></a>
<ul>
<li class="title"> Sea eight </li>
<li class="catno">Trip08</li>
<li class="date">2021/10/23</li>
</ul>
</div>
</div>
<div class="footer">
<p>copyright:@laurie repeatedly examine one's conscience </p>
</div>
</body>
</html>
Message board
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/frame.css">
<link rel="stylesheet" href="css/message.css">
<title> Message board </title>
</head>
<body>
<div class="header">
<h1>YUDAOTOR</h1>
<p>Only action can change destiny.</p>
</div>
<div class="NavigationBar">
<ul>
<li><a href="index.html"> home page </a></li>
<li><a href="classForm.html"> Lesson schedule </a></li>
<li><a href="album.html"> Photo album </a></li>
<li><a href="message.html"> Message board </a></li>
<li><a href="about.html"> About </a></li>
</ul>
</div>
<div class="main">
<h3> Message board </h3>
<table align="center">
<tr>
<td align="center"><textarea name="msg" id="msg" cols="70" rows="15" maxlength="31"></textarea></td>
</tr>
<tr>
<td align="center"><input type="submit" name="btn" id="btn" value=" Submit " class="btn"></td>
</tr>
<tr>
<td align="center">
<input type="button" value=" Time to show " name="timeshow" id="timeshow" class="btn" onclick="showtime()">
<input type="button" value=" stop it " onclick="stoptime()" class="btn">
<label for="txt"></label>
<input type="text" name="txt" id="txt">
</td>
</tr>
<tr>
<td align="center" height="83">
<div id="box"></div>
</td>
</tr>
</table>
</div>
<div class="footer">
<p>copyright:@laurie repeatedly examine one's conscience </p>
</div>
<script type="text/javascript"> var box = document.getElementById("box"); var ul = document.createElement("ul"); box.appendChild(ul); var btn = document.getElementById("btn"); var msg = document.getElementById("msg"); var n = 0; btn.onclick = function () {
if (msg.value === "") {
alert(" Please enter the content ") } else {
n++; var li = document.createElement("li"); now = new Date(); h = now.getHours(); m = now.getMinutes(); s = now.getSeconds(); var obj = document.getElementById('txt'); obj.value = h + ":" + m + ":" + s; li.innerHTML = obj.value + " " + n + "L: " + msg.value + " " + "<span>×</span>"; var lis = li; if (n === 1) {
ul.appendChild(li); } else {
ul.insertBefore(li, lis[0]); } msg.value = ""; var span = document.getElementsByTagName("span"); for (var i = 0; i < span.length; i++) {
span[i].onclick = function () {
ul.removeChild(this.parentNode); n--; } } } } </script>
<script type="text/javascript"> function stoptime() {
clearTimeout(t); } function showtime() {
now = new Date(); h = now.getHours(); m = now.getMinutes(); s = now.getSeconds(); var obj = document.getElementById('txt'); obj.value = h + ":" + m + ":" + s; t = setTimeout("showtime()", 10) } </script>
</body>
</html>
About
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/frame.css">
<link rel="stylesheet" href="css/index.css">
<title> About </title>
</head>
<body>
<div class="header">
<h1>YUDAOTOR</h1>
<p>Only action can change destiny.</p>
</div>
<div class="NavigationBar">
<ul>
<li><a href="index.html"> home page </a></li>
<li><a href="classForm.html"> Lesson schedule </a></li>
<li><a href="album.html"> Photo album </a></li>
<li><a href="message.html"> Message board </a></li>
<li><a href="about.html"> About </a></li>
</ul>
</div>
<div class="main">
<h3> About </h3>
<div class="mainBox">
<br>
<h2>Designed by Laurie</h2>
<br>
<h2>@ Chenyuhao </h2>
</div>
</div>
<div class="footer">
<p>copyright:@laurie repeatedly examine one's conscience </p>
</div>
</body>
</html>
css
frame
.NavigationBar {
overflow: hidden;
background-color: #A2E1D4;
position: sticky;
top: 0;
box-shadow: 0 2px 2px 0 #3cc7ea, 0 2px 2px 0 #60adef;
text-align: center;
}
.NavigationBar li {
padding-left: 10px;
padding-right: 10px;
display: inline-block;
color: #f5deb3;
}
.NavigationBar ul {
list-style-type: none;
overflow: hidden;
}
.NavigationBar a {
float: left;
display: block;
font-size: 20px;
font-weight: bolder;
color: #938686;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.main {
min-height: 440px;
background: linear-gradient(to top right, #83d6de, #fefefd);
margin-top: 20px;
box-shadow: 0 2px 2px 0 #3cc7ea, 0 2px 2px 0 #60adef;
animation: bodyLoad 2s;
}
.main h3 {
padding: 10px;
background-color: #b9e3da;
text-align: center;
color: rgb(152, 149, 149);
}
.mainBox {
text-align: center;
height: 190px;
width: 400px;
margin: 50px auto 20px;
border: 1px solid black;
border-radius: 20px;
background: linear-gradient(to top right, #83d6de, #fefefd);
}
body {
background: url("https://s1.ax1x.com/2022/06/01/XG2zdO.jpg");
background-size: cover;
font-family: Arial, serif;
height: 100%;
padding: 10px 20%;
}
@keyframes bodyLoad {
from {
opacity: 0;
transform: translate3d(0, 20%, 0);
}
to {
opacity: 1;
transform: none;
}
}
.mainBox h2 {
text-align: center;
color: #1a2b3c;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.footer {
color: rgb(125, 124, 124);
margin-top: 50px;
text-align: center;
font-size: 12px;
font-family: Arial, serif;
animation: bodyLoad 3s;
font-weight: bolder;
position: sticky;
background-color: rgb(30, 163, 241, 0.3);
}
.header h1 {
font-size: 50px;
font-weight: bolder;
}
.header {
padding: 18px;
text-align: center;
}
home page
.mainBox {
text-align: center;
height: 190px;
width: 400px;
margin: 50px auto 20px;
border: 1px solid black;
border-radius: 20px;
background: linear-gradient(to top right, #83d6de, #fefefd);
}
Lesson schedule
table {
margin: auto;
border: 1px;
background: linear-gradient(to top right, #83d6de, #fefefd);
width: 100%;
align-content: center;
}
td {
border: 1px solid #1a2b3c;
text-align: center;
}
Photo album
div.pic {
float: left;
height: 160px;
width: 160px;
margin: 5px;
}
div.pic img {
border: none
}
div.ls img {
margin: 0px;
height: 90px;
width: 135px;
}
div.pt img {
margin: 0px;
height: 135px;
width: 90px;
}
div.ls a {
display: block;
padding: 34px 14px 36px 11px;
}
div.pt a {
display: block;
padding: 11px 36px 14px 34px;
}
div.pic ul {
display: none;
}
div.pic:hover ul {
display: block;
position: absolute;
}
div.pic ul {
margin: -5px 0 0 0px;
padding: 0 0 0 0.5em;
background: #dceeff;
border: 2px solid #a7d5ff;
font-size: 12px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
div.pic li {
line-height: 1.2em;
margin: 0;
padding: 0;
}
div.pic li.title {
font-weight: bold;
padding-top: 0.4em;
padding-bottom: 0.2em;
border-bottom: 1px solid #a7d5ff;
color: #004586;
}
div.pic li.catno {
color: #0068c9;
margin: 0 2px 0 6em;
padding-left: 5px;
border-left: 1px solid #a7d5ff;
}
div.pic li.date {
color: #0068c9;
font-style: italic;
margin: -1.2em 2px 0 11em;
padding-left: 5px;
border-left: 1px solid #a7d5ff;
}
.NavigationBar2 {
overflow: hidden;
background: linear-gradient(to bottom, #A2E1D4, #c1dbd6);
position: sticky;
top: 0;
box-shadow: 0 2px 2px 0 #3cc7ea, 0 2px 2px 0 #60adef;
text-align: center;
}
.NavigationBar2 li {
padding-left: 5px;
padding-right: 5px;
display: inline-block;
color: #f5deb3;
}
.NavigationBar2 ul {
list-style-type: none;
overflow: hidden;
}
.NavigationBar2 a {
float: left;
display: block;
font-size: 13px;
font-weight: bolder;
color: #938686;
text-align: center;
padding: 8px 10px;
text-decoration: none;
}
Message board
#msg {
border-radius: 10px;
background-color: #f2f2f2;
}
li {
list-style-type: none;
font-size: 20px;
}
.btn {
width: 100px;
height: 30px;
border-radius: 5px;
background-color: #f2f2f2;
border: 1px solid #ccc;
cursor: pointer;
}
#txt {
width: 120px;
height: 30px;
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
font-size: 30px;
font-weight: bold;
border-radius: 40px;
background-color: #91c4ea;
color: white;
text-align: center;
border: 0;
}
And the flower *,°:.*(￣▽￣)/$:.°* .
Newbie on the road , Please correct any mistakes ;
边栏推荐
- [Agency] 10 minutes to master the essential difference between forward agency and reverse agency
- Rewrite clear Bayesian formula with base ratio
- Wireshark learning notes (II) detailed explanation of forensics analysis cases
- mysql8.0(新特性小结)
- Adobe Premiere基础(视频的最后一步字幕添加)(六)
- 腾讯云数据库TDSQL-大咖论道 | 基础软件的过去、现在、未来
- Openssl1.1.1 vs2013 compilation tutorial
- 我的第一部作品：TensorFlow2.x
- Tencent cloud database tdsql- a big guy talks about the past, present and future of basic software
- Adobe Premiere基礎-工具使用(選擇工具,剃刀工具,等常用工具)(三)
猜你喜欢
Super simple course design SSM student management system (including simple addition, deletion, modification and query of source code)
Chapter II data type (I)
Adobe Premiere基础(视频的最后一步字幕添加)(六)
Rk1126 adds a new module
Implementation analysis of single image haze removal using dark channel prior
Analysis of optical storage direct flexible power distribution system
端午“沉浸式云旅游”怎么玩？即构助力“直播+”新场景落地
WordPress 6.0 "Arturo Arturo" release
2022.05.26(LC_1143_最长公共子序列)
Debugging skills
随机推荐
nodejs-判断系统类型-获取主机名称-执行控制台命令-中文乱码
Dynamic SQL of DB2 SQL pl
AEC：回声产生原因及回声消除原理解析
Introduction to DB2 SQL pl
Detailed explanation of Lora module wireless transceiver communication technology
我的第一部作品：TensorFlow2.x
How to correctly understand the real-time nature of Bi?
直播预告 | 社交新纪元，共探元宇宙社交新体验
通过举栗子的方式来讲解面试题（可面试，可复习，可学习）
Adobe Premiere foundation - tool use (selection tool, razor tool, and other common tools) (III)
单纯形法代码求解（含超详细代码注释和整个流程图）
端午“沉浸式云旅游”怎么玩？即构助力“直播+”新场景落地
lingo12软件下载及lingo语言入门资源
Chapter 1 SQL operators
基于谱加权的波束方向图分析
mysql(17-触发器)
Adobe Premiere Foundation (animation production - Flexible animation) (VIII)
Nodejs judge system type get host name execute console command Chinese garbled code
基于ssm在线订餐系统设计与实现.rar（项目源码）
Analysis of optical storage direct flexible power distribution system