商城列表页面（静态）

其他 2019-08-26 15:18:02 阅读次数: 0

一、

  • 一、作业需求：
  • 1、完成商城列表静态页面的抒写
  • 二、博客地址：https://www.cnblogs.com/catepython/p/9205636.html
  • 三、运行环境
  • 操作系统：Win10
  • Python：3.6.4rcl
  • Pycharm：2017.3.4
  • 四、功能实现
  • 1）按照样式抒写了HTML商城列表页面
  • 五、备注
  • readme

二、程序结构图

三、核心代码

  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .pg-title{
    background-color:#dddddd;
    height: 38px;
    line-height: 38px;
    }
    .dt{
    padding: 8px;
    float: left;
    line-height: 20px;
    }
    .pg-logo{
    height: 120px;
    line-height: 68px;
    }
    img{
    border: 0;
    }
    .category{
    margin-top: 20px;
    height: 48px;
    background-color: red;
    font-weight: bold;
    color: white;
    }
    .category_item{
    background-color: brown;
    height: 48px;
    text-align: center;
    line-height: 48px;
    float: left;
    }
    .border{
    border-top: 2px solid red;
    border-bottom: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    }
    .product{
    margin-left: 10px;
    color: #7d7d7d;
    float: left
    }
    .apple{
    color: #7d7d7d;
    font-weight: bold;
    margin-left: 2%
    }
    .sorting{
    color: black;
    font-size: 18px;
    font-weight: normal;
    line-height: 40px
    }
    .product_item{
    border: 1px solid red;
    float: left;
    height: 400px;
    width: 300px;
    margin-left: 2%;
    margin-top: 2%
    }
    .add_subtract{
    float: left;
    color: #7d7d7d;
    line-height: 25px;
    width: 30px;
    text-align: center;
    border-right: 1px solid #dddddd
    }

    </style>
    <link rel="stylesheet" href="E:\python_work\51CTO_Python\第六模块学习\Day01\商城列表（静态）作业\pictures">
    </head>
    <body style="margin: 0 auto">
    <!--标题栏-->
    <div class="pg-title">
    <div style="width: 1600px;margin: 0 auto">
    <div style="float: left">*收藏本站</div>
    <div style="float: right">
    <div class="dt">
    <a>登录</a>
    </div>
    <div class="dt">
    <a>注册</a>
    </div>
    <div class="dt">
    <a>我的订单</a>
    </div>
    <div class="dt">
    <a>我的收藏</a>
    </div>
    <div class="dt">
    <a>*VIP 会员俱乐部</a>
    </div>
    <div class="dt">
    <a>关注</a>
    </div>
    </div>
    <div style="clear: both"></div>
    </div>
    </div>
    <!--Logo栏-->
    <div class="pg-logo">
    <!--搜索框 购物车栏-->
    <div style="width: 1000px;margin: 0 auto">
    <div style="width: 250px;float: left">
    <img style="height: 100px;width: 100px;margin-top: 12px" src="picture\翎猫.png">
    </div>
    <div style="height: 100px;float: left;margin-top:20px;margin-left: 100px">
    <input style="height: 35px;width: 330px;" type="text"/>
    <div style="margin: -35px;margin-left: 0;">
    <samp style="color: red;font-weight: bold;font-size: 15px">热门搜索：</samp>
    <a style="margin-left: 10px;color: #7d7d7d">火龙果</a>
    <a style="margin-left: 10px;color: #7d7d7d">瓜子</a>
    </div>
    </div>
    <div style="margin-top:34px;float: left">
    <img style="height: 41px;" src="picture\2.png">
    </div>
    <div style="margin-top:35px;float: right;border: 1px solid #dddddd;
    height: 45px;width: 120px;
    text-align: center;line-height: 45px">
    我的购物车<img style="margin: 0" src="picture\购物车.jpg"/>
    </div>
    <div style="clear: both"></div>
    </div>
    </div>
    <!--类目栏-->
    <div class="category">
    <!--类目栏-->
    <div style="width: 1600px;margin: 21px auto">
    <div style="float: left;width: 80%">
    <div class="category_item" style="width: 20%">
    <a>全部商品列表</a>
    <div style="border: 1px solid #dddddd;float: left;width: 100%">
    <div style="color: red;float: left">南方水果:</div>
    <br/>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    </div>
    <div style="border: 1px solid #dddddd;float: left;width: 100%">
    <div style="color: red;float: left">南方水果:</div>
    <br/>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    </div>
    <div style="border: 1px solid #dddddd;float: left;width: 100%">
    <div style="color: red;float: left">南方水果:</div>
    <br/>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    </div>
    <div style="border: 1px solid #dddddd;float: left;width: 100%;margin-top: 10%">
    <div style="color: red;float: left">热销排行榜:</div>
    <br/>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    <a class="product">火龙果</a>
    </div>
    <div style="border: 1px solid #dddddd;float: left;width: 100%">
    <div style="color: black;float: left">Content</div>
    </div>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 8%">
    <a>首页</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 8%">
    <a>网上超市</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 8%">
    <a>水果超市</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 8%">
    <a>超级订餐</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 8%">
    <a>生活娱乐</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 8%">
    <a>研究院</a>
    </div>
    </div>
    <div style="float: right;width: 20%">
    <div class="category_item" style="margin-left: 5px;width: 30%">
    <a>研究院</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 30%">
    <a>猜你喜欢</a>
    </div>
    <div class="category_item" style="margin-left: 5px;width: 30%">
    <a>论坛</a>
    </div>
    </div>
    <div style="clear: both"></div>
    </div>
    <!--已选产品和规格-->
    <div style="margin-left: 22%;margin-top: 1%;width: 70%">
    <div style="color: black">福特>蒙迪欧>2.0T</div>
    <div class="border" style="margin-top: 1%;height: 200px">
    <div style="color: black;height: 25%;line-height: 60px">您已选择：
    <samp class="apple">苹果</samp>
    </div>
    <div style="color: black;height: 25%;line-height: 60px;margin-left: 2%">材质：
    <samp class="apple">苹果</samp>
    <samp class="apple">苹果</samp>
    <samp class="apple">苹果</samp>
    </div>
    <div style="color: black;height: 25%;line-height: 60px;margin-left: 2%">品牌：
    <samp class="apple">苹果</samp>
    <samp class="apple">苹果</samp>
    <samp class="apple">苹果</samp>
    </div>
    <div style="color: black;height: 25%;line-height: 60px;margin-left: 2%">风格：
    <samp class="apple">苹果</samp>
    <samp class="apple">苹果</samp>
    <samp class="apple">苹果</samp>
    </div>
    </div>
    </div>
    <!--排序-->
    <div style="margin-left: 22%;margin-top: 1%;width: 70%">
    <div style="border: 1px solid #dddddd;height: 40px">
    <div style="float: left;width: 70%">
    <samp class="sorting" style="margin-left: 2%">排序:</samp>
    <samp class="sorting" style="margin-left: 5%;color: blue">价格↑</samp>
    <samp class="sorting" style="margin-left: 5%;color: blue">销量↑</samp>
    <samp class="sorting" style="margin-left: 5%;color: blue">最新↑</samp>
    </div>
    <div style="float: right;width: 30%">
    <div class="sorting" style="margin-left: 35%;color: red;float: left">共x件商品</div>
    <div class="sorting" style="margin-left: 5%;color: red;float: left;">1
    <samp style="color: black">/675</samp>
    </div>
    <input type="submit" value="<" style="height: 30px;margin-left: 5%;margin-top: 5px"/>
    <input type="submit" value=">" style="height: 30px;line-height: 10px;margin-top: 5px"/>
    </div>
    </div>
    <div style="clear: both"></div>
    </div>
    <!--商品首页图-->
    <div style="margin-left: 22%;margin-top: 1%;width: 70%;height: 1400px">
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>

    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>
    <div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div><div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div><div class="product_item" >
    <div style="height: 300px;width: 300px">
    <a href="http://m1002.welinkmalls.com/shop/product?productid=10316&_time=1529488195739">
    <img src="picture\国台酒.jpg" style="width: 300px;height: 300px">
    </a>
    </div>
    <div style="color: black;text-align: center">
    【国台 典藏酒】最经典的酱香酒味 封坛多年的特级酒汁 6瓶/箱 500ml/瓶 酒精度53%
    </div>
    <div style="height: 50px;width: 100px;float: left">
    <samp style="color: red;font-weight: bold;font-size: 20px;
    line-height: 50px;margin-left: 10%">$2880.00</samp>
    </div>
    <div style="height: 50px;width: 180px;float: right">
    <div style="border: 1px solid #dddddd;width: 125px;float: left;margin-top: 10px;height: 25px;">
    <div class="add_subtract">-</div>
    <div style="float: left;color: #7d7d7d;line-height: 25px">1</div>
    <div class="add_subtract" style="float: right">+</div>
    </div>
    <input style="background-color: red;color: white;
    width: 30px;margin-left: 1%;margin-top: 7px;height: 30px" type="submit" value="买"/>
    </div>
    </div>

    <div style="clear: both"></div>
    </div>
    </div>
    </body>
    </html>

    商城列表静态页面

 四、效果展示图

四、重要笔记

  • 前端

    HTML (注:20个标签 DOCTYPE html:对应关系 html:叫做html标签 只能有一个 lang='en' 叫做标签内部的属性 :注释 )
    标签分类 (注:绝大部分都是主动闭合标签 自闭合标签： 主动闭合标签：
    块级标签：系列标签,

    标签...占一整行 行内标签（内联标签）：标签不占一整行 )
    标签 (注: #定义HTML编码 #3秒自动刷新 )
    #添加title小图标标签 href为html文件当前路径下的ico文件 )
    标签 (注:特殊符号： =空格 <:< >:> )

    和
    标签 (注:

    121sada
    sda

    p标签：段落 br标签：段落间的换行)
    系列标签 (注:
    Alex
    Alex
    Alex
    Alex
    Alex
    Alex
    )
    标签 (注:hello hello hello)
    和标签 (注: 用户名： value为默认值
    密码：

    )

    radio(单选框) (注:

    请选择性别
    男： 女： Alex： )
    checkbox(复选框) (注: 篮球： 足球： 皮球： 台球： 网球：

    技能
    撩妹： 写代码：)
    file（上传文件） (注:

    上传文件
    )
    reset(重置) (注:

    )

    标签（多行文本输入）<span style="color:blue;font-size:9px"> (注:<textarea name="text">默认值)
    )

    复选下拉框 (注:

    复选下拉框

    )
    分组下拉框 (注:

    分组下拉框

    )
    标签（超链接） (注:a标签是行内标签 百度)
    锚 (注:第一章 第二章 第三章
    第一章内容
    第二章内容
    第三章内容
    )
    标签 (注: 美女 style:定义宽度和长度 px：像素 title:鼠标移动到图片后显示的文字 alt：当图片不存在时显示的文字)
    列表 (注:

    列表(前面小黑点)
    sdsdsdsd
    sdsdsdsd
    sdsdsdsd

    列表(前面数子)
    sdsdsdsd
    sdsdsdsd
    sdsdsdsd

    列表(分组)
    23
    abc
    bc
    23
    abc
    bc

    )
    规范写法
    表格 (注: )
    标签 (注:用户名： )
    CSS (注:在标签上设置style属性 background-color:RGB颜色对照码 height:48px px(像素))
    优先级和引入
    常用属性
    float (注:让标签浪起来，让块级标签也可以堆叠)
    块级标签与行内标签转换
    内外边距 (注:div：默认边距是8 margin:外边距 padding：内边距)
    主机名 端口 操作
    192.168.111.12 8080 查看详情 修改

    文字大纲

 五、本章知识点脑图

猜你喜欢

转载自www.cnblogs.com/gaodi2345/p/11412551.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022