我目前正在开发一个供私人使用的博客,并且已经达到了核心博客可以正常工作的地步,避免了一个使它看起来不整洁的美学问题。
主页有两个主要部分: 带有标题和菜单子元素的固定标题。一个 PHP 生成的表格,显示来自 sql 数据库的帖子。
问题是,当向下滚动页面时,标题是为了与表格重叠并保持在顶部以保持整洁,尽管我无法让它这样做。
这是当时写的内容,你能告诉我你的想法和我的问题的可能解决方案吗?
PHP 在表格中显示 sql 结果:
<div id="cwrapper" style="margin:0px auto; margin-top:125px; margin-bottom:25px; width:600px; height:auto; border-top:1px solid #1E1E1E; border-bottom:1px solid #1E1E1E; z-index:-1;">
<?php
$con = mysqli_connect("localhost","root","","db_posts");
// Check connection
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM tb_posts ORDER BY id DESC LIMIT 3");
echo "<table cellpadding='0' cellspacing='0' border='0' id='posttable' style='z-index:-1;'>";
while($row = mysqli_fetch_array($result)){
echo "<tr><td class='postcell' style='z-index-1;'>" . $row['post'] . "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>
</div>
固定页眉:
<div id="header">
<div id="styletext">
<h1 id="headtext">
TheNotsoGentleman
<a href="newpost.php" style="text-decoration:none; color:#000; margin-left:-15px;">.</a>
</h1>
</div>
<div id="menu" style="position:fixed; top:25px; right:20px;">
<ul>
<li class="menuitem"><a href="index.php" class="menutext">Blog</a></li>
<li class="menuitem"><a href="info.php" class="menutext">Info</a></li>
<li class="menuitem"><a href="downloads.php" class="menutext">Downloads</a></li>
</ul>
</div>
</div>
造型:
#header{
position:fixed;
left:0px;
top:0px;
height:75px;
width:100%;
background-image:url(../assets/pictures/trinet_background.png);
background-repeat:repeat;
border-bottom:1px outset #666;
box-shadow: 0px 7px 8px #888888;
}
#styletext{
position:fixed;
top:5px;
left:10px;
width:auto;
height:auto;
min-height:30px;
}
#headtext{
font-family:official;
font-size:42px;
font-style:bold;
font-weight:normal;
text-align:center;
}
#posttable{
width:600px;
height:auto;
margin-top:10px;
margin-bottom:10px;
z-index:-1;
}
.postcell{
width:600px;
height:auto;
padding-bottom:20px;
padding-top:20px;
padding-left:5px;
padding-right5px;
border-bottom:1px dashed #333;
opacity:0.5;
-webkit-transition:linear 0.2s;
-moz-transition:linear 0.2s;
-o-transition:linear 0.2s;
transition:linear 0.2s;
z-index:-1;
}
.postcell:hover{
opacity:1;
z-index:-1;
}
#newpost{
position:fixed;
top:100px;
left:100px;
height:500px;
width:500px;
background-color:#FFF;
border:1px solid #000;
visibility:visible;
z-index:-1;
}
.menuitem{
text-decoration:none;
list-style:none;
color:#000;
display:inline-block;
margin-right:20px;
}
.menutext{
text-decoration:none;
color:#999;
font-size:24px;
font-family:monospace;
-webkit-transition:linear 0.6s;
-moz-transition:linear 0.6s;
-o-transition:linear 0.6s;
transition:linear 0.6s;
}
.menutext:hover{
color:#000;
}
提前感谢您的任何帮助/建议。