Question

我有2个css文件和一个html文件。页面左侧有一个侧边栏，它与页面的其余部分具有相同的背景颜色。我想要的是侧边栏与页面的其余部分有不同的背景颜色（深灰色），但这不是很有效，可能是因为两个css文件之间存在冲突，但有人可以请帮助我？

changePassAdmin.html

<!DOCTYPE html> 
<html> 
<head> 
<meta charset = "UTF-8"> 
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "sidebar.css">
<title>Change Password</title>
<style>
table { border-collapse: collapse; width: 50%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2}
tr:hover {background-color: #e2f4ff;}
</style>
</head>

<body>

<ul>

<li><a  href=PersonalInfoOutput>View Personal Information</a></li>
<li><a  href=PersonalInfoOutput>View Expense Claims</a></li>
<li><a  href=PersonalInfoOutput>View Payslips</a></li>
<li><a  class=active >Change Password</a></li>
<li><a  href=PersonalInfoOutput>Maintain Employee Information</a></li>
<li><a  href=PersonalInfoOutput>Maintain Tax Information</a></li>
<li><a  href=PersonalInfoOutput>Maintain Payroll Items</a></li>
<li><a  href=PersonalInfoOutput>Maintain Timesheet</a></li>
<li><a  href=PersonalInfoOutput>Maintain Employee Expenses</a></li>
<li><a  href=PersonalInfoOutput>Run Payroll</a></li>
<li><a  href=PersonalInfoOutput>Generate Reports</a></li>

</ul>

<div style=margin-left:25%;padding:1px;>
</div>

    <h1>Change Password</h1>
    <form action ="NewPassword" method = post> 

    <table border ="1"> 

    <tr>
    <td>Existing Password:</td>
    <td><input type = "password" name = "oldpassword" size = "20"></td>
    </tr>

    <tr>
    <td>New Password:</td>
    <td><input type = "password" name = "newpassword" size = "20"></td>
    </tr>

    <tr>
    <td>Confirm New Password</td>
    <td><input type = "password" name = "confirmpassword" size = "20"></td>
    </tr>
    </table>
    <br>
    <br>
    <input type = "submit" value = "Update Password">
    </form>.
</body>

</html>

的main.css

body {
    text-align: center; 
        font-family: "Times New Roman", Times, serif;
        background-color:  #f0f0f4 ;

    }

table { 
    margin: auto; 
    }

input[type=submit] {

  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  overflow: auto;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #0099ff;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;

    }


input[type=text] { 
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px 20px;
  border: 1px solid #b7b7b7;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 18px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #e2f4ff;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

input[type=password] { 
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 10px 20px;
  border: 1px solid #b7b7b7;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 18px/normal "Times New Roman", Times, serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #e2f4ff;
  -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) inset;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

h1 { 

    text-shadow: 0px 0px 3px rgba(0, 76, 255, 0.2);
    color: #0099FF;
    font-size: 43px;
}

sidebar.css

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #4CAF50;
    width: 25%;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

Answer 1

您可以通过更改ul {background-color：＃4CAF50; } element。

要在登录框和侧边栏之间获得一些填充，您可以将登录框代码包装在div中并添加边距。

<div id="container">
    <h1>Change Password</h1>
    <form action ="NewPassword" method = post> 
        <!--FORM DETAILS-->
    </form>
</div>

#container {
  margin-left:200px;
}

作为一般规则，您希望将所有内容包含在至少一个div中。这使您能够执行添加边距和填充等操作。

在你走得太远之前，我建议你看看基本的HTML编码。像桌子和内联样式这样的东西最近被认为不是很好的编码实践。

http://www.w3schools.com/html/html_blocks.asp

将是一个良好的开端。

如何让我的侧边栏具有灰色背景色？

1 个答案: