django学习入门系列之第三点《案例 商品推荐部分》

news2024/11/19 12:38:49

文章目录

  • 划分区域
  • 搭建骨架
  • 完整代码
  • 小结
  • 往期回顾

在这里插入图片描述

划分区域

在这里插入图片描述

搭建骨架

/*商品图片，父级设置*/
.slider .sd-img{
        display: block;
        width: 1226px;
        height: 460px;
}

<!-- 商品推荐部分 -->
<!--搭建出一个骨架-->
<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="/static/b2.jpg" alt="">
        </div>
    </div>
</div>

<div class="news">
    <div class="container">
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
    </div>
</div>

完整代码

/*使外边距等于0，即让边框与界面贴合*/
body{
        margin: 0;
}

/*使图片都完全展开并防止超出限制*/
img{
        height: 100%;
        width: 100%;
}

/*头标部分*/
/*控制父级边框*/
.header{
        background: #333;
      }

/*控制子级边框*/
.container{
        width: 1226px;
        margin: 0 auto;
}

/*控制子级边框下的左边菜单栏*/
.header .menu{
        float: left;
      }

/*控制子级边框下的右边菜单栏*/
.header .account{
        float: right;
        color: #b0b0b0;
}

/*控制子级边框下的菜单栏中的span标签*/
.header a{
        color: #b0b0b0;
        line-height: 40px;
        display: inline-block;
        font-size: 12px;
        margin-right: 12px;
        text-decoration: none;
}

.header a:hover{
        color: white;
}

/*控制子级边框下的菜单栏中改变光标颜色*/
.header span:hover{
        color: white;

}


/*二级菜单部分*/
/*父级大框*/
.sub-header{
        height: 100px;
}

/*logo框*/
.sub-header .logo{
        width: 234px;
        height: 100px;
        float: left;
}

/*logo图片的大小设置*/
.sub-header .logo a img{
        height: 56px;
        width: 56px;
        display: inline-block;
        margin-top: 22px;
}

/*二级菜单中的小菜单边框*/
.sub-header .menu-list {
        float: left;
        line-height: 100px;
        font-size: 16px;

}

/*二级菜单中的小菜单中文字与超链接*/
.sub-header .menu-list a{
        display: inline-block;
        padding: 0 8px;
        font-family: Helvetica,sans-serif;
        color: #333;

        /*文字不想要下划线*/
        text-decoration: none;
}
/*二级菜单中的小菜单中移动光标改变颜色*/
.sub-header .menu-list a:hover{
        color: #ff6700;
}

.sub-header .search{
        float: right;
}


/*商品菜单部分*/

/*商品主图片的长宽设置*/
.slider .sd-img{
        display: block;
        width: 1226px;
        height: 460px;
        float: left;
}

/*下面第一张图片中的框架结构设置*/
.news .channel{
        margin-top: 14px;
        width: 228px;
        height: 164px;
        float: left;
        background: #5f5750;
        padding: 3px;
}
/*下面第一张图片中的小图标的框架与字体结构设置*/
.news .container .channel .item{
        width: 76px;
        height: 82px;
        float: left;
        text-align: center;
}


/*下面第一张图片中的小图标的超链接文字的颜色与字体设置*/
.news .channel .item a{
        display: inline-block;
        padding-top: 18px;
        text-decoration: none;
        color: #fff;
        opacity: 0.7;
        font-size: 12px;
        font-family: Helvetica,sans-serif;
}

/*光标移动到该位置时所对应的操作*/
.news .channel .item a:hover{
        opacity: 1;
}

/*超链接中的图片结构设置*/
.news .container .channel .item img{
        width: 24px;
        height: 24px;
        display: block;
        margin: 0 auto 4px;
}

/*其他三张图片框架的设置*/
.news .list-item{
        margin-top: 14px;
        margin-left: 14px;
        width: 316px;
        height: 170px;
        float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
  <link rel="stylesheet" href="/static/command.css">
</head>


<body>
<!-- 头标部分 -->
<div class="header">
    <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/">小米官网</a>
            <a href="https://www.mi.com/shop/">小米商城</a>
            <a href="https://home.miui.com/">MIUI</a>
            <a href="https://iot.mi.com/">loT</a>
            <a href="https://i.mi.com/">云服务</a>
            <a href="https://airstar.com/home">天星数科</a>
            <a href="https://www.xiaomiyoupin.com/">有品</a>
            <a href="https://xiaoai.mi.com/">小爱开放平台</a>
            <a href="https://https://qiye.mi.com/">企业团购</a>
            <a href="https://https://www.mi.com/aptitude/list/?id=88">资质证照</a>
            <a href="https://www.mi.com/shop/aptitude/list">规则协议</a>
            <a href="https://www.mi.com/appdownload">下载APP</a>
            <a href="https://www.mi.com/">Select Location</a>
        </div>

        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
            <a>购物车</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>


<!-- 二级菜单部分 -->
<div class="sub-header">
    <div class="container">
        <div class="logo">
            <a href="//www.mi.com" title="小米官网" class="logo ir">
                <img src="/static/logo-mi2.png" alt="">
            </a>
        </div>
        <div class="menu-list">
            <a href="https://www.bilibili.com/">Xiaomi手机</a>
            <a href="https://www.bilibili.com/">Redmi手机</a>
            <a href="https://www.bilibili.com/">电视</a>
            <a href="https://www.bilibili.com/">笔记本</a>
            <a href="https://www.bilibili.com/">平板</a>
            <a href="https://www.bilibili.com/">家电</a>
            <a href="https://www.bilibili.com/">路由器</a>
            <a href="https://www.bilibili.com/">服务中心</a>
            <a href="https://www.bilibili.com/">社区</a>

        </div>

        <div class="searcht"></div>

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


<!-- 商品推荐部分 -->
<!--搭建出一个骨架-->
<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="/static/b2.jpg" alt="">
        </div>
    </div>
</div>

<div class="news">
    <div class="container">
        <div class="channel">
            <div class="item">
                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search/">
                    <img src="/static/d1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://qiye.mi.com/">
                    <img src="/static/d2.png" alt="">
                    <span>企业团购</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/shop/order/fcode">
                    <img src="/static/d3.png" alt="">
                    <span>F码通道</span>
                </a>
            </div>
            <div class="item">
                <a href="https://10046.mi.com/">
                    <img src="/static/d4.png" alt="">
                    <span>米粉卡</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/a/h/16769.html">
                    <img src="/static/d5.png" alt="">
                    <span>以旧换新</span>
                </a>
            </div>
            <div class="item">
                <a href="https://account.xiaomi.com/fe/service/login/password?_locale=zh_CN&sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi.com%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi.com%2525252F%2526sid%253Drecharge%2526_locale%253Dzh_CN&callback=http%3A%2F%2Frecharge.10046.mi.com%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi.com%252F&_sign=P%2BzbqaqaY2j9zuZTC7mrhVJnmJo%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=">
                    <img src="/static/d6.png" alt="">
                   <span>话费充值</span>
                </a>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="list-item">
            <img src="/static/a1.jpg" alt="">
        </div>
        <div class="list-item">
            <img src="/static/a2.jpg" alt="">
        </div>
        <div class="list-item">
            <img src="/static/a3.jpg" alt="">
        </div>
        <div style="clear: both"></div>
    </div>
</div>
</body>
</html>



from flask import Flask,render_template

app = Flask(__name__)

# 创建了网址 /nima和函数index的对应关系
# 以后用户在浏览器上访问/nima自动运行函数
@app.route("/nima")
def index():
    """
    return "小米商城”
    Flask内部会自动打开这个文件并读取内容，返回给用户
    默认：去当前项目目录的templates文件夹中找
    """
    return render_template("text.html")


if __name__ == '__main__':
    app.run()

小结

  • 设置透明度
/*从0到1中选择*/
opacity: 1;

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】
13.【CSS基础样式介绍3】
14.【案例 小米商城头标】
15.【案例 小米商城头标总结】
16.【案例 小米商城二级菜单】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1867265.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

openwrt igmp 适配

openwrt igmp 适配

每弄完一次&#xff0c;过不多久就忘了&#xff0c;这次决心记下来。 openwrt 的igmpproxy 包是干嘛的&#xff1f;原来&#xff0c;组播包并不能穿透路由&#xff0c;也就是我们在wan端播放的组播视频流&#xff0c;lan端是没法收到的&#xff0c;igmpproxy就是用来打通wan端…
阅读更多...
【Linux】进程信号_3

【Linux】进程信号_3

文章目录 八、进程信号2. 信号的保存3. 信号的处理 未完待续 八、进程信号 2. 信号的保存 实际执行信号的处理动作称为信号递达(Delivery) 信号从产生到递达之间的状态,称为信号未决(Pending)。 进程可以选择阻塞 (Block )某个信号。 被阻塞的信号产生时将保持在未决状态,直到…
阅读更多...
网络问题排障专题-AF网络问题排障

网络问题排障专题-AF网络问题排障

目录 一、数据交换基本原理 1、ARP协议工作原理 数据包如图&#xff1a; 2、二层交换工作原理 简述核心概念&#xff1a; 二层交换原理-VLAN标签 3、三层交换工作原理 二、AF各种部署模式数据转发流程 1、路由模式数据转发流程 三、分层/分组逐一案例讲解 1、问题现…
阅读更多...
自然语言处理——英文文本预处理

自然语言处理——英文文本预处理

高质量数据的重要性 数据的质量直接影响模型的性能和准确性。高质量的数据可以显著提升模型的学习效果&#xff0c;帮助模型更准确地识别模式、进行预测和决策。具体原因包括以下几点&#xff1a; 噪音减少&#xff1a;高质量的数据经过清理&#xff0c;减少了无关或错误信息…
阅读更多...
redis哨兵模式（Redis Sentinel）

redis哨兵模式（Redis Sentinel）

哨兵模式的背景 当主服务器宕机后&#xff0c;需要手动把一台从服务器切换为主服务器&#xff0c;这就需要人工干预&#xff0c;费事费力&#xff0c;还会造成一段时间内服务不可用。这不是一种推荐的方式。 为了解决单点故障和提高系统的可用性&#xff0c;需要一种自动化的监…
阅读更多...
【D3.js in Action 3 精译】1.2.2 可缩放矢量图形（一）

【D3.js in Action 3 精译】1.2.2 可缩放矢量图形（一）

译注 由于 1.2.2 小节介绍 SVG 的篇幅过多&#xff0c;为了方便查阅&#xff0c;后续将分多个小节依次进行翻译。为了确保整个 1.2.2 小节的完整性&#xff0c;特意将上一篇包含的 SVG 小节的内容整理出来重新编排。敬请留意。 1.2.2 SVG - 可缩放矢量图形 可伸缩矢量图形&…
阅读更多...
Django-开发一个列表页面

Django-开发一个列表页面

需求 基于ListView,创建一个列表视图,用于展示"BookInfo"表的信息要求提供分页提供对书名,作者,描述的查询功能 示例展示: 1. 数据模型 models.py class BookInfo(models.Model):titlemodels.CharField(verbose_name"书名",max_length100)authormode…
阅读更多...
【STM32-存储器映射】

【STM32-存储器映射】

STM32-存储器映射 ■ STM32F1-4G地址空间分成8个块■ STM32F1-Block0■ STM32F1-Block1■ STM32F1-Block2■ STM32F1- ■ STM32F1-4G地址空间分成8个块 ■ STM32F1-Block0 有出厂 BootLoader 就可以使用串口下载程序。如Keil5图中IROM地址是0x8000000 开始 就是flash地址 ■ S…
阅读更多...
安装vue开发者工具

安装vue开发者工具

浏览器控制台提示&#xff1a; 打开网址 GitHub - vuejs/devtools: ⚙️ Browser devtools extension for debugging Vue.js applications. 点击添加 上图地址&#xff1a;Installation | Vue Devtools 安装好了
阅读更多...
线上民族传统服饰商城

线上民族传统服饰商城

摘 要 随着互联网的不断发展和普及&#xff0c;电子商务成为了人们生活中不可或缺的一部分。传统的线下购物方式逐渐被线上购物所取代&#xff0c;人们越来越习惯在互联网上购物。而民族传统服饰作为我国丰富多样的民族文化的重要组成部分&#xff0c;具有独特的艺术价值和商业…
阅读更多...
不是KVM不支持精简置备的磁盘，而是VMM

不是KVM不支持精简置备的磁盘，而是VMM

正文共&#xff1a;999 字 11 图&#xff0c;预估阅读时间&#xff1a;1 分钟 书接上文&#xff08;不会吧&#xff01;KVM竟然不支持磁盘的精简置备&#xff01;&#xff1f;&#xff09;&#xff0c;我们已经掌握了通过“虚拟系统管理器VMM”创建虚拟机的基本方法&#xff0c…
阅读更多...
vscode设置主题的颜色

vscode设置主题的颜色

点击主界面左下角的 展开的菜单中点击“themes” 点击“color themes” 选择颜色
阅读更多...
windows USB 设备驱动开发-总章

windows USB 设备驱动开发-总章

通用串行总线 (USB) 提供可扩展的即插即用串行接口&#xff0c;确保外围设备的标准、低成本的连接。 USB 设备包括键盘、鼠标、游戏杆、打印机、扫描仪、存储设备、调制解调器、视频会议摄像头等。USB-IF 是一个特别兴趣组 (SIG)&#xff0c;负责维护官方 USB 规范、测试规范和…
阅读更多...
浅谈Tomcat

浅谈Tomcat

文章目录 一、什么是Tomcat&#xff1f;二、Tomcat的下载安装三、使用tomcat访问资源 一、什么是Tomcat&#xff1f; Tomcat 就是一个 HTTP 服务器。 前面我们聊了HTTP服务器&#xff0c;像我们在网页输入URL&#xff0c;其实就是在给人家的HTTP服务器发送请求&#xff0c;既…
阅读更多...
如何使用sr2t将你的安全扫描报告转换为表格格式

如何使用sr2t将你的安全扫描报告转换为表格格式

关于sr2t sr2t是一款针对安全扫描报告的格式转换工具&#xff0c;全称为“Scanning reports to tabular”&#xff0c;该工具可以获取扫描工具的输出文件&#xff0c;并将文件数据转换为表格格式&#xff0c;例如CSV、XLSX或文本表格等&#xff0c;能够为广大研究人员提供一个…
阅读更多...
Renesas MCU使用SCI_I2C驱动HS3003

Renesas MCU使用SCI_I2C驱动HS3003

目录 概述 1 软硬件介绍 1.1 软件版本信息 1.2 认识HS3003 1.2.1 HS3003特性 1.2.2 HS3003寄存器 1.2.2.1 温湿度数据寄存器 1.2.2.2 参数寄存器 1.2.2.3 一个参数配置Demo 1.2.3 温湿度值转换 1.2.4 HS3003应用电路 1.2.4.1 PIN引脚定义 1.2.4.2 sensor 应用电路 …
阅读更多...
从零入门激光SLAM（十三）——LeGo-LOAM源码超详细解析3

从零入门激光SLAM（十三）——LeGo-LOAM源码超详细解析3

大家好呀&#xff0c;我是一个SLAM方向的在读博士&#xff0c;深知SLAM学习过程一路走来的坎坷&#xff0c;也十分感谢各位大佬的优质文章和源码。随着知识的越来越多&#xff0c;越来越细&#xff0c;我准备整理一个自己的激光SLAM学习笔记专栏&#xff0c;从0带大家快速上手激…
阅读更多...
grpc学习golang版（ 四、多服务示例）

grpc学习golang版（ 四、多服务示例）

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 文章目录 一、前言二、定义proto文件三、编写server服务端四、编写Client客户端五、测试六、示例代码 一、前言 多服务&#xff0c;即一个rpc提供多个服务给外界调用…
阅读更多...
js+php 上传文件到服务器

js+php 上传文件到服务器

https://andi.cn/page/621473.html
阅读更多...
沙盒在数据防泄密领域意义

沙盒在数据防泄密领域意义

在信息化快速发展的今天&#xff0c;数据已成为企业最宝贵的资产之一。然而&#xff0c;数据泄密事件频发&#xff0c;给企业的安全和发展带来了巨大威胁。SDC沙盒防泄密系统&#xff0c;作为一种创新的数据防泄密解决方案&#xff0c;正逐渐在数据防泄密领域发挥着越来越重要的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023