html无效的属性值,html – grid-template-areas无效的属性值
@TemaniAfif提供了一个有效的解决方案但删除了他的帖子.
简短回答：
对于只有一列而不是两列的行,我必须编写“myArea myArea”以使每行的列数相同.
答案很长：如果可以缩短CSS代码,请告诉我！
#contactForm {
display: grid;
grid-template-columns: 50% 50%;
grid-template-areas:
"lblFirstName lblLastName"
"edtFirstName edtLastName"
"lblCompany lblCompany"
"edtCompany edtCompany"
"lblEmail lblPhone"
"edtEmail edtPhone"
"lblMessage lblMessage"
"edtMessage edtMessage"
"btnSubmit btnSubmit";
grid-gap: 20px;
padding: 100px 300px;
}
label[for=firstname]
{
grid-area: lblFirstName;
}
label[for=lastName]
{
grid-area: lblLastName;
}
label[for=company]
{
grid-area: lblCompany;
}
label[for=email]
{
grid-area: lblEmail;
}
label[for=phone]
{
grid-area: lblPhone;
}
label[for=message]
{
grid-area: lblMessage;
}
input[name=firstname]
{
grid-area: edtFirstName;
}
input[name=lastName]
{
grid-area: edtLastName;
}
input[name=company]
{
grid-area: edtCompany;
}
input[name=email]
{
grid-area: edtEmail;
}
input[name=phone]
{
grid-area: edtPhone;
}
textarea[name=message]
{
grid-area: edtMessage;
}
input[type=submit]
{
grid-area: btnSubmit;
}
.inputTitle {
font-size: 20px;
}
.txtInput {
outline: none;
padding: 14px 10px;
border-radius: 3px;
border: 1px solid #d1d5da;
box-shadow: inset 0 1px 2px rgba(27,31,35,.075);
background: #fafbfc;
color: #24292e;
}
#contactSubmitBtn {
padding: 10px;
cursor: pointer;
border: none;
border-radius: 3px;
font-weight: 300px;
font-size: 18px;
background: #4285f4;
color: #ffffff;
transition: 0.3s;
}
#contactSubmitBtn:hover {
transform: translateY(-3px);
box-shadow: 0 1px 3px #343434;
background: #5396f5;
transition: 0.3s;
}
#contactMessageInput {
resize: none;
}
@media only screen and (max-width: 1300px) {
#contactForm {
padding: 100px 200px;
}
}
@media only screen and (max-width: 1100px) {
#contactForm {
padding: 100px 150px;
}
}
@media only screen and (max-width: 900px) {
#contactForm {
padding: 100px 100px;
}
}
@media only screen and (max-width: 700px) {
#contactForm {
padding: 100px 50px;
}
}
@media only screen and (max-width: 500px) {
#contactForm {
grid-template-columns: 100%;
grid-template-areas:
"lblFirstName"
"edtFirstName"
"lblLastName"
"edtLastName"
"lblCompany"
"edtCompany"
"lblEmail"
"edtEmail"
"lblPhone"
"edtPhone"
"lblMessage"
"edtMessage"
"btnSubmit";
}
}
First Name *
Last Name *
Company
E-Mail *
Phone
Your Message *