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

文章目录

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

在这里插入图片描述

划分区域

在这里插入图片描述

搭建骨架

/*商品图片，父级设置*/
.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_templateapp = 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.mzph.cn/pingmian/35958.shtml

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

相关文章

提高开发效率之——工具介绍

提高开发效率之——工具介绍

一 . SerialDebug 串口调试工具 SerialDebug 是一个串口调试工具&#xff0c;它主要用于帮助电子工程师和软件开发者进行串口通信的调试工作。以下是 SerialDebug 工具的一些主要作用和特点: 基础串口通信功能&#xff1a;提供打开、关闭、接收、发送数据的基础串口操作。 数…
阅读更多...
.NET C# 使用OpenCV实现人脸识别

.NET C# 使用OpenCV实现人脸识别

.NET C# 使用OpenCV实现模型训练、人脸识别 码图~~~ 1 引入依赖 OpenCvSHarp4 - 4.10.0.20240616 OpenCvSHarp4.runtime.win - 4.10.0.20240616 2 人脸数据存储结构 runtime directory | face | {id}_{name} | *.jpg id - 不可重复 name - 人名 *.jpg - 人脸照片3 Demo 3.…
阅读更多...
前置章节-熟悉Python、Numpy、SciPy和matplotlib

前置章节-熟悉Python、Numpy、SciPy和matplotlib

目录 一、编程环境-使用jupyter notebook 1.下载homebrew包管理工具 2.安装Python环境 3.安装jupyter 4.下载Anaconda使用conda 5.使用conda设置虚拟环境 二、学习Python基础 1.快排的Python实现 (1)列表推导-一种创建列表的简洁方式 (2)列表相加 2.基本数据类型及运…
阅读更多...
FastGPT 调用Qwen 测试Hello world

FastGPT 调用Qwen 测试Hello world

Ubuntu 安装Qwen/FastGPT_fastgpt message: core.chat.chat api is error or u-CSDN博客 参考上面文档 安装FastGPT后 登录&#xff0c; 点击右上角的 新建 点击 这里&#xff0c;配置AI使用本地 ollama跑的qwen模型 问题&#xff1a;树上有3只鸟&#xff0c;开了一枪&#…
阅读更多...
使用CDN方式创建Vue3.0应用程序

使用CDN方式创建Vue3.0应用程序

CDN 的全称是 content delivery network&#xff0c;即内容分发网络。它是构建在现在的互联网基础之上的一层智能虚拟网络&#xff0c;依靠部署在各地的边缘服务器&#xff0c;通过中心平台的负载均衡、内容分发和调度等功能模块&#xff0c;使用户就近获取所需内容&#xff0c…
阅读更多...
matlab量子纠缠态以及量子门操作下的量子态

matlab量子纠缠态以及量子门操作下的量子态

前言 今天我们来聊聊题外话&#xff0c;量子纠缠&#xff0c;在目前物理分支中&#xff0c;要说最深&#xff0c;最能改变人类对宇宙影响的莫过于量子力学了&#xff0c;假如我们可以人为的对两个粒子施加纠缠态&#xff0c;那么我们将可以足不出户的完成对外界的操控 简介 …
阅读更多...
《TopFormer: Token Pyramid Transformer for Mobile Semantic Segmentation》

《TopFormer: Token Pyramid Transformer for Mobile Semantic Segmentation》

期刊&#xff1a;CVPR 年份&#xff1a;2022 代码&#xff1a;https://github.com/hustvl/TopFormer 摘要 尽管视觉Transformer(ViTs)在计算机视觉领域取得了巨大的成功&#xff0c;但沉重的计算成本阻碍了它们在密集预测任务中的应用&#xff0c;如移动设备上的语义分割。…
阅读更多...
Superagent：一个开源的AI助手框架与API

Superagent：一个开源的AI助手框架与API

在人工智能日益普及的今天，如何将AI助手无缝集成到应用中成为了开发者们关注的焦点。今天，我们要介绍的Superagent正是一个为这一需求量身打造的开源框架与API。它结合了LLM、检索增强生成（RAG）和生成式AI技术，为开发者们提供了一个强大而灵活的解决方案。 一、Superagen…
阅读更多...
电阻屏和电容屏

电阻屏和电容屏

目录 一、电阻屏 1.欧姆定律 2.电阻屏原理 &#xff08;1&#xff09;测量 X 坐标 &#xff08;2&#xff09;测量 Y 坐标 3.电阻屏数据 二、电阻屏 1.原理 2.电容屏数据 &#xff08;1&#xff09;Type A &#xff08;2&#xff09;Type B 3.电容屏的实验数据 一、…
阅读更多...
实战案例：如何用ChatGPT生成适合不同领域的高质量文章

实战案例：如何用ChatGPT生成适合不同领域的高质量文章

随着人工智能技术的飞速发展&#xff0c;生成高质量文章已经不再是难题。特别是OpenAI开发的ChatGPT&#xff0c;更是为写作工作带来了极大的便利。那么&#xff0c;如何用ChatGPT生成适合不同领域的高质量文章呢&#xff1f;本文将通过实战案例&#xff0c;为大家详细讲解这一…
阅读更多...
ARM 240625

ARM 240625

练习&#xff1a; 汇编实现1-100累加&#xff0c;结果保存在r0 .text 声明下面内容都属于文本段内容 .globl _start 声明 _start 是一个全局启用的标签_start: 封装 _start 标签&#xff0c;汇编的标签和C中函数类似mov r0,#0 mov 把0 搬运到 r0 寄存器mov r1,#1 mov 把1 …
阅读更多...
DWC USB2.0协议学习2--架构介绍

DWC USB2.0协议学习2--架构介绍

目录 1 系统级架构 1.1 DWC_otg PMU模块 1.2 DWC_otg层次结构框图 1.3 DWC_otg功能模块框图 1.4 USB Host体系结构 1.4.1 发送FIFO 1.4.2 接收FIFO 1.5 USB Device体系结构 1.5.1专用发送FIFO 1.5.2 单个接收FIFO 2 DWC_otg_core架构 2.1 AHB总线接口单元(BIU) 2.2…
阅读更多...
SAP揭秘者-在QM标准功能增加取消UD的功能第二季

SAP揭秘者-在QM标准功能增加取消UD的功能第二季

文章摘要&#xff1a; 上篇文章我已经给大家介绍怎么开发两个程序来取消UD&#xff0c;但是上篇文章中有提到这个时候去直接执行ZQEVAC40程序去取消物料凭证 则会报错&#xff0c;那么为了解决这个报错&#xff0c;我们需要更改后台配置。 接下来我给大家讲后台配置该怎么配置&…
阅读更多...
浅谈Tomcat

浅谈Tomcat

文章目录 一、什么是Tomcat&#xff1f;二、Tomcat的下载安装三、使用tomcat访问资源 一、什么是Tomcat&#xff1f; Tomcat 就是一个 HTTP 服务器。 前面我们聊了HTTP服务器&#xff0c;像我们在网页输入URL&#xff0c;其实就是在给人家的HTTP服务器发送请求&#xff0c;既…
阅读更多...
华为MDC开发者调试工具以及配置使用介绍

华为MDC开发者调试工具以及配置使用介绍

MDC的开发过程的三大工具&#xff1a;MMC、MDS、Mind Studio&#xff0c;这三个工具完成了开发过程中的配置文件编写、代码编写以及AI模型的开发三个任务。除了开发&#xff0c;MDC还准备了两个调试工具&#xff0c;用于使用过程中数据的查看等。这一些调试工具分别对映射MDC中…
阅读更多...
802.11漫游流程简单解析与笔记_Part2_02_wpa_supplicant、cfg80211、nl80211内核与驱动的关系

802.11漫游流程简单解析与笔记_Part2_02_wpa_supplicant、cfg80211、nl80211内核与驱动的关系

wpa、cfg80211、nl80211内核与驱动的关系示意图如下&#xff1a; nl80211和cfg80211都是内核定义的标准接口&#xff0c;目的是规范驱动和应用的统一调用&#xff0c;wpa中常出现nl80211就是通过内核的nl80211接口调用对应cfg80211的部分&#xff0c;进而控制驱动收发数据或切换…
阅读更多...
AI技术与艺术的融合：开创性的用户界面与产品体验

AI技术与艺术的融合：开创性的用户界面与产品体验

引言 近年来&#xff0c;人工智能&#xff08;AI&#xff09;的飞速发展改变了我们的生活和工作方式。AI技术不仅在算力和模型上取得了重大进步&#xff0c;更在用户界面和产品体验方面迎来了突破。近日&#xff0c;科技博客 Stratechery 的文章以及硅谷投资基金 AI Grant 的两…
阅读更多...
高频面试题基本总结回顾2（含笔试高频算法整理）

高频面试题基本总结回顾2（含笔试高频算法整理）

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…
阅读更多...
没有采用框架的LeSS导入

没有采用框架的LeSS导入

我提倡在使用LeSS中平衡框架导向和实验导向。因为框架导向已经挺强了&#xff0c;我想更多地展开实验导向。有可能不采用LeSS框架来导入LeSS吗&#xff1f;我认为是可能的&#xff0c;因为那其实就是受LeSS实验启发的持续改进。 受LeSS实验启发的持续改进 让我来分两部分加以…
阅读更多...
Docker 命令——安全

Docker 命令——安全

我们将学习两个命令。第一个命令是 docker container run 命令&#xff0c;这样你就能看到使用该命令的一些好处。其次&#xff0c;我们将看看 docker container diff 命令&#xff0c;你可以用它来查看在已有的镜像基础上做了什么。让我们看看如何使用这两个命令来确保容器的安…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023