首页 > 数码频道 > 科技 > 正文

天天通讯！CSS——淘宝-产品详情的制作

2022-09-16 09:08:15来源：互联网

(资料图)

文章目录

前言一、示例图二、制作过程 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>