Question

这是我的代码。它以HTML开头，另一半是CSS。

<!DOCTYPE html>
<html>
    <head>
            <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <title>
Home - Hasan's Website
        </title>
    </head>
    <body>
        <div class="navigation">
            <a class="active" href = "#home">Home</a>
            <a href="#aboutMe">About Me</a>
            <a href="#careers">Careers</a>
            <a href="#contactUs">Contact Us</a>
            <a href="#webDev">Web Development</a>
        </div>

    <div class="intro">
        <h1>Computer Engineering</h1>

    </div>




    </body>
</html>



    body, html{
    height:100%;
    margin:0;
    font-size:16px;
    font-family:"Lato", sans-serif;
    font-weight:400;
    line-height:1.8em;

}
.navigation {
    background-color: #330;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto auto auto auto auto;

}

.navigation a {

    font-size: 20px;
    text-decoration: none;
    color: #f2f2f2;
    text-align: center;
    float: left;

}

.navigation a:hover {
    background-color: #dddddd;
    color: black;
}

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

body {

    background-image: url("Engineering.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5);

}

h1 {

    margin: auto;
    z-index: 4;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 100px;
    padding: 10px;



}

我真的需要帮助将“计算机工程”标题放在背景图像的中心，并且我还希望在其后面有一个颜色条。谁能帮帮我吗？这些东西明天到期！

Answer 1

在巨型CS中添加条形图地址。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <title>
    Home - Hasan's Website
  </title>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
      font-size: 16px;
      font-family: "Lato", sans-serif;
      font-weight: 400;
      line-height: 1.8em;
    }
    
    .jumbotron {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-image: url(gg.jpg);
      background-position: 0% 25%;
      background-size: cover;
      background-repeat: no-repeat;
      border: 1px;
    }
    
    .navigation {
      background-color: #330;
      overflow: hidden;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
    }
    
    .navigation a {
      font-size: 20px;
      text-decoration: none;
      color: #f2f2f2;
      text-align: center;
      float: left;
    }
    
    .navigation a:hover {
      background-color: #dddddd;
      color: black;
    }
    
    .navigation a.active {
      background-color: #4CAF50;
      color: white;
    }
    
    body {
      background-image: url("Engineering.jpg");
      background-repeat: no-repeat;
      background-position: center top;
      background-size: cover;
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    h1 {
      margin: auto;
      z-index: 4;
      text-align: center;
      width: 100%;
      color: white;
      font-size: 100px;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div class="navigation">
    <a class="active" href="#home">Home</a>
    <a href="#aboutMe">About Me</a>
    <a href="#careers">Careers</a>
    <a href="#contactUs">Contact Us</a>
    <a href="#webDev">Web Development</a>
  </div>

  <div class="intro">
    <div class="jumbotron">
      <h1>Computer Engineering</h1>

    </div>


  </div>




</body>

</html>

如何将标题居中放置并在其后面放置一个颜色条？

1 个答案: