【前端开发】购物车-静态页面实现（没有公共样式）

咩Kakao

已于 2022-08-16 17:05:48 修改

阅读量810

点赞数

分类专栏：静态页面挑战文章标签：前端 html css

于 2022-07-08 21:41:11 首次发布

本文链接：https://blog.csdn.net/weixin_52142992/article/details/125682459

版权

原生代码，无公共样式的静态页面，只包含html和css代码。

摘要由CSDN通过智能技术生成

根据提供效果图写页面：

代码实现如下：

html代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>购物车</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

<!-- 线上图标路径 -->

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1456778_ct57mue31dj.css">

    <link rel="stylesheet" href="../css/shop.css">

</head>

<body>

    <!-- 顶部 -->

    <div class="header">

        <span>< 返回</span>

        <span>购物车</span>

        <span>编辑</span>

    </div>

    <!-- 列表 -->

    <div class="list">

        <div class="item">

            <input type="checkbox">

            <img src="../img/1.png" alt="图片">

            <div class="item-right">

                <p>【山东】烟台华山梨 6枚装（果径90mm/枚）</p>

                <p class="price">

                    <span>&yen;37.80</span>

                    <span>x2</span>

                </p>

            </div>

        </div>

        <div class="item">

            <input type="checkbox"