初步套上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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/general.css">
<title>Document</title>
</head>
<body>
<header>
<h1>留言板 編輯</h1>
</header>
<div id="main">
<section>
<form action="save.php" method="POST">
<?php
if (!empty($id)) {
echo '<input type="hidden" name="id" value="'.$id.'">';
}
?>
<ul>
<li>
<label>
<span>Title: </span>
<input type="text" name="title" value="<?php echo $title; ?>" required />
<strong><abbr title="required">*</abbr></strong>
</label>
</li>
<li>
<label>
<span>Content: </span>
<textarea name="content"><?php echo $content; ?></textarea>
</label>
</li>
</ul>
<ul>
<li><input type="submit" class="btn" value="儲存"></li>
<li><input type="reset" class="btn" value="回復"></li>
</ul>
</form>
</section>
<div id="container">
<header>
<h1>留言板 編輯</h1>
</header>
<div id="main">
<section>
<form action="save.php" method="POST">
<?php
if (!empty($id)) {
echo '<input type="hidden" name="id" value="'.$id.'">';
}
?>
<ul>
<li>
<label>
<span>Title: </span>
<input type="text" name="title" value="<?php echo $title; ?>" required />
<strong><abbr title="required">*</abbr></strong>
</label>
</li>
<li>
<label>
<span>Content: </span>
<textarea name="content"><?php echo $content; ?></textarea>
</label>
</li>
</ul>
<ul class="func-btn">
<li><input type="submit" class="btn" value="儲存"></li>
<li><input type="reset" class="btn" value="回復"></li>
</ul>
</form>
</section>
</div>
</div>
</body>
</html>

View File

@ -17,74 +17,77 @@ $list = $db->getList($page, $list_max_count);
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/general.css">
<title>Document</title>
</head>
<body>
<header>
<h1>留言板</h1>
</header>
<div id="main">
<div class="func-btn">
<ul>
<li><a href="edit.php" class="btn">New</a></li>
</ul>
</div>
<section>
<!-- 主表格 -->
<div class="list-info">
<div id="container">
<header>
<h1>留言板</h1>
</header>
<div id="main">
<div class="func-btn">
<ul>
<li><?php echo $page.'/'.$max_page ?></li>
<li><a href="edit.php" class="btn">New</a></li>
</ul>
</div>
<?php
if (count($list) > 0) {
echo '
<table>
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>updated_at</th>
<th>action</th>
</tr>
</thead>
<tbody>
';
foreach ($list as $key => $item) {
<section>
<!-- 主表格 -->
<div class="list-info">
<ul>
<li><?php echo $page.'/'.$max_page ?></li>
</ul>
</div>
<?php
if (count($list) > 0) {
echo '
<tr>
<th>'.$item['id'].'</th>
<td>'.$item['title'].'</td>
<td>'.$item['updated_at'].'</td>
<td>
<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>
<table>
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>updated_at</th>
<th>action</th>
</tr>
</thead>
<tbody>
';
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>
';
}
echo '
</tbody>
</table>
';
}
else {
echo '無資料';
}
?>
<div class="table-func">
<ul>
<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)<$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>
else {
echo '無資料';
}
?>
<div class="table-func">
<ul>
<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)<$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>
</html>