我创建了学校总统投票系统。
但我想通过设置我的网站样式来改善用户界面。
在我的管理员视图中，有许多代码需要显示，因此有时我需要向下滚动。
这是我的administrator.php的代码，我有一个名为“header”的头文件。
即使我向下滚动这个“标题”，我也希望如此。
如果您希望在浏览器上试用所有文件，我可以上传到互联网;只是评论。
<?php
require_once('admin-auth.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="SHORTCUT ICON" href="images/log.png">
<title>DSI Voting System</title>
<style>
#tbl
{
font-family: Tahoma, Geneva, sans-serif;
border-collapse: collapse;
margin-bottom: 20px;
width: 885px;
}
#tbl td, #tbl th
{
font-size: 11px;
border: 1px solid #094f4b;
padding: 3px 7px 2px 7px;
background-color: #ffffff;
color: #4b4b4b;
font-family: Tahoma, Geneva, sans-serif;
}
#tbl th
{
font-size: 14px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #116763;
color: #ffffff;
}
</style>
</head>
<body>
<div id="header">
<div id="bar">
<div style="width:900px; margin:auto; padding-top:8px;">
<img src="img/aclc-logo.png" /></div>
</div>
<div id="subbar">
<table style="padding-top:80px; width:890px; margin:auto; text-align:right;">
<tr>
<td id="bold" style="color:#FFF; padding-left:10px;">
<a href="administrator.php">Passcodes</a> | <a href="generating.php">Election Results</a> | <a href="print.php">Save/Print</a> | <a href="admin-logout.php">Logout</a>
</td>
</tr>
</table>
</div>
</div>
<div id="content">
<center>
<div id="scroll">
<table style="margin-top:0px;">
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:16px; padding-bottom:10px;"><b>ADMINISTRATOR</b></td>
</tr>
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#116763;"><a href="registered.php"><b style="color:#116763;">Generate New Passcode</b></a></td></tr>
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#116763;"><a href="registerednumber.php"><b style="color:#116763;">Generate New 5 Passcodes at once</b></a></td></tr>
<tr>
<td colspan="2" style="font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#116763;"><a href="registerednumber2.php"><b style="color:#116763;">Generate New 10 Passcodes at once</b></a></td></tr>
<tr>
<td colspan="2">
<?php
// Databse connection
include_once 'config.php';
// Connect to MySQL server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}
// Select database
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}
// Create query
$row="SELECT * FROM registered";
$result=mysql_query($row);
echo "<table id='tbl'>
<tr>
<th width='60'>Number</th>
<th>Generated Password</th>
<th>Full Name</th>
<th>Signature</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td><b>" . $row['id'] . "</b></td>";
echo "<td><b style='color:red;'>" . $row['voters'] . "</b></td>";
echo "<td><b style='color:red;'></b></td>";
echo "<td><b style='color:red;'></b></td>";
echo "</tr>";
}
echo "</table>";
mysql_close($link);
?>
</td>
</tr>
</table>
</div>
</center>
</div>
<div id="footer">
Ozan Kurt Voting System © 2014
</div>
</body>
</html>
这是我的CSS文件代码：
@charset "utf-8";
/* CSS Document */
*
{
padding: 0px;
margin: 0px;
}
html, body
{
background-color: #edf0f5;
}
#bar
{
background-image: url(../images/feln-crowd.png);
height: 80px;
width: 100%;
-moz-box-shadow: 0px 0px 1px #005073;
-webkit-box-shadow: 0px 0px 1px #005073;
box-shadow: 0px 0px 1px #005073;
padding: 0px;
border-bottom: 1px solid #0c0d0a;
position: absolute;
}
#subbar
{
background-image: url(../images/feln-crowd.png);
height: 100px;
width: 100%;
}
#header {
position: fixed;
top: 0px;
width: 100%;
}
#content
{
width: 100%;
height: auto;
margin-bottom: 5px;
}
#textbox
{
background: #FFC;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 5px;
width: 250px;
font-family: Tahoma, Geneva, sans-serif;
}
#dropdown
{
background: #116763;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
padding: 10px;
width: 250px;
font-family: Tahoma, Geneva, sans-serif;
color: #FFF;
}
#button
{
background: #116763;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
outline: none;
width: 77px;
font-family: Tahoma, Geneva, sans-serif;
color: #FFFFFF;
font-weight: bold;
padding: 3px;
margin-bottom: 5px;
cursor: pointer;
}
#scroll
{
width: 900px;
height: auto;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
background-color: #edf0f5;
text-align: left;
padding-left: 10px;
padding-top: 10px;
}
#bold
{
font-weight: bold;
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
color: #116763;
}
a:link {color: #fff; text-decoration: none}
a:visited {color: #fff;}
a:hover { text-decoration: none; color: #ccc;}
a:active {color: #3b5998;text-decoration: fff}
#footer
{
background: #edf0f5;
height: 20px;
width: 900px;
color: #116763;
margin: auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: right;
}
h3, li
{
color: #116763;
}
答案 0 :(得分：1)
尝试添加：
position: fixed;
这将确保它停留在您网站的同一位置。
然后您可以使用
top: 0px;
例如，将其定位在正确的位置
答案 1 :(得分：0)
这很简单 - 只需添加位置：固定和顶部0px到你的元素。像这样：
#bar
{
background-image:url(../images/feln-crowd.png);
height:80px;
width:100%;
-moz-box-shadow:0px 0px 1px #005073;
-webkit-box-shadow:0px 0px 1px #005073;
box-shadow:0px 0px 1px #005073;
padding:0px;
border-bottom:1px solid #0c0d0a;
position: fixed;
top: 0px;
}