Question

我希望有人能帮助我。我得到了我应该提出的这项任务。但是我遇到问题，当我调整页面大小时，一切都出错了。请帮忙。

这是我的代码。

body{
display:block;
margin: 0;
padding: 0;
font-family:sans-serif;
background: #000046;


background-size:cover;

}

.bgg{
  display:block;

padding:0px 0px;
width:85%;
height:80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background:#f5f2d0 ;

}


.warp .sidbar{
margin: 0px;
padding: 0px;
position: fixed;
width: 20%;
height: 100%;
background-color: #2F80ED;

}

.warp{
  display: flex;
  position: relative;
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.warp .sidbar ul li {



border-bottom: 1px solid #3C3B3F;


}
.warp .sidbar ul li a  {
  padding: 15px;
  color: white;
  display: block;
}
.warp .sidbar ul li a .fas {
  width: 25px ;
}
.warp .sidbar ul li :hover {
  background: #243B55;



}
.warp .sidbar ul li :hover a{
color: white;
}
.bgs{

padding:0px 0px;
 margin-left: 130px;
width:70%;
height:80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

background:#f5f2d0 ;

}
.info{
    overflow: hidden;
    font-size:20px;
    padding:8px 0;
    margin:8px 0;


}
.info input{
height: 30px;
    outline: none;
    background: none;
    color: black;
    font-size: 15px;
margin-left: 150px;
margin-top: 30px;
padding-left: 5px;
border-width: thin;
border-color: #C0C0C0;
font-weight: bold;

}

#name{
  width: 250px;
  positions:absolute;
  margin-bottom: 15px;
  margin-right: 10px;

}

<html lang="en" dir="ltr">
  <head>

    <link rel="stylesheet" href="newp.css"/>
    <meta charset="utf-8">
    <title>test  </title>
  </head>
  <body>
    <form class="bgg" action="index.html" method="post">
    <div class="warp">
      <div class="sidbar">
        <ul>

      <li><a href="#"></i>Home</a></li>
      <li><a href="#"></i>Log out</a></li>

        </ul>
      </div>
    </div>


     </form>
     <form class="bgs" action="index.html" method="post">
       <div class="info">
         <input id="name" type="text"  placeholder="Name" name="" value="">

       </div>

     </form>

  </body>
</html>

这些图像将帮助很好地描述我的问题。请帮助，谢谢。

enter image description here enter image description here

Answer 1

在第一，您应该删除</i>，这是不正确的。

错误：

<li><a href="#"></i>Home</a></li>
<li><a href="#"></i>Log out</a></li>

正确：

<li><a href="#">Home</a></li>
<li><a href="#">Log out</a></li>

第二，我不明白为什么您在整个侧边栏都有一个表单。如果用于注销链接，则应仅将表单放在该li元素内，并使用按钮或输入，而不要使用注销链接。

第三，您在固定位置和固定位置上的工作量很大，可以更轻松地完成工作。这样，您必须为每种屏幕分辨率设置不同的位置。

第四，您需要与媒体查询一起使用，以使您的网站对移动设备，平板电脑和台式机具有响应性：https://www.w3schools.com/css/css_rwd_mediaqueries.asp

@media screen and (min-width: 768px) {
  .warp .info input {
    margin-left: 150px;
  }
}

使用“媒体查询”，可以为每种分辨率分别定义样式。现代Web开发首先尝试使网站具有移动性，这意味着：尝试进行开发，使其在手机上看起来不错，然后将其样式扩展到适合平板电脑和台式机。

我刚刚整理了一下代码，向您展示了它是如何工作的。在我的示例中，您可以看到，当结果窗口变小时，输入字段的边距会发生变化。

您可以在jsfiddle上找到我的示例： https://jsfiddle.net/vn7k5r0f/1/

调整页面大小时，所有事情都搞砸了

1 个答案: