【四十四】Python全栈之路--小米商城首页

熬夜泡枸杞

已于 2022-01-22 22:24:20 修改

阅读量767

点赞数

分类专栏： Python 文章标签： html css js

于 2022-01-16 23:04:03 首次发布

本文链接：https://blog.csdn.net/weixin_46818279/article/details/122530777

版权

Python 专栏收录该内容

58 篇文章 71 订阅

订阅专栏

文章目录

1. 代码结构

效果图：

在这里插入图片描述
代码结构：

2. css

2.1 font.css

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../font/iconfont.woff2') format('woff2'),
        url('../font/iconfont.woff') format('woff'),
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg#iconfont') format('svg');
  }

.iconfont {
    font-family: "iconfont" !important;
    font-size: 20px;
    font-weight:bold;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

2.2 index.css

body
{height:2000px;}
/* <!-- 第一部分 --> margin和  第一个值是设置上下，第二个值设置左右 auto */
.topBarBanner
{width:100%;height:120px;}
.topBarBanner a
{display:inline-block;width:100%;height:120px;background: url(../images/ad.jpg) no-repeat;background-position: 50%;background-size: auto 100%;}

/* <!-- 第二部分 --> */
.topBar
{width:100%;height:40px;background-color:#333333;}
.topBar .container
{width:1226px;height:40px;margin:0px auto;overflow: hidden;}

/* part1 导航链接 */
.topBar .container .topBar-nav
{float:left;}
.topBar .container .topBar-nav a ,span
{display: inline-block;font-size:12px;color: #b0b0b0;height:40px;line-height: 40px;}
.topBar .container .topBar-nav span
{color:#424242;margin:0px 1px;}
.topBar .container .topBar-nav a:hover
{color:white;}

/* part2 登录 */
.topBar .container .topBar-login
{width:142px;height:40px;float:right;font-size:12px;color:#b0b0b0;padding-right:5px;}
.topBar .container .topBar-login a ,span
{display: inline-block;font-size:12px;color: #b0b0b0;height:40px;line-height: 40px;}
.topBar .container .topBar-login span
{color: #424242;margin:0px 1.5px;}
.topBar .container .topBar-login a:hover
{color:white;}
/* part3 购物车 */
.topBar .container .topBar-shopping
{float:right;width:120px;height:40px;line-height: 40px;background-color: #424242;text-align: center;}
.topBar .container .topBar-shopping a , strong
{font-size:12px;color:#b0b0b0;}
/* vertical-align:middle 图片和文字的垂直方向的对齐方式 */
.topBar .container .topBar-shopping strong
{font-size:18px;vertical-align:middle;}

.topBar .container .topBar-shopping:hover
{background: white;color:#ff6700;cursor: pointer;}
.topBar .container .topBar-shopping:hover a
{color:#ff6700;}
.topBar .container .topBar-shopping:hover strong
{color:#ff6700;}


/* <!-- 第三部分 --> */

/* head-logo */
.head
{height:100px;clear:both;overflow: hidden;}
.head .container
{width:1226px;height:100px; margin:0 auto;margin-top:10px;overflow: hidden;}
.head .container .head-logo
{float:left;margin-top:20px;}
.head .container .head-logo a
{display:inline-block;width:55px;height:55px;background: url("../images/mi-logo.png") no-repeat  50% 50%;;background-color: #FF6700;}

/* <!-- 导航列表 --> */
.head .container .head-lst
{float:left;height:100px;line-height:100px;padding-left:170px;}
.head .container .head-lst ul
{}
.head .container .head-lst ul li
{float:left;padding:0px 10px 0px;}
.head .container .head-lst ul li a
{font-size:16px;color:#333333;}
.head .container .head-lst ul li a:hover
{color:#ff6700;transition: all 0.5s;}

/* <!-- 搜索栏 --> */
.head .container .head-search
{float:right;margin-top:20px;}
.head .container .head-search form
{}
/* <!-- 输入框 --> */
.head .container .head-search form input[name=search]
{width:245px;height:50px;border:solid 1px #e0e0e0;float:left;padding-left:10px;}
.head .container .head-search form input[name=submit]
{
    width:52px;height:52px;border:solid 1px #e0e0e0;
    float:left;margin-left:-1px;font-weight: bold;
    color:#616161;background-color: white;
    cursor:pointer;
}
/* 鼠标滑动到按钮上时的效果 */
.head .container .head-search form input[name=submit]:hover
{background-color: #ff6700;color:white;transition: all 0.2s;}
/* 当表单光标聚焦时的效果 */
.head .container .head-search form input[name=search]:focus
{border:solid 1px #ff6700;transition: all 0.5s;}
/* 找紧挨着search表单的那个input */
.head .container .head-search form input[name=search]:focus+input
{border:solid 1px #ff6700;transition: all 0.5s;}



/* <!-- 第四部分 --> */
.content
{width:100%;overflow: hidden;}

/* 上半部分 */
.content .container1
{width:1226px;margin:0 auto;position:relative;}
.content .container1 .category
{position: absolute;top:0px;background-color: rgba(105,101,101,.6);width:234px;height:460px;overflow: hidden;}
.content .container1 .category ul 
{margin-top:20px;}
.content .container1 .category ul li
{}
.content .container1 .category ul li a
{font-size:14px;color:white;display:inline-block;width:214px;height:42px;line-height: 42px;padding-left:20px;}
.content .container1 .category ul li a:hover
{background-color: #FF6700;}
.content .container1 .category ul li a strong
{font-size:14px;color:white;float:right;margin-right:20px;}
.content .container1 a img
{width:1226px;height:460px;}

/* 下半部分 */
.content .container2
{width:1226px;clear:both;margin:0 auto;margin-top:10px;}

/* 下半部-左边部分 */
.content .container2 .channel-lst
{background-color: #5f5750;width:234px;height:170px;float:left;}

.content .container2 .channel-lst ul
{margin-left:5px;}

.content .container2 .channel-lst ul li 
{float:left;width:76px;height:82px;text-align: center;position: relative;}

.content .container2 .channel-lst ul li  a
{}

.content .container2 .channel-lst ul li  a img
{
    width:24px;height:24px;margin-top:15px;
    opacity:0.7;
}

.content .container2 .channel-lst ul li  a span
{display:block;margin-top:-10px;}

.content .container2 .channel-lst ul li  a:hover>img
{opacity:1;transition: all 0.3s;}

.content .container2 .channel-lst ul li  a:hover>span
{opacity:1;transition: all 0.6s;color:white;}


/* 上线框 */
.content .container2 .channel-lst ul li  a::before
{
    position: absolute;
    content: "";
    background: #665e57;
    top: 5px;
    left: 6px;
    width: 64px;
    height: 1px;
}
/* 左边框 */
.content .container2 .channel-lst ul li  a::after
{
    position: absolute;
    content: "";
    background: #665e57;
    top: 10px;
    left: 0;
    width: 1px;
    height: 70px;
}

/* 下半部 右边部分 */
.channel-ad
{float:right;}
.channel-ad ul
{}
.channel-ad ul li
{float:left;margin-left:13px;}
.channel-ad ul li a
{}
.channel-ad ul li a img
{width:316px;height:170px;}

2.3 reset.css

默认的一些设置：比如列表不要前面的黑点

*
{margin:0px;padding:0px;}
ul
{list-style:none}
a
{text-decoration: none;}
input
{outline: none;border:none;}

2. font

在这里插入图片描述

3. image

1miaosha.png：
请添加图片描述
ad.jpg：

ad22.jpg：

lunbo.jpg:

lunbo2.jpg:

mi-logo.png：

4. JavaScript

5. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <link href="css/reset.css" rel="stylesheet" type="text/css" />
    <link href="css/font.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="main">
        <!-- 第一部分 -->
        <div class="topBarBanner">
            <a href="#"></a>
        </div>
        <!-- 第二部分 -->
        <div class="topBar">
            <div class="container">
                <div class="topBar-nav">
                    <a href="#">小米商城</a>
                    <span>|</span>
                    <a href="#">MIUI</a>
                    <span>|</span>
                    <a href="#">IoT</a>
                    <span>|</span>
                    <a href="#">云服务</a>
                    <span>|</span>
                    <a href="#">天星数科</a>
                    <span>|</span>
                    <a href="#">有品</a>
                    <span>|</span>
                    <a href="#">小爱开放平台</a>
                    <span>|</span>
                    <a href="#">企业团购</a>
                    <span>|</span>
                    <a href="#">资质证照</a>
                    <span>|</span>
                    <a href="#">协议规则</a>
                    <span>|</span>
                    <a href="#">下载app</a>
                    <span>|</span>
                    <a href="#">智能生活</a>
                    <span>|</span>
                    <a href="#">Select Location</a>
                </div>
                <div class="topBar-shopping">
                    <strong class="iconfont">&#xe600;</strong>
                    <a href="">购物车</a>
                    <a href="">(0)</a>
                </div>
                <div class="topBar-login">
                    <a href="#">登录</a>
                    <span>|</span>
                    <a href="#">注册</a>
                    <span>|</span>
                    <a href="#">消息通知</a>
                </div>

            </div>
        </div>
        <!-- 第三部分 -->
        <div class="head">
            <div class="container">
                <!-- head-logo -->
                <div class="head-logo">
                    <a href="#"></a>
                </div>
                <!-- 导航列表 -->
                <div class="head-lst">
                    <ul>
                        <li><a href="#">小米手机</a></li>
                        <li><a href="#">Redmi 红米</a></li>
                        <li><a href="#">电视</a></li>
                        <li><a href="#">笔记本</a></li>
                        <li><a href="#">家电</a></li>
                        <li><a href="#">路由器</a></li>
                        <li><a href="#">智能硬件</a></li>
                        <li><a href="#">服务</a></li>
                        <li><a href="#">社区</a></li>   
                    </ul>
                </div>
                <!-- 搜索栏 -->
                <div class="head-search">
                    <!-- 输入框 -->
                    <form action="" method=""> 
                        <input type="text" name="search" placeholder="出行" />
                        <input type="submit" name="submit" class="iconfont" value="&#xe661;" />
                    </form>
                </div>
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="content">
            <div class="container1">
                <div class="category">
                    <ul>
                        <li><a href="#">收集电话卡11 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">收集电 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">收集电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">收集电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">收集电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">222收集电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">收333集电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                        <li><a href="#">收集电话卡 <strong class="iconfont">&#xe625;</strong> </a></li>
                    </ul>
                </div>
                <a href="#"><img src="images/lunbo2.jpg" /></a>
            </div>
            <div class="container2">
                <div class="channel-lst">
                    <ul>
                        <li><a href="#"><img src="images/1miaosha.png" /> <span>小米秒杀</span></a></li>
                        <li><a href="#"><img src="images/1miaosha.png" /> <span>企业团购</span></a></li>
                        <li><a href="#"><img src="images/1miaosha.png" /> <span>F码通道</span></a></li>
                        <li><a href="#"><img src="images/1miaosha.png" /> <span>米粉卡</span></a></li>
                        <li><a href="#"><img src="images/1miaosha.png" /> <span>以旧换新</span></a></li>
                        <li><a href="#"><img src="images/1miaosha.png" /> <span>花费充值</span></a></li>
                    
                    </ul>
                </div>
                <div class="channel-ad">
                    <ul>
                        <li><a href="#"><img src="images/ad22.jpg"></a></li>
                        <li><a href="#"><img src="images/ad22.jpg"></a></li>
                        <li><a href="#"><img src="images/ad22.jpg"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 第五部分 -->
        <div class="footer"></div>


    </div>
    
</body>
</html>

6. ajax异步传输技术

AJAX异步数据传输:（可以w3cschool网站学习）

ajax,谐音“阿贾克斯”,是英文Asynchronous Javascript And XML,
中文翻译为js与xml的异步传输技术.

效果:在不刷新页面的情况下,请求到后台数据.也叫网页无刷新技术.

ajax本质就是利用javascript提供的XMLHttpRequest对象 , 
代替浏览器地址中传递参数请求服务器的过程


api接口: 试用get方式获取天气数据;
http://wthrcdn.etouch.cn/weather_mini?city=城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js版本的 ajax 网页无刷新技术 </title>
</head>
<body>
    <input type="text" name="city" value="" /> <button id="btn">查询</button>
    <div id="info"></div>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var city = document.querySelector("input[name=city]");
            console.log(city.value);            

            // 1.创建ajax请求对象
            var xhr = new XMLHttpRequest();
            console.log(xhr)
            // 2.打开连接
            // 获取的地址:http://wthrcdn.etouch.cn/weather_mini?city=北京
            // 第三个参数可选 true 或者 false  默认true 代表异步 false 代表同步 可以不写
            xhr.open("get",`http://wthrcdn.etouch.cn/weather_mini?city=${city.value}`,false)  // false 同步程序 true 异步程序
            // 3.发送请求
            xhr.send();
            /*
                readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

                0: 请求未初始化
                1: 服务器连接已建立
                2: 请求已接收
                3: 请求处理中
                4: 请求已完成，且响应已就绪
            */

            // 4.每当 readyState 改变时，就会触发 onreadystatechange 事件
            xhr.onreadystatechange = function(){
                // 服务端的状态码为4 ,  客户端的状态码为200 , 代表数据已经传输完毕;
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        // console.log(xhr.responseText);
                        // 解析json格式的字符串 => js对象
                        var res = JSON.parse(xhr.responseText);
                        // console.log(res);
                        // console.log(res.data.forecast);
						// 获取一周天气数据
                        var data_lst = res.data.forecast
						// 拼装数据
                        var content = `<table border=1 width=600 >`;
                        content += `<tr> <th>天气</th> <th>天气</th> </tr>`;
                        for(var i of data_lst){
                            console.log(i);                          
                            content += `<tr> <th>${i.date}</th> <th>${i.type}</th> </tr>`;
                        }
                        content += `</table>`;
                        console.log(content);
                        // 获取info节点对象
                        var info = document.querySelector("#info");
                        // 把表格数据插入到info div当中;
                        info.innerHTML = content;
                    }
                }
            }

            console.log("我结束了 ... ")
            // document.write("我结束了 ... ")

        }
        // {date: "17日星期二", high: "高温 11℃", fengli: "<![CDATA[2级]]>", low: "低温 8℃", fengxiang: "东北风", …}
        // date: "17日星期二"
        // fengli: "<![CDATA[2级]]>"
        // fengxiang: "东北风"
        // high: "高温 11℃"
        // low: "低温 8℃"
        // type: "小雨"
        // __proto__: Object
    </script>
    
</body>
</html>

7. BOM对象location

location作用：负责刷新页面，跳转页面用的，可以获取地址栏上面的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BOM对象 location</title>
</head>
<body>
    <button onclick="func1()">查看location对象</button>
    <button onclick="func2()">跳转其他页面</button>
    <button onclick="func3()">刷新页面</button>
    <button onclick="func4()">过一秒在刷新页面</button>

    <script>

        function func1(){
            /* 链接地址:  http://ip + 端口号 + 路径 + 参数 + 锚点 */
            console.log(location);
            console.log(`协议:${location.protocol}`);
            console.log(`ip端口号:${location.host}`);
            console.log(`端口号:${location.port}`);
            console.log(`路径:${location.pathname}`);
            console.log(`获取锚点:${location.hash}`);
            console.log(`获取地址栏参数:${location.search}`);
            console.log(`完全地址:${location.href}`)
        }

        //跳转页面
        function func2(){
            // location.href = "http://www.baidu.com";方法一
            location.assign("http://www.jd.com");
        }

        //刷新页面
        function func3(){
            location.reload();
        }

        // 过一秒在刷新页面
        function func4(){
            setTimeout(func3,1000);
            console.log("我执行了...")
        }

        // 每过一秒刷新一下页面
        /* 等待所有页面图片文字全部加载完毕之后,再去执行对应的代码 */
        window.onload = function(){
            func4()
        }

    </script>
</body>
</html>

8. 小提示

1. 上面的ajax分为三个部分：
	a. 获取节点对象
	b. 事件绑定
	c. ajax
2. windows.open是跳转页面，location也可以跳转页面
3. 聚合数据网站（收费）：api   阿里矢量图网站： 小图片
4. ajax非常重要

熬夜泡枸杞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录