• 日期: 2028-03-05
  • 标签: 常规
<!DOCTYPE html>
<html>
<head>
  <title>淘宝待评价页面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
<pre><code>h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.product {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.product-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-price {
  font-size: 16px;
  color: #888;
  margin-bottom: 5px;
}

.product-rating {
  margin-bottom: 5px;
}

.product-rating input[type='radio'] {
  display: none;
}

.product-rating label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ddd;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
}

.product-rating label:hover,
.product-rating input[type='radio']:checked + label {
  background-color: #ff6b6b;
}

.product-rating input[type='radio']:checked + label:before {
  content: '\2713';
  display: block;
  text-align: center;
  line-height: 20px;
  color: white;
}

.submit-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</code></pre>
  </style>
</head>
<body>
  <h1>淘宝待评价页面</h1>
  <div class='product'>
    <img class='product-image' src='product1.jpg' alt='Product 1'>
    <div class='product-info'>
      <div class='product-name'>商品1</div>
      <div class='product-price'>¥100</div>
      <div class='product-rating'>
        <input type='radio' id='rating1' name='rating1' value='1'>
        <label for='rating1'></label>
        <input type='radio' id='rating2' name='rating1' value='2'>
        <label for='rating2'></label>
        <input type='radio' id='rating3' name='rating1' value='3'>
        <label for='rating3'></label>
        <input type='radio' id='rating4' name='rating1' value='4'>
        <label for='rating4'></label>
        <input type='radio' id='rating5' name='rating1' value='5'>
        <label for='rating5'></label>
      </div>
    </div>
  </div>
  <div class='product'>
    <img class='product-image' src='product2.jpg' alt='Product 2'>
    <div class='product-info'>
      <div class='product-name'>商品2</div>
      <div class='product-price'>¥150</div>
      <div class='product-rating'>
        <input type='radio' id='rating6' name='rating2' value='1'>
        <label for='rating6'></label>
        <input type='radio' id='rating7' name='rating2' value='2'>
        <label for='rating7'></label>
        <input type='radio' id='rating8' name='rating2' value='3'>
        <label for='rating8'></label>
        <input type='radio' id='rating9' name='rating2' value='4'>
        <label for='rating9'></label>
        <input type='radio' id='rating10' name='rating2' value='5'>
        <label for='rating10'></label>
      </div>
    </div>
  </div>
  <div class='product'>
    <img class='product-image' src='product3.jpg' alt='Product 3'>
    <div class='product-info'>
      <div class='product-name'>商品3</div>
      <div class='product-price'>¥200</div>
      <div class='product-rating'>
        <input type='radio' id='rating11' name='rating3' value='1'>
        <label for='rating11'></label>
        <input type='radio' id='rating12' name='rating3' value='2'>
        <label for='rating12'></label>
        <input type='radio' id='rating13' name='rating3' value='3'>
        <label for='rating13'></label>
        <input type='radio' id='rating14' name='rating3' value='4'>
        <label for='rating14'></label>
        <input type='radio' id='rating15' name='rating3' value='5'>
        <label for='rating15'></label>
      </div>
    </div>
  </div>
<p><button class='submit-button'>提交评价</button></p>
</body>
</html>
淘宝待评价页面制作教程 - HTML 代码示例

原文地址: https://www.cveoy.top/t/topic/g88O 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录