django学习入门系列之第三点《案例 小米商城二级菜单》

文章目录

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


样例

在这里插入图片描述

划分区域

在这里插入图片描述

搭建骨架

<!-- 二级菜单部分 -->
<div class="sub-header"><div class="container"><div class="logo">1</div><div class="search">2</div><div class="menu-list">3</div><div style="clear: both"></div></div>
</div>
/*二级菜单部分*/
.sub-header{height: 100px;background: pink;
}.sub-header .container{width: 1120px;margin: 0 auto;}.sub-header .logo{width: 234px;height: 100px;float: left;border: 1px solid red;
}.sub-header .menu-list {float: right;
}.sub-header .search{float: left;
}

logo区域

<!-- 注意图片地址。这个是要看存放位置的 -->
<div class="logo"><a href="//www.mi.com" title="小米官网" class="logo ir"><img src="/static/logo-mi2.png" alt=""></a>
/*小米图标大小设置*/
/*需要将a标签(行内标签)改为行内+块级标签这样的形势才能修改图片的位置,因为默认修改不了行内标签的长宽*/
.sub-header .logo a img{height: 56px;width: 56px;display: inline-block;margin-top: 22px;
}

完整代码

/*头标部分*/
/*使外边距等于0,即让边框与界面贴合*/
body{margin: 0;
}/*控制父级边框*/
.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: 15px;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 10px;color: #333;/*文字不想要下划线*/text-decoration: none;
}
/*二级菜单中的小菜单中移动光标改变颜色*/
.sub-header .menu-list a:hover{color: #ff6700;
}.sub-header .search{float: right;
}
<!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">3</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()

最终图片:
在这里插入图片描述

小结

  • a标签是行内标签,行内标签的高度,内外边距,默认修改不了

  • 垂直方向居中

    • 文本 + line-height
    • 图片 +编辑
  • a标签默认有下划线

  • 鼠标放上去以后hover

.c1:hover{color:颜色
}
/*当鼠标放上去的时候使用这个样式*/

往期回顾

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.【案例 小米商城头标总结】

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

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

相关文章

Python爬虫学习 | Scrapy框架详解

一.Scrapy框架简介 何为框架&#xff0c;就相当于一个封装了很多功能的结构体&#xff0c;它帮我们把主要的结构给搭建好了&#xff0c;我们只需往骨架里添加内容就行。scrapy框架是一个为了爬取网站数据&#xff0c;提取数据的框架&#xff0c;我们熟知爬虫总共有四大部分&am…

【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十七)

课程地址&#xff1a; 黑马程序员HarmonyOS4NEXT星河版入门到企业级实战教程&#xff0c;一套精通鸿蒙应用开发 &#xff08;本篇笔记对应课程第 27节&#xff09; P27《26.Stage模型-UIAbility的启动模式》 本节讲解 UIAbility的启动模式&#xff1a;Stage模型的应用&#x…

排序之插入排序----直接插入排序和希尔排序(1)

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 排序之插入排序----直接插入排序和希尔排序(1) 收录于专栏【数据结构初阶】 本专栏旨在分享学习数据结构学习的一点学习笔记&#xff0c;欢迎大家在评论区交流讨…

算法训练营day20--235. 二叉搜索树的最近公共祖先+701.二叉搜索树中的插入操作 +450.删除二叉搜索树中的节点

一、235. 二叉搜索树的最近公共祖先 题目链接&#xff1a;https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/ 文章讲解&#xff1a;https://programmercarl.com/0235.%E4%BA%8C%E5%8F%89%E6%90%9C%E7%B4%A2%E6%A0%91%E7%9A%84%E6%9C%80%E8%BF%91…

天马学航——智慧教务系统(移动端)开发日志三

天马学航——智慧教务系统(移动端)开发日志三 日志摘要&#xff1a;更新了学生选课模块、我的课程模块以及退课的功能&#xff0c;优化了后端数据库的缓存 1、学生选课模块 学生选课模块主要实现&#xff0c;学生根据需求进行选课操作&#xff0c;通过后端查询到所有教师的课…

一份简单的海外问卷,改变经济现状

在许多人看来&#xff0c;赚钱似乎总是与资金和技术密切相关。然而&#xff0c;即使没有丰富的资金和高超的技术&#xff0c;仍然有机会赚取可观的收入。 首先&#xff0c;需要明确的是&#xff0c;赚钱并非完全依赖于物质资本和技术能力。在这个充满机遇的时代&#xff0c;选…

深入源码设计!Vue3.js核心API——Computed实现原理

如果您觉得这篇文章有帮助的话&#xff01;给个点赞和评论支持下吧&#xff0c;感谢~ 作者&#xff1a;前端小王hs 阿里云社区博客专家/清华大学出版社签约作者/csdn百万访问前端博主/B站千粉前端up主 此篇文章是博主于2022年学习《Vue.js设计与实现》时的笔记整理而来 书籍&a…

谷歌云(GCP)4门1453元最热门证书限时免费考

谷歌云(GCP)最新活动&#xff0c;完成免费官方课程&#xff0c;送4门最热门考试免费考试券1张(每张价值200刀/1453元)&#xff0c;这4门也包括最近大热的AI/ML考试&#xff0c;非常值得学习和参加&#xff0c;活动7/17截止 谷歌云是全球最火的三大云计算厂商(前两名AWS, Azure…

投票多功能小程序(ThinkPHP+Uniapp+FastAdmin)

&#x1f389;你的决策小助手&#xff01; 支持图文投票、自定义选手报名内容、自定义主题色、礼物功能(高级授权)、弹幕功能(高级授权)、会员发布、支持数据库私有化部署&#xff0c;Uniapp提供全部无加密源码。​ 一、引言&#xff1a;为什么我们需要多功能投票小程序&#…

NSSCTF中的[WUSTCTF 2020]朴实无华、[FSCTF 2023]源码!启动! 、[LitCTF 2023]Flag点击就送! 以及相关知识点

目录 [WUSTCTF 2020]朴实无华 [FSCTF 2023]源码&#xff01;启动! [LitCTF 2023]Flag点击就送&#xff01; 相关知识点 1.intval 绕过 绕过的方式&#xff1a; 2.session伪造攻击 [WUSTCTF 2020]朴实无华 1.进入页面几乎没什么可用的信息&#xff0c;所以想到使用dis…

【c语言】二级指针

1&#xff0c;定义 本质还是从指针的角度去理解&#xff0c;只不过存的指针的值 2&#xff0c;使用方法

Android使用DevRing框架搭建数据库实体类以及使用

一、引用DevRing依赖 //导入DevRing依赖implementation com.ljy.ring:devring:1.1.8创建数据库表的依赖implementation org.greenrobot:greendao:3.2.2 // add libraryimplementation org.greenrobot:greendao-generator:3.0.0 二、修改工程目录下的.idea->gradle.xml文件&…

Golang笔记:使用serial包进行串口通讯

文章目录 目的使用入门总结 目的 串口是非常常用的一种电脑与设备交互的接口。这篇文章将介绍golang中相关功能的使用。 本文使用的包为 &#xff1a;go.bug.st/serial https://pkg.go.dev/go.bug.st/serial https://github.com/bugst/go-serial 另外还有一些常见的包如&…

Springboot民宿信息管理系统-计算机毕业设计源码08818

摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于站在的角度存在偏差&#xff0c;人们经常能够获得不同类型信息&#xff0c;这也是技术最为难以攻克的课题。针对民宿信息管理系统等问题&#xff0c;对民宿…

大模型应用研发基础环境配置(Miniconda、Python、Jupyter Lab、Ollama等)

老牛同学之前使用的MacBook Pro电脑配置有点旧&#xff08;2015 年生产&#xff09;&#xff0c;跑大模型感觉有点吃力&#xff0c;操作起来有点卡顿&#xff0c;因此不得已捡起了尘封了快两年的MateBook Pro电脑&#xff08;老牛同学其实不太喜欢用 Windows 电脑做研发工作&am…

Ant Design Vue Cascader 级联选择 错位问题

当Cascader 多个的时候 对应的下列会错位 如果滚动 他不会跟着元素 而是会跟着屏幕滚动&#xff0c;如下效果 解决方法 在Cascader 标题添加 getPopupContainer 属性监听对应的位置&#xff0c;返回对应的元素 <a-cascader class"smart-width-100 " v-model:…

Sam Altman:从少儿奇才到OpenAI掌舵人

自2022年底发布了ChatGPT以来&#xff0c;OpenAI及其首席执行官Sam Altman迅速成为科技界的焦点人物。Altman的崛起并非偶然&#xff0c;而是长期以来不断追求权力和创新的结果。本文将回顾Altman的成长历程&#xff0c;探索他如何一步步走向OpenAI的顶峰。 童年与教育背景 S…

亚马逊云科技官方活动:一个月拿下助理架构师SAA+云从业者考试认证(送半价折扣券)

为了帮助大家考取AWS SAA和AWS云从业者认证&#xff0c;小李哥争取到了大量考试半价50%折扣券&#xff0c;使用折扣券考试最多可省75刀(545元人民币)。 领取折扣券需要加入云师兄必过班群&#xff0c;在群中免费领取。目前必过班群招募到了超过200名小伙伴&#xff0c;名额有限…

YOLOv8关键点pose训练自己的数据集

这里写自定义目录标题 YOLOv8关键点pose训练自己的数据集一、项目代码下载二、制作自己的关键点pose数据集2.1 标注(非常重要)2.1.1 标注软件2.1.2 标注注意事项a.多类别检测框b.单类别检测框2.2 格式转换(非常重要)2.3 数据集划分三、YOLOv8-pose训练关键点数据集3.1 训练…

任务3.8.4 利用RDD实现分组排行榜

文章目录 1. 任务说明2. 解决思路3. 准备成绩文件4. 采用交互式实现5. 采用Spark项目实战概述&#xff1a;使用Spark RDD实现分组排行榜任务背景任务目标技术选型实现步骤1. 准备数据2. 数据上传至HDFS3. 启动Spark Shell4. 读取数据生成RDD5. 数据处理6. 计算TopN7. 输出结果8…