我妈已经三天没打我了 2022-04-11 15:55 采纳率: 88.2%
浏览 101
已结题

给css加了一个position: absolute;页面就突然变窄了,求解

原本应该是这样

img


结果我自己写出来是这样的

img

/* 登录页面 */
/* body背景 */
.login_bg{
   width: 100%;
   position: relative;
}

/* 背景图 */ 
.login_bg img{
width: 100%;
}

/* 页面 */
.login_bg > div{
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
}

/* 顶部 */
.login_title{
   height: 0.88rem;
   line-height: 0.88rem;
   text-align: right;
   font-size: 0.38rem;
   padding-right: 0.18rem;
}
/* 注册 */
.login_title span{
   color: #fd6246;
   font-size: 0.3rem;
}
/* 返回小图标 */
 .login_title .icon{
   position: absolute;
   left: 0.3rem;
   top: 0.26rem;
   width: 0.24rem;
   height: 0.46rem;
   background: url(../image1/login_back.png) no-repeat;
   background-size: 0.24rem 0.46rem;
   /* 垂直对齐方式 */
   vertical-align: middle;
} 

/* 登录内容 */
.login_content{
   margin-top: 1.66rem;
}

.login_content .icon{
   background: url(../image1/icon_login.png);
   background-size: 0.98rem 0.39rem;
}

.login_content .username {
   width: 6.84em;
   margin: 0 auto;
   position: relative;
}

.login_content .username .icon_user{
   position: absolute;
   left: 0.1rem;
    top: 0.3rem;
    width: 0.24rem;
    height: 0.39rem;
}

.login_content .username input {
   background-color: transparent;
   color: #979797;
   width: 100%;
   border: none;
   font-size: 0.34rem;
   outline: none;
   height: 0.8rem;
   line-height: 0.8rem;
   text-align: center;
   border-bottom: 1px solid #ddd;
   padding-top: 0.45rem;
}

.login_content .username input:focus {
   color: #beb5b5;
}


<!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.0">
   <title>登录页面1</title>

   <link rel="stylesheet" href="./css/reset.css"/>
   <link rel="stylesheet" href="./css/Login1.css">
</head>
<body>
   <div class="login_bg">
      <!-- 背景图 -->
      <img src="./image1/login_bg.png" alt="">
      <!-- 页面 -->
      <div>
         <!-- 顶部 -->
         <div class="login_title">
            <a href="index.html"><i class="icon"></i></a>
            <a href="reg1.html"><span>注册</span></a>
         </div>
         <!-- 登录内容 -->
         <div class="login_content">
            <!-- 用户名 -->
            <div class="username">
               <input type="text" id="user" placeholder="用户名/手机号">
            </div>
            <!-- 密码 -->
            <div class="password">
               <input type="password" id="pwd" placeholder="密码">
               <img src="./image1/bkj.png" class="icon_eye">
            </div>
            <!-- 登录 -->
            <span class="btn login_btn">登录</span>
            <!-- 忘记密码 -->
            <p class="forget_btn">
               <a href="forgetPwd.html">忘记密码?</a>
            </p>
            <!-- 登录快捷方式 -->
            <div class="thirdPartyLoginWrap">
               <ul class="clearfix">
                  <li id="wechatBtn">
                     <a href="javascript:;" class="wechat">
                        <img src="./image1/WeChat.png" alt="">
                     </a>
                  </li>
                  <li id="QQBtn">
                     <a href="javascript:;" class="wechat">
                        <img src="./image1/QQ.png" alt="">
                     </a>
                  </li>
                  <li id="weiboBtn">
                     <a href="javascript:;" class="wechat">
                        <img src="./image1/Weibo.png" alt="">
                     </a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

img

img

img

img

img

  • 写回答

1条回答 默认 最新

  • _念_ 2022-04-11 16:19
    关注

    width: 100%;

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月19日
  • 已采纳回答 4月11日
  • 创建了问题 4月11日

悬赏问题

  • ¥15 Qt4代码实现下面的界面
  • ¥15 prism提示我reinstall prism 如何解决
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法
  • ¥20 while循环中OLED显示中断中的数据不正确
  • ¥15 这个视频里的stm32f4代码是怎么写的
  • ¥15 JNA调用DLL报堆栈溢出错误(0xC00000FD)
  • ¥15 请教SGeMs软件的使用
  • ¥15 自己用vb.net编写了一个dll文件,如何只给授权的用户使用这个dll文件进行打包编译,未授权用户不能进行打包编译操作?
  • ¥50 深度学习运行代码直接中断
  • ¥20 需要完整的共散射点成像代码