初步套上CSS

This commit is contained in:
Yuan Chiu 2020-04-09 22:55:02 +08:00
parent 11b00e484b
commit 0ed02cf2c5
4 changed files with 164 additions and 91 deletions

67
htdocs/css/general.css Normal file
View File

@ -0,0 +1,67 @@
.btn {
display: inline-block;
padding: 0.3em;
text-decoration: none;
font-size: 0.95em;
font-family: none;
border: 1px black solid;
background: blue;
color: white;
cursor: pointer;
}
ul.func-btn li {
display: inline-block;
}
.table-func ul li{
display: inline-block;
padding: 0.5em;
}
.table-func ul li a{
text-decoration: none;
}
.table-row-func li{
display: inline-block;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
background: red;
}
div#container {
margin: 0 auto;
padding: 1rem;
width: 960px;
height: 100%;
display: block;
background: white;
}
header h1{
text-align: center;
}
div#main {
margin-top: 2rem;
}
.func-btn {
text-align: right;
}
.func-btn>ul li{
display: inline;
}

View File

View File

@ -25,41 +25,44 @@ else {
<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>留言板 編輯</h1> <header>
</header> <h1>留言板 編輯</h1>
<div id="main"> </header>
<section> <div id="main">
<form action="save.php" method="POST"> <section>
<?php <form action="save.php" method="POST">
if (!empty($id)) { <?php
echo '<input type="hidden" name="id" value="'.$id.'">'; if (!empty($id)) {
} echo '<input type="hidden" name="id" value="'.$id.'">';
?> }
<ul> ?>
<li> <ul>
<label> <li>
<span>Title: </span> <label>
<input type="text" name="title" value="<?php echo $title; ?>" required /> <span>Title: </span>
<strong><abbr title="required">*</abbr></strong> <input type="text" name="title" value="<?php echo $title; ?>" required />
</label> <strong><abbr title="required">*</abbr></strong>
</li> </label>
<li> </li>
<label> <li>
<span>Content: </span> <label>
<textarea name="content"><?php echo $content; ?></textarea> <span>Content: </span>
</label> <textarea name="content"><?php echo $content; ?></textarea>
</li> </label>
</ul> </li>
<ul> </ul>
<li><input type="submit" class="btn" value="儲存"></li> <ul class="func-btn">
<li><input type="reset" class="btn" value="回復"></li> <li><input type="submit" class="btn" value="儲存"></li>
</ul> <li><input type="reset" class="btn" value="回復"></li>
</form> </ul>
</section> </form>
</section>
</div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -17,74 +17,77 @@ $list = $db->getList($page, $list_max_count);
<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>留言板</h1> <header>
</header> <h1>留言板</h1>
<div id="main"> </header>
<div class="func-btn"> <div id="main">
<ul> <div class="func-btn">
<li><a href="edit.php" class="btn">New</a></li>
</ul>
</div>
<section>
<!-- 主表格 -->
<div class="list-info">
<ul> <ul>
<li><?php echo $page.'/'.$max_page ?></li> <li><a href="edit.php" class="btn">New</a></li>
</ul> </ul>
</div> </div>
<?php <section>
if (count($list) > 0) { <!-- 主表格 -->
echo ' <div class="list-info">
<table> <ul>
<thead> <li><?php echo $page.'/'.$max_page ?></li>
<tr> </ul>
<th>id</th> </div>
<th>title</th> <?php
<th>updated_at</th> if (count($list) > 0) {
<th>action</th>
</tr>
</thead>
<tbody>
';
foreach ($list as $key => $item) {
echo ' echo '
<tr> <table>
<th>'.$item['id'].'</th> <thead>
<td>'.$item['title'].'</td> <tr>
<td>'.$item['updated_at'].'</td> <th>id</th>
<td> <th>title</th>
<ul> <th>updated_at</th>
<li><a href="edit.php?id='.$item['id'].'" class="btn">Edit</a></li> <th>action</th>
<li><form action="save.php" method="post"><input type="hidden" name="id" value="'.$item['id'].'"><input type="hidden" name="delete" value="true"><input type="submit" class="btn" value="Delete"></form></li> </tr>
</ul> </thead>
</td> <tbody>
</tr> ';
foreach ($list as $key => $item) {
echo '
<tr>
<th>'.$item['id'].'</th>
<td>'.$item['title'].'</td>
<td>'.$item['updated_at'].'</td>
<td class="table-row-func">
<ul>
<li><a href="edit.php?id='.$item['id'].'" class="btn">Edit</a></li>
<li><form action="save.php" method="post"><input type="hidden" name="id" value="'.$item['id'].'"><input type="hidden" name="delete" value="true"><input type="submit" class="btn" value="Delete"></form></li>
</ul>
</td>
</tr>
';
}
echo '
</tbody>
</table>
'; ';
} }
else {
echo ' echo '無資料';
</tbody> }
</table> ?>
'; <div class="table-func">
} <ul>
else { <li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.'1'; ?>">|&lt;</a></li>
echo '無資料'; <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)<$max_page?($page+1):$max_page); ?>">&gt;</a></li>
?> <li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.$max_page; ?>">&gt;|</a></li>
<div class="table-func"> </ul>
<ul> </div>
<li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.'1'; ?>">|&lt;</a></li> </section>
<li><a href="<?php echo $_SERVER['SCRIPT_NAME'].'?p='.(($page-1)>0?($page-1):1); ?>">&lt;</a></li> </div>
<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>
</ul>
</div>
</section>
</div> </div>
</body> </body>
</html> </html>