如何制作一个web评论页面

最新推荐文章于 2025-03-27 11:14:14 发布

totcrazy

最新推荐文章于 2025-03-27 11:14:14 发布

阅读量1.9k

点赞数 57

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/totcrazy/article/details/144473247

版权

一问题分析

如图所示我们要制作一个该评价手机的页面，在编写代码之前我们要对，页面进行基础的分块，除去插入的下图图片外，其他地方都需要我们自己编写，可以简单分成四部分，两部分使用<input>标签来实现但选按钮，而输入文本的矩形框则需要使用<textarea>标签，剩下一部分只需要调整样式就可以实现

二完整代码

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.cont{

position: absolute;

width: 300px;

height: 400px;

padding-top: 40px;

left: 100px;

}

.img{

position: relative;

padding-top: 100px;

left: 400px;

}

.text1{

position: relative;

left: 320px;

top: 80px;

color: aliceblue;

background-color: rgb(138, 199, 199);

}

.text2{

position: relative;

left: 320px;

top: 80px;

color: aliceblue;

background-color: rgb(186, 150, 109);

}

.rr{

position: relative;

left: 320px;

}

.shape{

position: relative;

left: 700px;

top: 60px;

}

</style>

</head>

<body>

</div>

</div>

<div>

</div>

</body>

</html>

三主要标签讲解

1.<input>标签是一个空标签，通常需要通过属性来定义其行为和外观。

主要属性
type：指定输入字段的类型，常见的类型有：
- text：文本输入框，用于输入单行文本。
- password：密码输入框，输入的内容会以掩码形式显示。
- radio：单选按钮，多个单选按钮具有相同的name属性时，只能选择其中一个。
- checkbox：复选框，可以选择多个选项。
- submit：提交按钮，用于将表单数据提交到服务器。
- reset：重置按钮，用于重置表单中的所有输入字段。
- button：普通按钮，可通过 JavaScript 进行自定义操作。
- number：用于输入数字的输入框。
- email：用于输入电子邮件地址的输入框，浏览器可能会进行一些基本的格式验证。
- date：用于选择日期的输入框。
- name：为输入字段指定一个名称，在提交表单时，这个名称将与输入的值一起发送到服务器，用于标识该输入字段。
- value：设置输入字段的默认值。对于单选按钮和复选框，value属性指定了被选中时提交到服务器的值。
- placeholder：在输入框中显示一个提示文本，当用户开始输入时，提示文本会消失。
- required：如果设置了这个属性，该输入字段在提交表单时必须有值，否则表单无法提交。
- readonly：使输入字段变为只读状态，用户不能修改其值，但可以选中并复制。
- disabled：禁用输入字段，用户不能与之交互，并且在提交表单时不会包含该字段的值。