html - 为什么我的一些 CSS 选择器不起作用?
问题描述
我是 css/html 的新手,我正在尝试复制视频代码。我以相同的方式逐行执行,但由于某种原因,代码的工作方式不同。首先是 .container .row100 中的自动调整。第二件事是带有逗号的选择器。我一直在试图找出我做错了什么,但我无法弄清楚。
这是代码:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
overflow-x: hidden;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
width: 100%;
background: #001923;
}
section::before{
content:'';
position: absolute;
width: 400px;
height: 400px;
background: linear-gradient(#ffeb3b, #e91e63);
border-radius: 50%;
transform: translate(-420px, -180px);
}
section::after{
content:'';
position: absolute;
width: 350px;
height: 350px;
background: linear-gradient(#2196f3, #83d8ff);
border-radius: 50%;
transform: translate(400px, 180px);
}
.container{
position: relative;
z-index: 1000;
width: 100%;
max-width: 1000px;
padding:50px;
background: rgba(255,255,255,0.1);
box-shadow: 0 25px 45px rgba(0,0,0,0.1);
border: 1px solid rgba(255,255,255,0.25);
border-right: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
overflow: hidden;
backdrop-filter: blur(25px);
}
.container::before{
content: '';
position: absolute;
top: 0;
left: -40%;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.05);
pointer-events: none;
transform: skewX(-15deg);
}
.container h2{
width: 100%;
text-align: center;
color: #fff;
font-size: 36px;
margin-bottom: 20px;
}
.container .row100{
position: relative;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr))
}
.container .row100 .col{
position: relative;
width: 100%;
padding: 0 10px;
margin: 30px 0 20px;
}
.container .row100 .col .inputBox{
position: relative;
width: 100%;
height: 40px;
color: #fff;
}
.container .row100 .col .inputBox input,
.container .row100 .col .inputBox textarea{
position: absolute;
width: 100%;
height: 100%;
background: transparent;
box-shadow: none;
border: none;
outline: none;
font-size: 15px;
padding: 0 10px;
z-index: 1;
color: #000;
}
.container .row100 .col .inputBox .text{
position: absolute;
top: 0;
left: 0;
line-height: 40px;
font-size: 18px;
padding: 0 18px;
display: block;
transition: 0.5s;
pointer-events: none;
}
.container .row100 .col .inputBox input:focus + .text,
.container .row100 .col .inputBox input:valid + .text,
.container .row100 .col .inputBox textarea:focus + .text,
.container .row100 .col .inputBox textarea:valid + .text{
top: -35px;
left: -10px;
}
.container .row100 .col .inputBox .line{
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: 0.5s;
border-radius: 2px;
pointer-events: none;
}
.container .row100 .col .inputBox input:focus ~ .line,
.container .row100 .col .inputBox input:valid ~ .line{
height: 100%;
}
.container .row100 .col .inputBox.textarea{
position:relative;
width: 100%;
height: 100px;
padding: 10px 0;
}
.container .row100 .col .inputBox textarea:focus ~ .line,
.container .row100 .col .inputBox textarea:valid ~ .line{
height: 100%;
}
.container .row100 .col input[type="submit"]{
border: none;
padding: 10px 40px;
cursor: pointer;
outline: none;
background: #fff;
color: #000;
font-weight: 600;
font-size: 18px;
border-radius: 2px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make Request Page</title>
<link rel="stylesheet" type="text/css" href="C:\Users\haloe\PycharmProjects\Reimbursements - Copy\styles\makeRequestPage.css">
</head>
<body>
<section>
<div class="container">
<h2>Reimbursement Request Form</h2>
<div class="row100">
<div class="col">
<div class="inputbox">
<input type="text" name="" required="required">
<span class="text">First Name</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputbox">
<input type="text" name="" required="required">
<span class="text">Last Name</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputbox">
<input type="text" name="" required="required">
<span class="text">Email</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputbox">
<input type="text" name="" required="required">
<span class="text">Mobil</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<div class="inputbox textarea">
<textarea required="required"></textarea>
<span class="text">Type message here</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="row100">
<div class="col">
<input type="button" value="Submit">
</div>
</div>
</div>
</section>
</body>
</html>
解决方案
推荐阅读
- angular - 角材料2不起作用
- html - Youtube iframe src 自动播放在 Chrome 浏览器中不起作用
- php - 我的简单搜索引擎有问题
- apache-spark - Spark:在每个分区中变得不同
- ios - JusPayExpress 结帐错误 - JSURLNotPassed (102)
- html - 清理 htaccess 文件以指示 cPanel 中的重定向
- javascript - email() 不是通过 onclick 属性实现的功能
- java - 正则表达式在java中的字符串中查找特定模式
- db2 - 合并包含时间范围的连续重复记录
- firebase - 使 firebase 服务器规则更改属性