当前位置：网站首页>【 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;
边栏推荐
- Data URL
- mysql(17-课后练习题)
- Chapter II data type (I)
- c(指针02)
- Adobe Premiere基础-介绍,配置,快捷键,创建项目,创建序列(一)
- Chapter 6 relational data theory exercise
- Adobe Premiere基础-工具使用(选择工具,剃刀工具,等常用工具)(三)
- [Agency] 10 minutes to master the essential difference between forward agency and reverse agency
- Longest ascending subsequence (LIS) Logu
- Adobe Premiere basic special effects (card point and transition) (IV)
猜你喜欢
Chapter II data type (I)
Mysql8.0 (summary of new features)
Adobe Premiere foundation - material nesting (animation of Tiktok ending avatar) (IX)
瑞芯微RK1126平台 平台移植libevent 交叉编译libevent
Seata installing the window environment
Salesmartly | add a new channel slack to help you close the customer relationship
WordPress 6.0 "Arturo Arturo" release
OPENCV 检测人脸 不依赖于任何第三方库
Implementation analysis of single image haze removal using dark channel prior
Code solution of simplex method (including super detailed code notes and the whole flow chart)
随机推荐
Google Earth engine (GEE) -- Copernicus atmosphere monitoring (CAMs) global aerosol AOI near real-time observation data set
Adobe Premiere foundation - tool use (selection tool, razor tool, and other common tools) (III)
ESP8266 系统环境搭建
Array type of DB2 SQL pl
Request header field XXXX is not allowed by access control allow headers in preflight response
Adobe Premiere foundation - Import and export, merge materials, source file compilation, offline (II)
How to play the Dragon Boat Festival "immersive cloud Tour"? That is to say, it helps "live broadcast +" new scene landing
数据库防火墙闪亮登场（好文共赏）
基于谱加权的波束方向图分析
Vs solution to garbled Chinese characters read from txt files (super simple)
第一章 SQL操作符
Cross domain error: when allowcredentials is true, allowedorigins cannot contain the special value "*“
瑞芯微RK1126平台 平台移植libevent 交叉编译libevent
c(指针-02)
HelloWorld example of TestNG and how to run it from the command line
Adobe Premiere基础-介绍,配置,快捷键,创建项目,创建序列(一)
c(指针02)
Adobe Premiere foundation - time remapping (10)
Ruixin micro rk1126 platform platform porting libevent cross compiling libevent
Enterprise data quality management: how to evaluate data quality?