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

铁匠匠匠2024-06-30 14:59

文章目录

划分区域

搭建骨架

css 复制代码 
/*商品图片，父级设置*/
.slider .sd-img{
        display: block;
        width: 1226px;
        height: 460px;
}
html 复制代码 
<!-- 商品推荐部分 -->
<!--搭建出一个骨架-->
<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>

完整代码

css 复制代码 
/*使外边距等于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;
}
html 复制代码 
<!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>
python 复制代码 
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()

小结

  • 设置透明度
css 复制代码 
/*从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.【案例 小米商城二级菜单】

相关推荐
恋猫de小郭7 小时前
Flutter Zero 是什么？它的出现有什么意义？为什么你需要了解下？
android·前端·flutter
一只大侠的侠12 小时前
Flutter开源鸿蒙跨平台训练营 Day 10特惠推荐数据的获取与渲染
flutter·开源·harmonyos
寻星探路12 小时前
【深度长文】万字攻克网络原理：从 HTTP 报文解构到 HTTPS 终极加密逻辑
java·开发语言·网络·python·http·ai·https
崔庆才丨静觅14 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606114 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了14 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅14 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
ValhallaCoder14 小时前
hot100-二叉树I
数据结构·python·算法·二叉树
执笔论英雄15 小时前
【大模型学习cuda】入们第一个例子-向量和
学习
wdfk_prog15 小时前
[Linux]学习笔记系列 -- [drivers][input]input
linux·笔记·学习
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南06Linux下V2Ray安装配置指南07OpenClaw Chrome扩展使用教程 - 浏览器中继控制08Claude Code Skills 实用使用手册09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10Vue-skills的中文文档