php - 我如何专门为这个 id 和另一个 id 使用填充？

标签 php html css

Image of the Issue

大家好，显然我在填充方面有问题，我一直在尝试填充“欢迎，Motalvinl”下方的顶部黑色大箭头，而不是包含“文件，...”的表格，你们有没有这样做的方法？我实际上目前在表格“文件，...”的填充下，我希望只是在“欢迎，Motalvinl”下方填充。当然，我不希望我的表格位于底部箭头下方，我希望它仍位于网页中间，我只想更改“欢迎，Motalvinl”下大黑箭头的填充。谢谢你们的帮助!非常感谢!

这些是我的代码

<?php 
include_once 'db.php'; //Establishing connection with our database
include_once 'https.php';
include_once 'secure_session_start.php';


secure_session_start(); //Start session
?>

<!DOCTYPE html>
<html>
<head>

<!-- Popup box to confirm logout  -->
<script>
    function Confirmlogout()
    {
      var x = confirm("Are you sure you want log out?");
      if (x)
          return true;
      else
        return false;
    }
</script> 

<!-- Webpage information -->
    <title>Firewall Rule Review System</title>
    <meta name="author" content="your name" />
    <meta name="description" content="" />  
    <link rel="stylesheet" href="indexstyle.css" type="text/css" />

<style>

<!-- Table format --> 

div.container{

    width:98%;
    margin:1%;
    overflow: auto;
}
table, th, td {
    border: 1px solid white;
    border-collapse: collapse;
    margin:auto;
    z-index: 100;
    width:600px;
}
th, td {
    padding: 5px;
    text-align: center;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    width:100px;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th {
    background-color: black;
    color: white;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0rem;
  background-color: #efefef;
  text-align: center;
}

</style>
</head>
<body>
<!-- Webpage Content-->
    <div id="page">
        <div id="logo">
            <h1><a href="#"><b>Firewall Rule Review System</b></a></h1>
            <h2><b><?php echo 'Welcome, '.$_SESSION['usern'];?></b></h2>
        </div>

        <div id="nav">
            <ul>
                <li class="red"><a href="#/about.html"><b>About</b></a></li>
                <li class="orange"><a href="#/contact.html"><b>Contact</b></a></li>
                <li class="blue"><a href="logout.php" onclick="return Confirmlogout();"><b>Logout</b></a></li>
            </ul>   
        </div>

        <html>
            <div class ="container">
                <table id="t01">
                <tr>
                    <th>File</th>
                    <th>Size</th> 
                    <th>Upload-DateTime</th>
                    <th>Action</th>
                </tr>
                <tr>
                </tr>
                </table>
            </div>
        </html>

        <div class="point-top"></div>

            <div class="triangles-menu">
                <a href="HOMEPAGE LINK HERE">Home</a>
                <a href="uploadfilepg.php" name="uploadfile"> Upload File</a>
                <a href="filerecords.php">File Records</a>
                <a href="LINK HERE">Change Password</a>
            </div>


        <div class="point-bottom"></div> </div>

    <!-- End Page Content -->
    <div class="footer">
    <p>
        Testing
    </p>
</div>
</body>
</html>

我希望它看起来像这样 Perfect Solution

这是我的 Css!

/*
* multi-line comment
*/
p{ line-height: 1em; }
h1, h2, h3, h4{
    color: black;
    font-weight: normal;
    line-height: 1.1em;
    margin: 0 0 .5em 0;
}
h1{ font-size: 1.7em; }
h2{ font-size: 1.5em; }
a{
    color: black;
    text-decoration: blink;
}
    a:hover,
    a:active{ text-decoration: blink; }

body{
    font-family: arial; font-size: 80%; line-height: 1.2em; width: 100%; margin: 0; background: #eee;
    font-weight: normal;
}
/* you can but your code all in one line like above */
#page{ margin: 20px; }

/* or on different lines like below */
#logo{
    width: 35%;
    margin-top: 5px;
    font-family: arial;
    display: inline-block;
}
/* but try and be as consist possible */
#nav{
    width: 60%;
    display: inline-block;
    text-align: right;
    float: right;
}
    #nav ul{}
        #nav ul li{
            display: inline-block;
            height: 62px;
        }
            #nav ul li a{
                padding: 20px;
                background: red;
                color: #000000;
            }
            #nav ul li a:hover{
                background-color: #ff8000;
                box-shadow: 0px 1px 1px #666;
            }
            #nav ul li a:active{ background-color: #ff8f00; }
                #nav ul li.red a{
                    background-color: red;
                }
                #nav ul li.orange a{
                    background-color: orange;
                }
                #nav ul li.blue a{
                    background-color: #0080ff;
                }

#content{
    margin: 30px 0;
    background: white;
    padding: 20px;
    clear: both;
}
#footer{
    border-bottom: 1px #ccc solid;
    margin-bottom: 10px;
}
    #footer p{
        text-align: right;
        text-transform: uppercase;
        font-size: 80%;
        color: grey;
    }

/* multiple styles seperated by a , */
#content,
ul li a{ box-shadow: 0px 1px 1px #999; }

/* User Login Page */

.point-top,
.point-bottom {
    width: 0;
    height: 0;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;
}

.point-top {
  border-bottom: 50px solid black;
  border-top: 0;
  padding-top: 2em; 
}

.point-bottom {
  border-top: 50px solid black;
  border-bottom: 0;
}

.triangles-menu {
  background-color: #d5d2d5;
  width: 150px;
  padding-bottom: 1em;
}

.triangles-menu a {
  display: block;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 100;
  font-size: 1.5em;
  color: black;
  text-align: center;
  text-decoration: none;
  margin-bottom: 2em;
}


.triangles-menu a:first-of-type { 
  padding-top: 1em;
  text-decoration: underline;
}

.triangles-menu a:hover {
  font-weight: bold;
}

.testingPhase {
    margin-left: auto;
    margin-right: auto;
    width: 6em;
}

/* Table */

最佳答案

我在这里编辑并提供了您的 HTML 和 CSS 代码。

看看那个，看看它是不是你想要的？

div.container {
  width: 98%;
  margin: 1%;
  overflow: auto;
}
table,
th,
td {
  border: 1px solid white;
  border-collapse: collapse;
  margin: auto;
  z-index: 100;
  width: 600px;
}
th,
td {
  padding: 5px;
  text-align: center;
}
table#t01 tr:nth-child(even) {
  background-color: #eee;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  background-color: black;
  color: white;
}
.footer {
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0rem;
  background-color: #efefef;
  text-align: center;
}
p {
  line-height: 1em;
}
h1,
h2,
h3,
h4 {
  color: black;
  font-weight: normal;
  line-height: 1.1em;
  margin: 0 0 .5em 0;
}
h1 {
  font-size: 1.7em;
}
h2 {
  font-size: 1.5em;
}
a {
  color: black;
  text-decoration: blink;
}
a:hover,
a:active {
  text-decoration: blink;
}
body {
  font-family: arial;
  font-size: 80%;
  line-height: 1.2em;
  width: 100%;
  margin: 0;
  background: #eee;
  font-weight: normal;
}
/* you can but your code all in one line like above */

#page {
  margin: 20px;
}
/* or on different lines like below */

#logo {
  width: 35%;
  margin-top: 5px;
  font-family: arial;
  display: inline-block;
}
/* but try and be as consist possible */

#nav {
  width: 60%;
  display: inline-block;
  text-align: right;
  float: right;
}
#nav ul {} #nav ul li {
  display: inline-block;
  height: 62px;
}
#nav ul li a {
  padding: 20px;
  background: red;
  color: #000000;
}
#nav ul li a:hover {
  background-color: #ff8000;
  box-shadow: 0px 1px 1px #666;
}
#nav ul li a:active {
  background-color: #ff8f00;
}
#nav ul li.red a {
  background-color: red;
}
#nav ul li.orange a {
  background-color: orange;
}
#nav ul li.blue a {
  background-color: #0080ff;
}
#content {
  margin: 30px 0;
  background: white;
  padding: 20px;
  clear: both;
}
#footer {
  border-bottom: 1px #ccc solid;
  margin-bottom: 10px;
}
#footer p {
  text-align: right;
  text-transform: uppercase;
  font-size: 80%;
  color: grey;
}
/* multiple styles seperated by a , */

#content,
ul li a {
  box-shadow: 0px 1px 1px #999;
}
/* User Login Page */

.point-top,
.point-bottom {
  width: 0;
  height: 0;
  border-right: 75px solid transparent;
  border-left: 75px solid transparent;
}
.point-top {
  border-bottom: 50px solid black;
  border-top: 0;
  padding-top: 2em;
}
.point-bottom {
  border-top: 50px solid black;
  border-bottom: 0;
}
.triangles-menu {
  background-color: #d5d2d5;
  width: 150px;
  padding-bottom: 1em;
}
.triangles-menu a {
  display: block;
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 100;
  font-size: 1.5em;
  color: black;
  text-align: center;
  text-decoration: none;
  margin-bottom: 2em;
}
.triangles-menu a:first-of-type {
  padding-top: 1em;
  text-decoration: underline;
}
.triangles-menu a:hover {
  font-weight: bold;
}
.testingPhase {
  margin-left: auto;
  margin-right: auto;
  width: 6em;
}
<div id="page">
  <div id="logo">
    <h1><a href="#"><b>Firewall Rule Review System</b></a></h1>
    <h2><b>Welcome ...</b></h2>
  </div>

  <div id="nav">
    <ul>
      <li class="red"><a href="#"><b>About</b></a>
      </li>
      <li class="orange"><a href="#"><b>Contact</b></a>
      </li>
      <li class="blue"><a href="#"><b>Logout</b></a>
      </li>
    </ul>
  </div>
  <div class="point-top"></div>

  <div class="triangles-menu">
    <a href="#">Home</a>
    <a href="#" name="uploadfile"> Upload File</a>
    <a href="#">File Records</a>
    <a href="#">Change Password</a>
  </div>


  <div class="point-bottom"></div>
  <div class="container">
    <table id="t01">
      <tr>
        <th>File</th>
        <th>Size</th>
        <th>Upload-DateTime</th>
        <th>Action</th>
      </tr>
      <tr>
      </tr>
    </table>
  </div>
</div>

<!-- End Page Content -->
<div class="footer">
  <p>
    Testing
  </p>
</div>

关于php - 我如何专门为这个 id 和另一个 id 使用填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41311518/

上一篇：html - IE相当于-webkit-appearance？

下一篇：html - CSS如何将固定菜单添加到视差网站布局

相关文章：

PHP fatal error 帮助

css - 如何设置溢出并可以与触摸一起使用(手机)

javascript - 想根据登录 ID 申请 If 条件

html - 为什么我的列表没有水平对齐？

php - 如何在 PHP 函数中将 While 循环中的 mysqli_fetch_assoc 作为变量返回？

php - PDO fetchAll() 返回空数组

php - 进行变音符号敏感搜索

jquery - 更改 <mark> 标签的背景颜色以模仿 CTRL+F 功能

html - 谷歌浏览器在使用 <embed> 和 PDF 文件时提示闪存

javascript - 在各种浏览器中使用 javascript 在客户端读取文件内容

©2024 IT工具网  联系我们