当前位置：网站首页>【 Web 】 page d'accueil personnelle 】 Programme d'études 】 albums de photos 】 babillard d'information 】
【 Web 】 page d'accueil personnelle 】 Programme d'études 】 albums de photos 】 babillard d'information 】
2022-06-10 19:16:00 【Trois provinces de Laurie】
Catalogue des articles
C'est presque la fin de la période,Le grand devoir qui n'a pas pu s'échapper est revenu(555),Il n'y a pas de limite au sujet de ce travail,Alors je vais faire une version facile de la page d'accueil personnelle.
Présentation
Pas grand - chose à dire,Voici d'abord le résultat final.
Page d'accueil:
Programme scolaire:
Albums de photos:
Babillard de messages:
Description de la fonction
Album photo cliquez sur la petite image pour l'agrandir
Le Babillard de messages affiche les messages ci - dessous,Vous pouvez également afficher l'heure. Cliquez sur le côté droit du message pour supprimer le message
Code
html
Page d'accueil
<!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>Page d'accueil</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">Page d'accueil</a></li>
<li><a href="classForm.html">Programme scolaire</a></li>
<li><a href="album.html">Albums de photos</a></li>
<li><a href="message.html">Babillard de messages</a></li>
<li><a href="about.html">À propos de</a></li>
</ul>
</div>
<div class="main">
<h3>Page d'accueil</h3>
<div class="mainBox">
<br>
<h2>Welcome to Laurie's website!</h2>
<br>
<h2>Good luck!</h2>
</div>
</div>
<div class="footer">
<p>copyright:@laurieTrois provinces</p>
</div>
</body>
</html>
Programme scolaire
<!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>Programme scolaire</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">Page d'accueil</a></li>
<li><a href="classForm.html">Programme scolaire</a></li>
<li><a href="album.html">Albums de photos</a></li>
<li><a href="message.html">Babillard de messages</a></li>
<li><a href="about.html">À propos de</a></li>
</ul>
</div>
<div class="main">
<h3>Programme scolaire</h3>
<div>
<table>
<tr>
<td>Semaine/Section</td>
<td>Lundi</td>
<td>Mardi</td>
<td>Mercredi</td>
<td>Jeudi</td>
<td>Vendredi</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td rowspan="3">Système d'exploitation</td>
<td></td>
<td></td>
<td rowspan="4"> Formation pratique au projet logiciel </td>
</tr>
<tr>
<td>2</td>
<td></td>
<td rowspan="4"> Réseaux informatiques et sécurité </td>
<td rowspan="4">Principe et application de la base de données</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">WebTechnologies de développement</td>
<td></td>
<td></td>
<td rowspan="2">Technologies et applications multimédias</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">Sports universitaires-Tennis de table(Primaire)</td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td rowspan="2">Principes fondamentaux de l'ingénierie logicielle</td>
<td rowspan="2">Physique universitaireB</td>
<td rowspan="3">Physique universitaireB</td>
<td rowspan="2">PythonLangues</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:@laurieTrois provinces</p>
</div>
</body>
</html>
Albums de photos
<!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>Albums de photos</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">Page d'accueil</a></li>
<li><a href="classForm.html">Programme scolaire</a></li>
<li><a href="album.html">Albums de photos</a></li>
<li><a href="message.html">Babillard de messages</a></li>
<li><a href="about.html">À propos de</a></li>
</ul>
</div>
<div class="NavigationBar2">
<ul>
<li><a href="album.html">L'océan</a></li>
<li><a href="album2.html">La nature</a></li>
</ul>
</div>
<div class="main">
<h3>L'océan</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"> Sea 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"> La mer trois </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"> La mer quatre </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"> Mer 8 </li>
<li class="catno">Trip08</li>
<li class="date">2021/10/23</li>
</ul>
</div>
</div>
<div class="footer">
<p>copyright:@laurieTrois provinces</p>
</div>
</body>
</html>
Babillard de messages
<!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>Babillard de messages</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">Page d'accueil</a></li>
<li><a href="classForm.html">Programme scolaire</a></li>
<li><a href="album.html">Albums de photos</a></li>
<li><a href="message.html">Babillard de messages</a></li>
<li><a href="about.html">À propos de</a></li>
</ul>
</div>
<div class="main">
<h3>Babillard de messages</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="Soumettre" class="btn"></td>
</tr>
<tr>
<td align="center">
<input type="button" value="Affichage du temps" name="timeshow" id="timeshow" class="btn" onclick="showtime()">
<input type="button" value="Arrêtez!" 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:@laurieTrois provinces</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("Veuillez saisir le contenu") } 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>
À propos de
<!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>À propos de</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">Page d'accueil</a></li>
<li><a href="classForm.html">Programme scolaire</a></li>
<li><a href="album.html">Albums de photos</a></li>
<li><a href="message.html">Babillard de messages</a></li>
<li><a href="about.html">À propos de</a></li>
</ul>
</div>
<div class="main">
<h3>À propos de</h3>
<div class="mainBox">
<br>
<h2>Designed by Laurie</h2>
<br>
<h2>@ Chen Yuhao </h2>
</div>
</div>
<div class="footer">
<p>copyright:@laurieTrois provinces</p>
</div>
</body>
</html>
css
Cadre
.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;
}
Page d'accueil
.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);
}
Programme scolaire
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;
}
Albums de photos
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;
}
Babillard de messages
#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;
}
Saupoudrer de fleurs*,°:.*(￣▽￣)/$:.°* .
Les nouveaux arrivent.,S'il vous plaît corriger;
边栏推荐
- Adobe Premiere基础-工具使用(选择工具,剃刀工具,等常用工具)(三)
- Introduction to ad18 device library import
- 超级简单的课程设计ssm学生管理系统（含源码简单添加、删除、修改、查询操作）
- WordPress 6.0 "Arturo Arturo" release
- MySQL (17 trigger)
- How to play the Dragon Boat Festival "immersive cloud Tour"? That is to say, it helps "live broadcast +" new scene landing
- WordPress 6.0 “Arturo阿图罗” 发布
- 第一章 SQL操作符
- Array signal processing simulation part IV -- Z-transform analysis array polynomial
- Adobe Premiere基础-介绍,配置,快捷键,创建项目,创建序列(一)
猜你喜欢
数据库防火墙闪亮登场（好文共赏）
抢唱玩法升级,正版音乐高潮片段、实时打分能力等你集成~
Chapter 1 SQL operators
单纯形法代码求解（含超详细代码注释和整个流程图）
AEC: analysis of echo generation causes and echo cancellation principle
2022.05.29(LC_6078_重排字符形成目标字符串)
RK1126 新添加一个模块
Adobe Premiere foundation - material nesting (animation of Tiktok ending avatar) (IX)
腾讯云数据库TDSQL-大咖论道 | 基础软件的过去、现在、未来
【 random talk 】 congratulations on getting the title of CSDN expert. Your efforts will eventually pay off
随机推荐
Salesmartly | add a new channel slack to help you close the customer relationship
我的第一部作品：TensorFlow2.x
RK1126 新添加一个模块
C (pointer-02)
Rewrite clear Bayesian formula with base ratio
Lingo12 software download and lingo language introduction resources
第三章 数据类型（二）
C知识练习
Prospect of database firewall technology [final chapter]
单纯形法代码求解（含超详细代码注释和整个流程图）
Chapter III data type (II)
Chapter 6 relational data theory exercise
直播预告 | 社交新纪元，共探元宇宙社交新体验
个人如何投资理财比较安全？
Adobe Premiere foundation - opacity (matte) (11)
Linked List
Jsp基于ssm项目实验室管理系统设计与现实.doc
Design and implementation of SSM based traffic metering cloud system Rar (thesis + project source code)
MySQL高级篇第一章（linux下安装MySQL）【上】
c(指针-02)