Demo8：简单商品评星

最新推荐文章于 2024-09-25 21:35:19 发布

ljl_web

最新推荐文章于 2024-09-25 21:35:19 发布

阅读量392

点赞数

分类专栏： HTML入门 Demo 文章标签：商品评价

本文链接：https://blog.csdn.net/ljl_web/article/details/50756347

版权

HTML入门同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Demo

13 篇文章 0 订阅

订阅专栏

简单商品评价星级与标签的实现

实现效果

这里写图片描述

代码实现

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
    body{
        font-size:12px;
        color:#9c9a9c;
    }
    #content{
        width:910px;
        height:100px;
        border:1px solid #D0E4C2;
        border-radius:3px;
        margin-bottom:5px;
        padding:10px;
    }
    .topic{
        border-bottom:1px solid #D0E4C2;
        padding-bottom:5px;
    }
    .star{
        width:75px;
        height:14px;
        background:url(bg.png) no-repeat -109px -239px;
    }
    b{
        display:inline-block;
        background-color:#FDEDD2;
        padding:3px 5px;
        color:#333;
    }
    .btns{
        text-align:right;
    }
    input.btn{
        width:80px;
        height:37px;
        border:1px solid #d5d5d5;
        background-image:linear-gradient(to bottom,#e4393c 0%,#ddd 100%);
    }
    #pages{
        width:930px;
        text-align:right;
        margin-top:10px;
    }
    a{
        text-decoration:none;
        color:#005aa0;
        font-family:arial;
        border:1px solid #ddd;
        padding:5px 8px;
        border-radius:3px;
    }
    a.current{
        color:orange;
        border:0px;
    }
    a:hover{
        color:#fff;
        background:#005aa0;
    }
    #pages a.current:hover{
        color:#000;
        background:transparent;
    }
  </style>
 </head>

 <body>
    <div id="content">
        <div class="topic">
            <div class="star"></div>
        </div>
        <div>
            <p>标签：
                <b>效果非常明显</b>
                <b>价格公道</b>
            </p>
            <p class="btns">
                <input class="btn" type="button" value="有用(3)" />
                <input class="btn" type="button" value="回复(3)" />
            </p>
        </div>
    </div>
    <div id="pages">
        <a class="current">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
    </div>
 </body>
</html>