Question

我有这些任务：

标签文字需要display:inline-block
标签文字必须为right-align和top-align**
复选框和收音机的标签需要width:auto
textarea需要width:360px和height:50px

添加样式规则，以便当鼠标移过它们时标签和输入元素变得更大（当鼠标离开它们时返回正常大小）。这可以通过对所有标签和输入元素使用hover伪类来轻松实现，例如label:hover和input:hover。例如，label:hover { font-size:40px }。在网页的样式部分添加这些。我补充说它没有用。

需要在<script>之前添加以下</body>指令，靠近文件末尾。它是一些JavaScript代码的链接。在添加之后，在用户使用文件选择器（第一输入元素）选择文件之后，将立即在网页中显示面部图像。 JavaScript代码在带有id="preview"的img元素中显示所选图像（应显示在文件选择器下）。因此，请确保为id使用此img。这不再有效了

我在哪里添加代码？

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Creating Form</title>
 <style 
 label:hover { font-size:40px }
 input:hover { font-size:40px }
     ></style>
</head>
<body>
<form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php " 
      method="post" enctype="multipart/form-data">
<h1>Please Enter Your Details for our Dating Website</h1>
<fieldset style="background: lightyellow; border:10px solid yellow;margin-bottom:10px;width: 720px;">
    <legend>Your Face</legend>
    <label for="image" >Your image:</label> <input type="file" name="file to upload" required><br>
    <label for="preview">Image Preview:</label> <img src="image005" width="10px" height="10px" id="preview">
</fieldset>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your General Details</legend>
<label for="avatar">Name:</label> <input type="text" name="sth" placeholder="Your full name"  required><br>
<label for="avatar" >Gender:</label> <input type="radio" name="Gender" value="Male"required>Male
         <input type="radio" name="Gender" value="Female" required>Female<br>
 <label for="avatar">Age:</label> <input type="number" required="18"><br>
 <label for="avatar">Date of Birth:</label> <input type="date"><br>
 <label for="color">Favorite color:</label><input type="color" name="color"><br>
 <label for="avatar">Which country:</label>
 <select name="cities">
     <option value="hk">Hong Kong</option>
     <option value="hk">Azerbaijan</option>
     <option value="hk">Turkey</option>
     <option value="hk">Russia</option><option value="hk">Turkey</option><option value="hk">Japan</option>
 </select><br>
</fieldset>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
    <legend>Your Indicators</legend>
<label for="height">Height:</label>Short<input type="range" min="0" max="100" step="5" value="50" name="height" >Tall<br>

<label for="salary">Salary:</label>Poor<input type="range" min="0" max="100" step="5" value="50" name="height" >Rich
</fieldset>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
    <legend>Your Contact Information</legend>
<label for="avatar">Email:</label><input type="text" name="email" required>    <br>
<label for="avatar">Mobile:</label><input type="tel" name="email">    <br>
<label for="avatar">Address</label><textarea width:360px height:50px name="address"></textarea><br>
<label for="avatar" >Method to contact you:</label><input type="checkbox" name="sth" value="Email">Email
<input type="checkbox" name="sth" value="Email">Whatsapp
<input type="checkbox" name="sth" value="Email">In-app chat
</fieldset>

<input type="submit" value="Submit">
</form>
<script src="assignment part3.js"></script>
</body>
</html>

Answer 1

你有：

<style 
label:hover { font-size:40px }
input:hover { font-size:40px }
></style>

你想：

<style>
    label:hover { font-size: 40px; }
    input:hover { font-size: 40px; }
</style>

您还想检查控制台中找不到＆＃34; 404未找到的＆＃34;错误。我对你所需的javascript文件的路径有点怀疑。首先，＆＃34;赋值part3.js＆＃34;是文档相对的，这意味着我们希望在当前文件夹中找到它。对于赋值，这可能不是意料之外的。但是文件名中的空格似乎可能是错误的。

您有一个具有预期ID的元素：

<img src="image005" width="10px" height="10px" id="preview">

所以这部分似乎很好。＆＃34; image005＆＃34;的默认图像源在我看来，想要一个扩展，你的意思是例如＆＃34; image005.png＆＃34;？

Answer 2

＆＃13;

.sth{background-color: purple;}
 .mth{background-color: red;}
 .kth{background-color: none;}
 .zth{display:inline-block;
      right-align;
      top-align;
      }
      .lth{width:auto;}
      .oth{width:360px; height:50px;}

＆＃13;

我只需要使用类来在标签文本

中进行更改

在哪里添加提到的（HTML CSS）？

2 个答案: