个人中心
gpt4 book ai didi

html - 我希望我的表格在右侧，在第二个表格上透明

转载 作者：行者123 更新时间：2023-11-28 07:39:21 24 4
gpt4 key购买 nike

请看一下我的代码我变得双透明这在我后面看起来很尴尬注册表单，我也想要最右边的两种形式谢谢这是我的代码。我希望我的问题已得到理解。

如果有人能帮助我，我会很高兴。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>login Page</title>

        <!-- Stylesheet -->
        <link href="css/styles.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
      <div class="font-welcome">
      <h1> Welcome to Site.</h1>
      <p>Connect with the MarketPlace and other fascinating people.
      </p>
      <div class="loginform cf">
      <form class="form signin" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="yourname@email.com" name="usermail">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <button class="loginbtn" type="submit">
                Log in
              </button>
              <div class="remember-forgot">
          <label class="t1-label remember">
            <input type="checkbox" checked="checked" name="remember_me" value="1">
            <span>Remember me</span>
          </label>
          <span class="separator">·</span>
          <a href="/account/begin_password_reset" class="forgot">Forgot password?</a>
        </div>
    </form>
    </div>
      <div class="signup cf">
      <form class="signup" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="name@email.com" name="email">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <select class="selector" required>
    <option value="">Please select</option>
    <option value="Individual">Individual</option>
    <option value="Business">Business</option>
    </select>
            <button class="loginbtn" type="submit">
                sign up
              </button>
        </div>
    </form>
    </body>
    </html>

这是我的 CSS 样式表。

@import url("http://fonts.googleapis.com/css?family=Oswald:400,700");

html {
     background: rgba(0, 0, 0, 0) url("../images/bg.jpg") repeat scroll center top / 100% auto;
     font-size: 10pt;
}

h1 {
     color: white;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

label {
     color: #999999;
     display: block;
     font-family: "Oswald",sans-serif;
     font-size: 25px;
}

.loginform {
     background-color: rgba(250, 250, 250, 0.5);
     border-radius: 5px;
     border: 1px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
     margin: 50px auto;
     padding: 25px;
     width: 410px;
}

h2 {
     color: #066a75;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     text-align: center;
}

.signup { background-color: rgba(250, 250, 250, 0.5);
     border-radius: 5px;
     border: 1px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
     margin-left: 230px;
     width: 410px;
}

p {
     color: white;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

.loginbtn {
     color: black;
     display: block;
     font-family: "Oswald",sans-serif;
     margin: 5px;
     text-decoration: none;
}

最佳答案

这里是您完整的 css 和 html。我已经按照你的修改了。

JsFiddle Fiddle 

@import url("http://fonts.googleapis.com/css?family=Oswald:400,700");

html {
     background: rgba(0, 0, 0, 0) url("../images/bg.jpg") repeat scroll center top / 100% auto;
     font-size: 10pt;
}

h1 {
     color: black;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

label {
     color: #999999;
     display: block;
     font-family: "Oswald",sans-serif;
     font-size: 25px;
}

.loginform {
       background-color: rgba(250, 250, 250, 0.5);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
  margin: 50px auto;
  padding: 25px;
  width: 410px;
  float: right;
  clear: right;
}

h2 {
     color: #066a75;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     text-align: center;
}

.signup { background-color: rgba(250, 250, 250, 0.5);
  border-radius: 5px;
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
  /* margin-left: 230px; */
  width: 410px;
  float: right;
  clear: right;
  padding: 25px;
}

p {
     color: black;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

.loginbtn {
     color: black;
     display: block;
     font-family: "Oswald",sans-serif;
     margin: 5px;
     text-decoration: none;
}
<html lang="en"><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>login Page</title>

        <!-- Stylesheet -->
        <link href="style.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
      <div class="font-welcome">
      <h1> Welcome to Site.</h1>
      <p>Connect with the MarketPlace and other fascinating people.
      </p>
      <div class="loginform cf">
      <form class="form signin" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="yourname@email.com" name="usermail">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <button class="loginbtn" type="submit">
                Log in
              </button>
              <div class="remember-forgot">
          <label class="t1-label remember">
            <input type="checkbox" checked="checked" name="remember_me" value="1">
            <span>Remember me</span>
          </label>
          <span class="separator">�</span>
          <a href="/account/begin_password_reset" class="forgot">Forgot password?</a>
        </div>
    </form>
    </div>
      <div class="signup cf">
      <form class="" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="name@email.com" name="email">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <select class="selector" required="">
    <option value="">Please select</option>
    <option value="Individual">Individual</option>
    <option value="Business">Business</option>
    </select>
            <button class="loginbtn" type="submit">
                sign up
              </button>
        </form></div>
    
    
    </div></body></html>

关于html - 我希望我的表格在右侧，在第二个表格上透明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31041610/

24 4 0
文章推荐： swift - SQLite - 删除包含字符串的行
文章推荐： javascript - 如何使用粗体文本通过电子邮件发送谷歌表单数据
文章推荐： c++ - Mandelbrot 集不会使用 pthread 加速
文章推荐： javascript - 为什么 JavaScript 函数调用要用括号括起来？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com