购物前台

最新推荐文章于 2024-06-20 01:54:58 发布

冬腊

最新推荐文章于 2024-06-20 01:54:58 发布

阅读量155

点赞数

分类专栏：程序之路文章标签： python html 购物页面

本文链接：https://blog.csdn.net/weixin_41772367/article/details/92426821

版权

本文介绍了使用Python构建的无CSS和JS的购物前台页面，包括页面的基本结构和效果图展示，重点在于展示纯Python生成的静态HTML代码。

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

一购物前台页面
没有css及js
二效果图
在这里插入图片描述

三代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl1{
            margin-left:8px;margin-right:8px
        }
        .cl2{
            margin-left:0px;margin-right:20px
        }
        .cl3{
            margin-left:4px;margin-top:5px;
        }
        .cl4{
            margin-left:20px;
        }
        .cl5{
            margin-left:60px;
        }
         .cl6{
            font-size:15px;font-weight:700;color:white;
        }
    </style>
    <style type="text/css">a {text-decoration: none;color:black;font-weight:600;}</style>  <!--注释所有a标签里的文字下划线,并将文字统一设为黑色-->
</head>
<body style="margin:0 auto;">
    <div style="width:91%;height:30px;background-color:#e6e3e3;margin:0 auto;line-height:30px;">
        <div style="float:left;">
            <a href="http://www.soso.com" class="cl1" target="_blank">收藏本站</a>
        </div>
        <div style="float:right;">
            <a href="http://www.soso.com" class="cl1" target="_blank">登陆</a>
            <a href="http://www.soso.com" class="cl1" target="_blank">注册</a>
            <a href="http://www.soso.com" class="cl1" target="_blank">我的订单</a>
            <a href="http://www.soso.com" class="cl1" target="_blank">我的收藏</a>
            <a href="http://www.soso.com" class="cl1" target="_blank">VIP会员俱乐部</a>
            <a href="http://www.soso.com" class="cl1" target="_blank">客户服务</a>
            <a target="_blank" href="http://www.soso.com" class="cl1">关注</a>
            <a href="http://www.soso.com" class="cl1" target="_blank">手机版</a>
        </div>
    </div> <!--头部-->
    <div style="width:60%;float:left;height:100px;margin-left:300px;">
        <div style="float:left;width:40%">
            <img style="height:80px;width:150px;padding-top:10px;padding-left:50px" src="感恩3.png" title="促销" alt="hehe"/>
        </div>
        <div style="float:right;width:60%;padding-top:20px;">
            <div>
                <input type="text" style="height:30px;width:300px;float:left;border:2px solid #e6e3e3;">
                <a href="abc.html" target="_blank">
                    <img src="搜索.png"  style="height:35px;">
                </a>
            </div>
            <div style="height:30px;width:300px;">
                <a>热门搜索：</a>
                <a href="搜索.png" target="_blank">火龙果</a>
                <a href="http://www.soso.com" target="_blank">瓜子</a>
            </div>
        </div>
    </div>      <!--中间的搜索框-->
    <div style="width:120px;float:left;height:100px;line-height:75px;">
        <!--<input style="font-size:19px;width:110px;height:40px;" type="button" value="购物车2件"/>-->
        <select name="shop" style="width:110px;height:40px;font-size:17px;">
            <optgroup  label="购物车 2 件"></optgroup>
            <option>汗大衣</option>
            <option>臭球鞋</option>
        </select>
    </div>      <!--搜索框旁边的下拉列表-->
    <div style="clear:both"></div>      <!--使接下来的div可以正常下移-->
    <div style="width:100%;height:40px;background-color:red;line-height:40px;">
        <div style="float:left;width:22%;height:40px;">
            <div style="width:80%;margin:0 auto;float:right;text-align:center;border:2px red;background-color:#e88c8c">
                <a class="cl6" href="http://www.soso.com" target="_blank">全部商品分类</a>
            </div>
        </div>
        <div style="float:left;width:50%;height:40px;">
            <div style="float:left;background-color:#c71515;width:10%;text-align:center;">
                <a class="cl6" href="http://www.soso.com" target="_blank">主页</a>
            </div>
            <div style="float:left;background-color:#c71515;width:10%;text-align:center;">
                <a class="cl6" href="http://www.soso.com" target="_blank">网

最低0.47元/天解锁文章

冬腊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
购物前台

一购物前台页面没有css及js二效果图三代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .cl1{ ...
复制链接

扫一扫