在哪里添加提到的(HTML CSS）

Where to add the mentioned ones(HTML CSS)?

本文关键字：HTML CSS 添加 在哪里      更新时间：2023-09-26

我有这些任务：

  • 标签文本需要具有display:inline-block
  • 标签文本需要right-align和top-align**
  • 复选框和收音机的标签需要具有width:auto
  • 文本区域需要width:360px和height:50px

添加了样式规则，以便在鼠标移到标签和输入元素上时，标签和输入元素会明显变大（当鼠标离开它们时，它们将恢复为正常大小）。这可以通过使用悬停伪类对所有标签和输入元素轻松实现，例如 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>

你有：

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

您需要：

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

您还希望检查控制台是否存在"找不到 404"错误。 我对所需javascript文件的路径有点怀疑。 首先，"assignment part3.js"是文档相关的，这意味着我们希望在当前文件夹中找到它。 这对于分配来说可能并不意外，但是文件名中的空格似乎可能出错。

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

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

所以这部分看起来不错。 在我看来，"image005"的默认图像源想要一个扩展名，您的意思是例如"image005.png"？

.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;}

我只需要使用类即可在标签文本中进行更改

相关文章：