CSS实操一，实现商城购物模块（实战知识点。最基础css+div实现）

凡梦_leo

已于 2024-07-11 00:04:11 修改

阅读量171

点赞数

分类专栏： CSS 文章标签： css 前端笔记 python mysql css3 html5

于 2023-06-28 14:12:12 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131435649

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

实现商城购物的效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城手机模块实战</title>
    <style>
/*<!--    0 ruto 是设置居中显示    -->*/
/*设置了一个总的容器,居中显示,高度800,宽度500,颜色灰色 居中显示  文字也是居中显示*/
/*在总体里面设置了一下居中显示 所以这个模块里面的所有子容器都继承了*/
        .root{
            width: 800px;
            height: 500px;
            background-color: gray;
            margin: 0 auto;
            text-align: center;
        }
        /*float 是设置为靠左   mragin-top 是设置考上10边距  margin-left 时设置靠左10边距*/
        .left{
            float: left;
            margin-top: 3.5%;
            margin-left: 2%;
            width: 20%;
            height: 96%;
            /*background-color: #4135fa;*/
        }
        /*设置右边  靠右 高度距离上边框10 距离右边框10 整体宽度占据总体的百分之75 总体高度占据总体的百分之96*/
        /*设置一个颜色看看有无设置成功*/
        .right{
            float: right;
            margin-top: 2%;
            margin-right: 2%;
            width: 75%;
            height: 96%;
            /*background-color: #ffcccc;*/
        }
        /*设置子键位置,因为所有的值模块都是一样的,所有我们可以统一设置一下*/
        .top-1{
            float: left;
            margin-top: 2%;
            margin-left: 2%;
            width: 23%;
            height: 47%;
            background-color: white;
        }
    </style>
</head>
<body>
<div class="root">

    <div class="left">
<!--        插入图片,微调一下,使之更加美观-->
        <img src="手机1.png" alt="" style="float: left" width="160px" height="465px">
    </div>
    <div class="right">
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
             <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
        <div class="top-1">
            <img src="手机2.png" alt="" style="margin-top: 20px" width="80px" height="120px">
            <br>
            <br>
            <b>黑煞4s</b><br>
            <p>磁动力升降肩键</p>
        </div>
    </div>
</div>
</body>
</html>

图片地址请自行更换本地的地址