This commit is contained in:
vickihe
2019-09-02 21:22:43 +08:00
parent 906e9814e5
commit 2c18a68a80
9 changed files with 156 additions and 57 deletions

View File

@@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="contents_style.css">
</head>
<body>
<table class="room">
<tr>
<td><a href="#">001</a></td>
<td><a href="#">002</a></td>
<td><a href="#">003</a></td>
<td><a href="#">004</a></td>
</tr>
<tr>
<td><a href="#">005</a></td>
<td><a href="#">006</a></td>
<td><a href="#">007</a></td>
<td><a href="#">008</a></td>
</tr>
<tr>
<td><a href="#">009</a></td>
<td><a href="#">010</a></td>
<td><a href="#">011</a></td>
<td><a href="#">012</a></td>
</tr>
<tr>
<td><a href="#">013</a></td>
<td><a href="#">014</a></td>
<td><a href="#">015</a></td>
<td><a href="#">016</a></td>
</tr>
<tr>
<td><a href="#">017</a></td>
<td><a href="#">018</a></td>
<td><a href="#">019</a></td>
<td><a href="#">020</a></td>
</tr>
</table>
</body>
</html>

View File

@@ -1,3 +0,0 @@
.room tr td {
padding: 90px;
}

View File

@@ -4,7 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<title>Old People Home</title>
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon.png">
<link rel="stylesheet" href="firstPage_style.css">
</head>
<body>
@@ -22,7 +23,7 @@
<a href="firstPage.html" id="firstPage">首页</a>
</li>
<li id="self">
<a href="#" id="my">个人</a>
<a href="personal.html" id="my">个人</a>
</li>
</ul>
</div>

View File

@@ -1,7 +1,9 @@
body {
background-color: aliceblue;
background-color: papayawhip;
margin: 0px;
}
/* LOGO */
.box1 {
text-align: left;
position: absolute;
@@ -46,7 +48,6 @@ ul {
margin: 0 0 0 979px;
}
.menu li a {
/* text-indent: -9999px; */
color: white;
text-decoration-line: none;
display: block;
@@ -74,18 +75,21 @@ ul {
width: auto;
height: auto;
/* background-color: yellow; */
margin: 0 0 0 250px;
margin: 0 0 0 210px;
}
.box2 table tr td {
padding: 150px 50px 90px 0;
/* background-color: yellow; */
}
.box2 table tr td a {
color: white;
color: papayawhip;
text-decoration-line: none;
font-size: 14px;
background-image: url("icons/房间.png");
background-repeat: no-repeat;
padding: 110px 90px 20px;
background-position: 38px;
padding: 100px 90px 20px 115px;
background-position: 80px 30px;
background-size: 40%;
}
.box2 table tr td a:hover {
background-image: url("icons/房间light.png");
@@ -94,7 +98,7 @@ ul {
/* 纵向导航栏 */
.guide {
width: 190px;
height: 1300px;
height: 1400px;
background-color: rgba(255, 183, 124, 0.3);
position: absolute;
top: 150px;

BIN
web/icons/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -1,5 +1,5 @@
body {
background-color: aliceblue;
background-color: papayawhip;
margin: 0px;
}
.background_text {

41
web/personal.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Old People Home - 个人中心</title>
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon.png">
<link rel="stylesheet" href="personal_style.css">
</head>
<body>
<div class="box1">
<span class="upper">O</span>
<span class="lower">ld</span>
<span class="upper">P</span>
<span class="lower">eople</span>
<span class="upper">H</span>
<span class="lower">ome</span>
</div>
<div class="menu">
<ul>
<li>
<a href="firstPage.html" id="firstPage">首页</a>
</li>
<li id="self">
<a href="personal.html" id="my">个人</a>
</li>
</ul>
</div>
<div class="background">
<div class="pic">
<a href="#"></a>
</div>
<div class="backgroundText">
<span><h2>管理员</h2></span><br>
<span><p>root</p></span>
</div>
</div>
</body>
</html>

100
web/personal_style.css Normal file
View File

@@ -0,0 +1,100 @@
body {
background-color: papayawhip;
margin: 0px;
}
/* LOGO */
.box1 {
text-align: left;
position: absolute;
top: 30px;
left: 10px;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.upper {
color: rgb(255, 115, 0);
font-weight: bolder;
font-family: sans-serif;
font-size: 45px;
letter-spacing: -10px;
}
.lower {
color: rgb(255, 183, 124);
font-family: sans-serif;
font-size: 45px;
letter-spacing: -5px;
}
/* 横向菜单栏 */
.menu {
width: auto;
height: 50px;
background-color: rgb(255, 183, 124);
margin-top: 100px;
}
ul {
width: auto;
list-style-type: none;
white-space: nowrap;
padding: 0;
}
.menu li {
float: left;
}
.menu li#self {
margin: 0 0 0 995px;
}
.menu li a {
color: white;
text-decoration-line: none;
display: block;
padding: 14px 40px 15px 70px;
}
.menu li a:hover {
background-color: rgba(248, 148, 66, 0.7);
}
.menu ul li a#firstPage {
background-image: url("icons/首页.png");
background-repeat: no-repeat;
background-size: 12%;
background-position: 35px 16px;
}
.menu ul li a#my {
background-image: url("icons/管理员.png");
background-repeat: no-repeat;
background-size: 12%;
background-position: 35px 16px;
}
/* 头像及账号资料 */
.background {
width: 700px;
height: 200px;
background-color: white;
margin: 50px 0 0 280px;
position: absolute;
}
.background .pic {
width: 128px;
height: 128px;
position: relative;
top: 36px;
left: 30px;
}
.background .pic a {
background-image: url("icons/管理员头像.png");
background-repeat: no-repeat;
background-size: 100%;
display: block;
padding: 64px;
}
.background .backgroundText {
position: relative;
top: -100px;
left: 308px;
}