老师，我写了一个css文件，但双伪元素清除浮动 zoom 那里一直报错，想问一下错在哪里了？

*{
    padding: 0;
    margin: 0;
}
/* 清除浮动 */
.clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;}
.clearfix{
     *zoom: 1;}
.w{
    width:1190px;
    margin:0 auto;
}
  h3{
    height:50px;
    border-bottom:3px solid #922841;
  }
  #topbar{
    /* height:40px; */
    background-color:#EDECED;
  }
  #login{
    float:left;
  }
  #logon{
    float:right;
  }

嫣语四然 2023-08-02

源自：DOM&BOM 3-6 表单验证

收起

1回答

好帮手慕小蓝 2023-08-03 09:58:52

同学你好，仅从css文件，老师无法判断具体问题，建议同学同时提供对应的HTML代码。

另外，建议同学描述一下是在哪里使用到的这段代码，老师没有在课程中找到使用这些代码的位置。

祝学习愉快~

收起回答

提问者嫣语四然 #1

老师，是我自己按照课上的网页自己写的代码，麻烦老师检查一下我的代码，清除浮动 zoom 那里还是报错。谢谢。

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <link rel="stylesheet" href="表单验证.css">
</head>
<body>
    <div class="w logo">
        <a href="#">
          <img src="img/logo.png" alt="图片未找到">
        </a>
    </div>
    <div class="w div1">
      <div class="clearfix";id="topbar">
        <p id="logbar">
          <span id="login">用户登录</span>
          <span id="logon">没有账号，请<a href="#">注册</a></span>
       </p>
      </div>
      <div>
      <form class="form">
        <ul>
         <li>账号：<input type="text" placeholder="账号">账号长度必须在6-12位之间</li>
         <li>密码：<input type="password" placeholder="密码">密码长度必须在8-16位之间</li>
         <li class="button">
            <button id="ct">重填</button>
            <button id="sb">提交</button>
         </li>
        </ul>
      </form>
     </div>
    </div>
</body>
</html>

css文件

*{
    padding: 0;
    margin: 0;
}
/* 清除浮动 */
.clearfix:after{
     content:"";
     display:block;
     height:0;
     clear:both;
     visibility:hidden;}
.clearfix{
     *zoom: 1;}
.w{
    width:1200px;
    margin: auto;
}
li{
  width:550px;
  height:30px;
  list-style: none;
  margin-bottom:20px;
  font-size:16px;
  color: #666666;
  text-align: center;
  margin: 20px auto;
}
  .logo{
    height:100px;
    border-bottom:2px solid #F01414;
  }
  .logo img{
    padding-top:15px;
  }
  .div1{
    border:1px solid #CCC;
    height:700px;
    margin:20px auto;
  }
  #logbar{
    height:40px;
    background-color:#ECECEC;
    border-bottom:1px solid #ccc;
  }
  span{
    display: inline-block;
    text-align: center;
    line-height:40px;
    font-size: 18px;
    color:#666666;
  }
  #login{
    padding-left:10px;
  }
  #logon{
    padding-right:10px;
    float:right;
    font-size:14px;
    font-style:italic;
  }
   form{
     height:500px;
     margin:50px auto;
  }
  li button{
    background-color:#AA0000;
    color:#FFFFFF;
    width:80px;
    height:30px;
    border-radius:5px;
    border: none;
  }
  .button{
    text-align: left;
  }
  #ct{
    margin-left:80px;
  }
  #sb{
    margin-left:30px;
  }

麻烦老师检查一下，谢谢

2023-08-03 21:52:52

好帮手慕小蓝回复提问者嫣语四然 #2

同学你好，老师使用同学的代码，并没有报错，如下图：
建议同学清除一下浏览器的缓存，然后再尝试一下。
祝学习愉快~

2023-08-04 09:56:09

提问者嫣语四然回复好帮手慕小蓝 #3

还有想问一下，为什么我在设置焦点后，文本框边框是黑色加粗的，鼠标离开后再点击边框才变成橘色？

//账号密码获得焦点时，边框要变色
 //获得账号密码框的对象
var text=document.querySelector("#text");
var passWord=document.querySelector("#passWord");
 //绑定事件
text.onfocus=function(){
    // console.dir(text);
    this.style.border="1px solid orange";
}

2023-08-04 11:07:13

点开查看后面5条评论