我是HTML和CSS的新手（昨天開始）。我在學習Traversy Media的CSS速成課程時，發現有些CSS沒有按照視頻中的要求作業。這是關于一個表單的問題，我試著確保代碼是一樣的，并確保它被保存了，但Chrome頁面顯示，表單的布局仍然是一樣的，就好像它只是用普通的HTML制作的一樣。CSS中的其他東西都作業得很好。我試圖在網上尋找解決方案，但不太確定其他人的情況是否適用于我。
這是不作業的具體CSS：
這是不作業的具體CSS。
.my-form{
padding:20px;
}
.my-form .form-group{
padding-bottom:15px;
}
.my-form label{
display:block;
}
.my-form input[type="text"], .my-form textarea{
padding:8px;
width:100%;
}
.my-form input[type="submit"]{
背景顏色:#333;
color:#fff;
padding:10px 15px;
border:none;
}
這是我的完整的HTML：
<html>
<head>
<title>CSS Cheat Sheet</title>
< link rel="styleheet" type="text/css" href="css/style. css">
</head>
<body>
<div class="container">
<div class="box-1"/span>>
<h1>Hello World</h1>
<p>/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
暫時不考慮勞動強度和作業量的問題。在這里，我想說的是："我們要做的就是把我們的作業做好。
在這里，我想說的是，我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的。
導致。我想說的是，在我看來，這是個很好的機會。
我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖。除了偶爾的杯具，沒有
</p>。
</div>/span>
<div class="box-2">
<h1>Goodbye World</h1>
<p>/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
暫時不考慮勞動強度和作業量的問題。在這里，我想說的是："我們要做的就是把我們的作業做好。
在這里，我想說的是，我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的。
導致。我想說的是，在我看來，這是個很好的機會。
我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖。除了偶爾的杯具，沒有
</p>。
</div>/span>
<div class="categories">
<h2>/span>Categories</h2>/span>
<ul>/span>
<li><a href="#"/span>> 類別1</a></li>>
<li><ahref="#"/span>> 類別2</a></li>>
<li><ahref="#"/span>> 第3類</a></li>>
<li><ahref="#"/span>> 第4類</a></li>>
<li>a href="test. html">類別5</a>/span></li>
</ul>/span>
</div>/span>
<form class="my-form">
<div class="form-group"/span>>
<label>名稱。</label>名稱: </label>
< input type="text" name="name">
</div>/span>
<div class="form-group">
<label>電子郵件。</label> 電子郵件: </label>
< input type="text" name="email">
</div>/span>
<div class="form-group">
<label>Message。</label>Message: </label>
<textarea name=" message"> </textarea>>
</div>/span>
< input class="button" type="submit" value="submit" name=">
</form>
</div><！-- ./container -->
</body>
</html>
這是我的完整的CSS：
/*
*{
margin:0;
padding:0;
}
*/
body{
背景顏色:#f4f4f4;
color:#555555;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
/* 與上述相同*/
font:normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
margin:0。
}
a{
文字裝飾：無。
color:#000;
}
a:hover{
color:red;
}
a:active{
color:green;
}
a:visited{
color:black;
}
.container{
width:80%;
margin:auto;
}
.box-1{
背景顏色:#333;
color:#fff;
border-right:5px red solid;
border-left:5px red solid;
border-top:5px red solid;
border-bottom:5px red solid;
border-bottom-width:10px;
border-top-style:dotted;
邊框:5px紅色實心。
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
/* 與上述相同 */
padding:20px;
margin-top:20px;
margin:20px 0;
}
.box-1 h1{
font-family:Tahoma;
font-weight:800;
font-style:italic;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:0.2em;
word-spacing:1em;
}
.box-2{
border:3px dotted #ccc;
padding:20px;
margin:20px 0;
}
.category{
border:1px #ccc solid;
padding:10px;
border-radius:15px;
}
.類別h2{
text-align:center;
}
.類別 ul{
padding:0;
padding-left:20px;
list-style:square;
list-style:none;
}
.類別li{
padding-bottom:6px;
border-bottom:dotted 1px #333;
list-style-image: url("./images/check.png");
}
.my-form{
padding:20px;
}
.my-form .form-group{
padding-bottom:15px;
}
.my-form label{
display:block;
}
.my-form input[type="text"], .my-form textarea{
padding:8px;
width:100%;
}
.my-form input[type="submit"]{
背景顏色:#333;
color:#fff;
padding:10px 15px;
border:none;
}
如果有任何幫助，我們將非常感激。謝謝！
uj5u.com熱心網友回復：
我認為問題出在這里 -- 洗掉input[type="text"]，然后寫成下面這樣
.my-form .my-form textarea{
padding:8px;
width:100%;
}
.my-form {
background-color:#333;
color:#fff;
padding:10px 15px;
border:none;
讓我知道這是否對你有用
uj5u.com熱心網友回復：
我把你的CSS直接添加到HTML中，它是有效的。你可以嘗試用這種方式，而不是分割成另一個CSS檔案。
所以我洗掉了<link rel="styleheet" type="text/css" href="css/style.css">/code>一行。請讓我知道它是否有效。
<!DOCTYPE html>
<html>
<head>
<title>CSS Cheat Sheet</title>
</head>/span>
<body>
<div class="container">
<div class="box-1"/span>>
<h1>Hello World</h1>
<p>/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
暫時不考慮勞動強度和作業量的問題。在這里，我想說的是："我們要做的就是把我們的作業做好。
在這里，我想說的是，我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的。
導致。我想說的是，在我看來，這是個很好的機會。
我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖。除了偶爾的杯具，沒有
</p>。
</div>/span>
<div class="box-2">
<h1>Goodbye World</h1>
<p>/span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
暫時不考慮勞動強度和作業量的問題。在這里，我想說的是："我們要做的就是把我們的作業做好。
在這里，我想說的是，我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的，因為我們的作業是不可能的。
導致。我想說的是，在我看來，這是個很好的機會。
我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖，我的心在顫抖。除了偶爾的杯具，沒有
</p>。
</div>/span>
<div class="categories">
<h2>/span>Categories</h2>/span>
<ul>/span>
<li><a href="#"/span>> 類別1</a></li>>
<li><ahref="#"/span>> 類別2</a></li>>
<li><ahref="#"/span>> 第3類</a></li>>
<li><ahref="#"/span>> 第4類</a></li>>
<li>a href="test. html">類別5</a>/span></li>
</ul>/span>
</div>/span>
<form class="my-form">
<div class="form-group"/span>>
<label>名稱。</label>名稱: </label>
< input type="text" name="name">
</div>/span>
<div class="form-group">
<label>電子郵件。</label> 電子郵件: </label>
< input type="text" name="email">
</div>/span>
<div class="form-group">
<label>Message。</label>Message: </label>
<textarea name=" message"> </textarea>>
</div>/span>
< input class="button" type="submit" value="submit" name=">
</form>
</div><！-- ./container -->
</body>
<style>
body{
background-color: #f4f4f4;
color:#555555;
font-family:Arial, Helvetica, sans-serif;
font-size:16px。
font-weight: normal;
/* 同上*/
font:normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em。
margin:0;
}
a{
text-decoration: none;
color:#000;
}
a:hover{
color:red;
}
a:active{
color:green;
}
a:visited{
color:black;
}
.container{
width:80%。
margin:自動。
}
.box-1{
background-color:#333;
color:#fff;
border-right:5px red solid;
border-left:5px red solid;
border-top:5px red solid;
border-bottom:5px red solid;
border-bottom-width:10px;
border-top-style:dotted;
border:5px red solid;
padding-top:20px;
padding-bottom:20px;
padding-right:20px;
padding-left:20px;
/* 同上 */.
padding：20px。
margin-top:20px;
margin:20px 0;
}
.box-1 h1{
font-family: Tahoma;
font-weight：800。
font-style:斜體。
text-decoration:underline;
text-transform:大寫。
letter-spacing:0.2em。
word-spacing:1em;
}
.box-2{
border:3px dotted #ccc;
padding：20px。
margin:20px 0;
}
.categories{
border:1px #ccc solid;
padding:10px;
border-radius:15px;
}
.category h2{
text-align: center;
}
.categories ul{
padding: 0;
padding-left:20px;
list-style: square;
list-style: none;
}
.categories li{
padding-bottom: 6px;
border-bottom:dotted 1px #333;
list-style-image: url("./images/check.png") 。
}
.my-form{
padding: 20px;
}
.my-form .form-group{
padding-bottom: 15px;
}
.my-form label{
display:block;
}
.my-form input[type="text"]，. my-form textarea{。
padding：8px。
width:100%;
}
.my-form input[type="submit"]/span>{
background-color:#333。
color:#fff;
padding:10px 15px;
border: none;
</style>>
</html>/span>uj5u.com熱心網友回復：
我在W3的Tryit編輯器上試了一下你的HTML/CSS，但在HTML中包含了css，并加上了=> https://www.w3schools.com/code/tryit.asp?filename=GUPQJOXYSWB9
效果完美，你的結果是什么？
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/333722.html
標籤：