为什么我< h1>的标签在css中没有很好的响应

zpf6vheq  于 2023-01-03  发布在  其他
关注(0)|答案(5)|浏览(197)

基本上这就是代码。
CSS

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background: url(smoky.jpg) no-repeat;
background-size:cover;
}

.login-box{
  width:280px;
  position:absolute;
  top:50%;
  left:50%;
  transform :translate(-50%,-50%);
  color:white;  
}
 .login-box h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;

}

超文本标记语言

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Transparent Login Form</title>
    <link rel="stylesheet" href="style2.css">

  </head>
  <body>

    <div class="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <input type="text" placeholder="Username" name="" value="">
      </div>

<div class="textbox">

<input type="password" placeholder="Password" name="" value="">

</div>

<input class="btn" type="button" name="" value="Sign in">

</div>

  

  </body>
</html>

你知道为什么h1不接受css吗?
我不明白为什么这里要用float,它不就是用来对齐图片和文字的吗
链接到我正在学习的视频from.https://www.youtube.com/watch?v=ooc6f1w6Mzg&t=54s

f4t66c6m

f4t66c6m1#

CSS正在运行,如果在您的浏览器中不运行,请重新加载或重新启动服务器

* {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background: url(smoky.jpg) no-repeat;
      background-size: cover;
    }
    
    .login-box {
      width: 280px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
    }
    h1 {
      float: left;
      font-size: 40px;
      color: red;
      border-bottom: 6px solid;
    }
bxjv4tth

bxjv4tth2#

在css中使用〉作为子元素。
例如。

.login-box > h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;
}
nbnkbykc

nbnkbykc3#

检查此行,样式表已正确链接
链接rel=“样式表”href=“样式2.css”

txu3uszq

txu3uszq4#

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: url(smoky.jpg) no-repeat;
  background-size: cover;
}

.login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
}
.login-box > h1 {
  float: left;
  font-size: 40px;
  border-bottom: 6px solid;
  color: brown;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <div class="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <input type="text" placeholder="Username" name="" value="">
      </div>

      <div class="textbox">

      <input type="password" placeholder="Password" name="" value="">

      </div>

      <input class="btn" type="button" name="" value="Sign in">

      </div>
  </body>
</html>
8yoxcaq7

8yoxcaq75#

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background: url(smoky.jpg) no-repeat;
background-size:cover;
}

.login-box{
  width:280px;
  position:absolute;
  top:50%;
  left:50%;
  transform :translate(-50%,-50%);
  color:white;  
}
 .login-box ,h1{
  float:left;
  font-size:40px;
  border-bottom: 6px solid;

}

hello sir here we should use the coma "," for the middle of login-box and the h1 tag
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <div class="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <input type="text" placeholder="Username" name="" value="">
      </div>

      <div class="textbox">

      <input type="password" placeholder="Password" name="" value="">

      </div>

      <input class="btn" type="button" name="" value="Sign in">

      </div>
  </body>
</html>

相关问题