index 美化

This commit is contained in:
Yuan Chiu 2020-04-09 23:43:26 +08:00
parent c719ab2d4d
commit 9a84b6a869
3 changed files with 56 additions and 30 deletions

View File

@ -1,18 +1,26 @@
.btn { .btn {
display: inline-block; display: inline-block;
padding: 0.3em; padding: 0.3em 1.3em;
text-decoration: none; text-decoration: none;
font-size: 0.95em; font-size: 0.95em;
font-family: none; font-family: none;
border: 1px black solid; border: 1px black solid;
background: blue; border-radius: 5px;
background: #0e6eff;
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
.btn:hover {
opacity: 0.8;
}
ul.func-btn li { .func-btn li {
display: inline-block;
}
.func-btn form {
display: inline-block; display: inline-block;
} }
@ -38,7 +46,8 @@ html, body {
} }
body { body {
background: red; background: #ffd5d5;
background: linear-gradient(153deg, rgba(255,255,255,1) 0%, rgba(255,213,213,1) 100%);
} }
div#container { div#container {
@ -49,6 +58,7 @@ div#container {
display: block; display: block;
background: white; background: white;
box-shadow: 1px 1px 20px gray;
} }
header h1{ header h1{

View File

@ -20,6 +20,9 @@ $list = $db->getList($page, $list_max_count);
<link rel="stylesheet" href="css/general.css"> <link rel="stylesheet" href="css/general.css">
<title>Document</title> <title>Document</title>
<style> <style>
section, div.func-btn { section, div.func-btn {
margin: 0 auto; margin: 0 auto;
width: 800px; width: 800px;
@ -31,8 +34,14 @@ table {
border-collapse: collapse; border-collapse: collapse;
} }
table thead th{
border-bottom: 2px gray solid;
padding: 0;
}
table tbody th, table tbody td { table tbody th, table tbody td {
border: 1px black solid; border-bottom: 1px gray solid;
padding: 0;
} }
table>tbody th:nth-child(1) { table>tbody th:nth-child(1) {
@ -41,6 +50,7 @@ table>tbody th:nth-child(1) {
table>tbody td:nth-child(2) { table>tbody td:nth-child(2) {
/* width: 100%; */ /* width: 100%; */
text-align: center;
} }
table>tbody td:nth-last-child(2) { table>tbody td:nth-last-child(2) {
width: 9em; width: 9em;
@ -49,9 +59,16 @@ table>tbody td:nth-last-child(1) {
width: 10em; width: 10em;
} }
.table-row-func ul {
padding-left: 0em;
}
div.table-func { div.table-func {
text-align: center; text-align: center;
} }
</style> </style>
</head> </head>
<body> <body>
@ -67,11 +84,6 @@ div.table-func {
</div> </div>
<section> <section>
<!-- 主表格 --> <!-- 主表格 -->
<div class="list-info">
<ul>
<li><?php echo $page.'/'.$max_page ?></li>
</ul>
</div>
<?php <?php
if (count($list) > 0) { if (count($list) > 0) {
echo ' echo '
@ -116,6 +128,7 @@ div.table-func {
<ul> <ul>
<li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.'1'; ?>">|&lt;</a></li> <li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.'1'; ?>">|&lt;</a></li>
<li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.(($page-1)>0?($page-1):1); ?>">&lt;</a></li> <li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.(($page-1)>0?($page-1):1); ?>">&lt;</a></li>
<li><?php echo $page.'/'.$max_page ?></li>
<li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.(($page+1)<$max_page?($page+1):$max_page); ?>">&gt;</a></li> <li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.(($page+1)<$max_page?($page+1):$max_page); ?>">&gt;</a></li>
<li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.$max_page; ?>">&gt;|</a></li> <li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.$max_page; ?>">&gt;|</a></li>
</ul> </ul>

View File

@ -22,30 +22,33 @@ $created_at = $item['created_at'];
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/general.css">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<header> <div id="container">
<h1>留言板 - <?php echo $id; ?></h1> <header>
</header> <h1>留言板 - <?php echo $id; ?></h1>
<div id="main"> </header>
<div class="func-btn"> <div id="main">
<ul> <div class="func-btn">
<li><a href="index.php" class="btn">Index</a></li> <ul>
<li><a href="edit.php?id=<?php echo $id; ?>" class="btn">Edit</a></li> <li><a href="index.php" class="btn">Index</a></li>
<li><form action="save.php" method="post"><input type="hidden" name="id" value="<?php echo $id; ?>"><input type="hidden" name="delete" value="true"><input type="submit" class="btn" value="Delete"></form></li> <li><a href="edit.php?id=<?php echo $id; ?>" class="btn">Edit</a></li>
</ul> <li><form action="save.php" method="post"><input type="hidden" name="id" value="<?php echo $id; ?>"><input type="hidden" name="delete" value="true"><input type="submit" class="btn" value="Delete"></form></li>
</ul>
</div>
<section>
<ul>
<li><?php echo $title; ?></li>
<li><?php echo $content; ?></li>
</ul>
<ul>
<li>最後修改:<?php echo $updated_at; ?></li>
<li>建立時間:<?php echo $created_at; ?></li>
</ul>
</section>
</div> </div>
<section>
<ul>
<li><?php echo $title; ?></li>
<li><?php echo $content; ?></li>
</ul>
<ul>
<li>最後修改:<?php echo $updated_at; ?></li>
<li>建立時間:<?php echo $created_at; ?></li>
</ul>
</section>
</div> </div>
</body> </body>
</html> </html>