聚美优品的代码

                                           date.php

<?php /** * Created by PhpStorm. * User: lenovo * Date: 19/3/25 025 * Time: 下午 4:54 */ $arr=[ 0=>['img'=>'./imges/1.jpg','name'=>'【官方授权】','introduce'=>'【韩国护肤大亨】JAYJUN 玫瑰净白焕能精华套盒130ml+130ml+15ml+15ml+10ml，2017推出亮白杀手锏，想要不化妆就白成一道光的MM，要抱紧JAYJUN的大腿了！【鲜活玫瑰精华】亮白到措不及防，斑点、痘印、暗黄通通再见！水嫩亮白，补水保湿，蕴含玫瑰精华。','原价'=>'239','现价'=>'198','购买'=>'16'], 1=>['img'=>'./imges/2.jpg','name'=>'【官方授权】','introduce'=>'肌肤要水，气垫更要爆水！被誉为韩国底妆界人气怪物的AGE20 S红宝石水光遮瑕精华气垫粉底膏闪亮来袭，第四代水分精华含量高，新概念All in one Make-up，让底妆一次搞定。轻松遮瑕同时补水，给你无法识破的美肌修饰。','原价'=>'240','现价'=>'158','购买'=>'61'], 2=>['img'=>'./imges/3.jpg','name'=>'【官方授权】','introduce'=>'韩国A by BOM 超能婴儿叶子面膜10片，重新定义【急救面膜】，【清凉冰凝叶-----密集修护】给予问题肌肤重点呵护，采用适用于脸部各个部位的黄金比例尺寸，大叶片2片+小叶片2片，想贴哪里贴哪里。【补水面膜----双层护理】面膜纸是由天然纤维制成-莱赛尔纤维！','原价'=>'120','现价'=>'99','购买'=>'13'], 3=>['img'=>'./imges/4.jpg','name'=>'【官方授权】','introduce'=>'AGE20 S 2018新款精华气垫（樱花粉）14g*2，底妆界人气妖怪再升级。这款精华粉底霜含有高浓缩补水精华，涂在脸上很湿润。粉体采用拿铁艺术结合用后肌肤细腻白皙，打造自然裸妆效果。妆容持久，水润遮瑕~','原价'=>'240','现价'=>'178','购买'=>'64'], 4=>['img'=>'./imges/5.jpg','name'=>'【官方授权】','introduce'=>'【韩国护肤大亨】JAYJUN 臻粹水漾舒缓水乳（套装）水（130ml+15ml）乳（130ml+15ml）水份霜（10ml），蕴含八种植物精粹，有效舒缓肌肤，补水保湿！调节水油平衡，还原肌肤清澈活力！','原价'=>'408','现价'=>'188','购买'=>'28 '], ]; style.css *{ margin: 0; padding: 01px; list-style: none; text-decoration: none; } body{ background: #f7f7f7; } .wrap{ height: 2000px; width: 1090px; margin: 50px auto; } .main{ width: 1090px; height: 350px; float: left; position: relative; overflow: hidden; margin: 20px 0; } .main>a>img{ width: 1500px; height: 400px; position: absolute; left: -280px; top: -35px; } .main-div{ position: absolute; height: 332px; width: 382px; padding: 0 40px; background: #fff; top: 18px; right: 18px; box-shadow: 0 1px 4px #c5c5c5; line-height: 1; } .a{ color: #767676; } .div{ margin: 30px 0; } .div>li{ float: left; color: blak; font-size: 16px; line-height: 20px; } .li{ color: #ed145b; } .main-div>li{ float: left; margin-top: 30px; } .main-div>li:nth-child(2){ font-size: 20px; line-height: 30px; } .main-div>li:nth-child(3){ font-size: 30px; } .main-div>li:nth-child(4){ font-size: 14px; text-decoration:line-through; line-height: 40px; margin-left: 10px; } .a1{ padding: 10px 0; width: 100px; background: #e81a62; color: white; font-size: 15px; float: left; text-align: center; margin-top: 30px; margin-left: 160px; } .main-div>img{ float: left; margin-left: -110px; margin-top: 20px; } .main-div>li:nth-child(7){ float: left; margin-left: 80px; font-size: 14px; } .main-div>li:nth-child(7) span{ font-size: 18px; color: #b9966a; } #img{ float: left; margin-left: 240px; } index.php <?php /** * Created by PhpStorm. * User: lenovo * Date: 19/3/25 025 * Time: 下午 3:48 */ ?> Title

<?php include "date.php"; foreach ($arr as $value):?>

<div class="main-div">
   <a href="javascript:void(0)" class="a"> 
    <div class="div">
        <li class="li"><?php  echo $value['name']; ?></li>
        <li><?php  echo $value['introduce']; ?></li> 
    </div>
    </a>
    <li>￥</li>
    <li><?php  echo $value['原价']; ?></li>
    <li><?php  echo $value['现价']; ?></li>        
    <a href="javascript:void(0)" class="a1">加入购物车</a>
    <img src="./imges/ji.jpg" alt="">
    <li><span><?php  echo $value['购买']; ?></span>人已经购买</li>
</div>

<?php endforeach;?>

猜你喜欢