CSS——淘宝-产品详情的制作

文章目录

• 前言
• 一、示例图
• 二、制作过程
  • 1.HTML结构
  • 2.CSS样式
• 总结

---

前言

      本文主要介绍了淘宝产品详情的制作

---

一、示例图

 

二、制作步骤

1.HTML结构

代码如下（示例）：

  <!-- 外部容器 -->
    <div class="wrap">
        <!-- 产品图片 -->
        <div class="picture">
            <img src="./img/taobao.jpg" alt="">
        </div>
        <!-- 产品介绍 -->
        <div class="good-info">
            <div class="title">
                <p><a href="">外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边单人枕套 头部天然空调</a></p>
            </div>
            <div class="tag-item">
                <span>送运费险</span>
            </div>
        </div>
        <!-- 产品价格 -->
        <div class="price">
            <a href="" class="money1">￥</a>
            <a href="" class="money2">39.9</a>
        </div>
    </div>

2.CSS样式

代码如下（示例）：

 <style>
        .wrap {
            position: relative;
            width: 348px;
            height: 152px;
            padding: 11px;
            border-radius: 10px;
            margin-top: 100px;
            margin-left: 100px;
            background-color: rgb(247, 249, 250);
            border: 1px solid rgba(247, 249, 250, alpha);
        }

        .wrap:hover {
            border: 1px solid #FAB596;
            background-color: #fefefe;
            box-shadow: 0 5px 10px -5px #FAB596;
        }

        .wrap .picture img {
            position: absolute;
            float: left;
            width: 150px;
            height: 150px;
            border-radius: 10px;
        }
        .wrap .picture img:hover{
            opacity: .9;
        }
        .wrap .good-info {
            position: absolute;
            float: left;
            margin-left: 160px;
            margin-top: 7px;
        }

        .wrap .good-info .title {
            width: 186px;
            height: 46px;
            overflow: hidden;
        }

        .wrap .good-info .title a {
            color: #333333;
            font-size: 16px;
            font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            line-height: 23px;
        }
        .wrap .good-info .title:hover a {
            color: #fe5405f3;
        }

        .wrap .good-info .tag-item {
            width: 58px;
            height: 20px;
            padding: 0px 4px;

        }

        .wrap .good-info .tag-item span {
            color: #FF5000;
            background: #FFFFFF;
            height: 20px;
            line-height: 20px;
            display: block;
            font-size: 12px;
            font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
            border: 1px solid #ff5000;
            border-color: #FAB596;
            border-radius: 3px;
            text-align: center;
            margin-top: 8px;
            margin-left: -4px;
        }

        .wrap .price {
            position: absolute;
            float: right;
            width: 279px;
            height: 24.33px;
            margin-left: 162px;
            margin-top: 116px;
        }

        .wrap .price .money1 {
            font: 14px "Microsoft Yahei";
            color: #ff5000;
        }

        .wrap .price .money2 {
            font-size: 22px;
            color: #ff5000;
            margin-left: -3px;
            font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        }
    </style>

---

总结

       以上就是有关产品详情的制作，希望可以帮助到你吧~