前端实训-----终篇

最新推荐文章于 2024-05-18 22:08:03 发布
最新推荐文章于 2024-05-18 22:08:03 发布
阅读量166 收藏 2
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45174301/article/details/121850883
版权

目录

1、思维导图：​

2、小米商城代码

3、百度网盘

1、思维导图：

2、小米商城代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>18160029 高汉斌</title>
    <link rel="stylesheet" href="./小米商城.css">
    <link rel="stylesheet" href="./小米商城-1.css">
    <link rel="stylesheet" href="./小米商城-2.css">
    <link rel="stylesheet" href="./小米商城-3.css">
    <!-- <link rel="stylesheet" href="./function setBodyWidth(){.js"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        a.bianshe:hover {
            color: white;
        }
        
        .yingchang {
            height: 0px;
            border: 0px;
            left: 1227px;
            z-index: 1;
            transition: height 1s;
        }
        
        .box3:hover>.yingchang {
            height: 100px;
            width: 314px;
            background: url(./图片/下滑背景1.png);
            border: 2px solid rgb(175, 171, 171);
            box-shadow: 2px 4px 2px rgb(175, 171, 171);
            border-right: none;
            border-bottom: none;
            border-top: none;
            box-sizing: border-box;
            position: absolute;
        }
        
        .box3:hover {
            background-color: white;
        }
        
        .box3 a:hover {
            color: red;
        }
    </style>
</head>
<link rel="stylesheet" href="./font_oro37pfqcc8/iconfont.css">
<link rel="stylesheet" href="./font_kzitzkkettp/iconfont.css">
<link rel="stylesheet" href="./font_u4ny5vtrn9/iconfont.css">
<link rel="stylesheet" href="./font_5pumfd163y7/iconfont.css">
<link rel="stylesheet" href="./font_4sc33nvgibq/iconfont.css">
<link rel="stylesheet" href="./font_deg77knisik/iconfont.css">
<link rel="stylesheet" href="./font_5iquhd98uri/iconfont.css">
<link rel="stylesheet" href="./font_pl3gxq7wxqo/iconfont.css">
<link rel="stylesheet" href="./font_n51uti5s5dg/iconfont.css">
<link rel="stylesheet" href="./font_rip1mb7rkxa/iconfont.css">
<link rel="stylesheet" href="./top-bar.css">

<body>

    <div class="bar-right">
        <ul>
            <li>
                <a href="#">
                    <div class="bar-link"><img src="./小图标/手机app.png" alt="" class="bar-image"><a href="#" class="bar-text">手机APP</a></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="bar-link"><img src="./小图标/个人中心.png" alt="" class="bar-image"><a href="#" class="bar-text">个人中心</a></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="bar-link"><img src="./小图标/手机app.png" alt="" class="bar-image"><a href="#" class="bar-text">联系客服</a></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="bar-link"><img src="./小图标/购物车.png" alt="" class="bar-image"><a href="#" class="bar-text">购物车</a></div>
                </a>
            </li>
            <li>
                <div class="little-box-none"></div>
            </li>
            <li>
                <a href="#">
                    <div class="bar-link"><img src="./小图标/售后服务.png" alt="" class="bar-image"><a href="#" class="bar-text">售后服务</a></div>
                </a>
            </li>
        </ul>
    </div>
    <div class="box">
        <div class="box1">
            <a href="" class="bianshe">小米商城</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">MIUI</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">IoT</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">云服务</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">天星数科</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">有品</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">小爱开放平台</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">企业团购</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">资质证照</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">协议规则</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="code">下载App
                <div class="a">
                    <div class="b" >
                    </div>
                </div>
            </a>
        </div>
        <div class="gekai"></div>
        <div class="box2">
            <a href="" class="bianshe">登录</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">注册</a>
            <span style="color: rgb(102, 94, 87);">|</span>
            <a href="" class="bianshe">消息通知</a>
        </div>
        <div class="box3">
            <a href="" class="iconfont" style="font-size: 11pt;">&#xf0075;购物车（0）</a>
            <div class="yingchang">
            </div>
        </div>
        <div style="background: rgb(51, 51, 51);height: 40px;width: 300px;top: -0px;left: 955px; position: absolute;">
            <a href="" style="line-height: 40px;">
            | 智能生活 | Select Location
        </a>
        </div>
    </div>

    <div id="header">
        <span class="iconfont" style="font-size: 40pt;color: rgb(250, 93, 45);
        line-height: 100px;
        float: left;
        margin-left: 320px;">&#xe613;</span>
        <div style="width: 170px;background:white;height: 100px;float: left;"></div>
        <ul class="topnav clearfix">
            <li><a href="">Xiaomi手机</a>
                <div class="ferst" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">Redmi 红米</a>
                <div class="f_1" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">电视</a>
                <div class="f_2" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">笔记本</a>
                <div class="f_3" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">平板</a>
                <div class="f_4" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">家电</a>
                <div class="f_5" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">路由器</a>
                <div class="f_6" style="text-indent: 20em;">

                </div>
            </li>
            <li><a href="">服务</a></li>
            <li><a href="">社区</a></li>
            <div id="serth">
                <form class="s_form" action="#">
                    <input class="s_put" type="text" placeholder="手机"><button class="s_buton iconfont">&#xe8d6;
        </button>
                    <div class="s_put1">
                        <ul>
                            <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>
                            <li><a href="">手机</a></li>
                        </ul>
                    </div>
                </form>
            </div>
    </div>
    </ul>
    </div>

    <div style="height: 2px;"></div>
    <div>
        <div id="banner">
            <ul id="b_nav">
                <li><a href=""><span>手机</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide">
                        <img src="./图片/1.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>电视</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_1">
                        <img src="./图片/2.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>笔记本 平板</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_2">
                        <img src="./图片/3.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>家电</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_3">
                        <img src="./图片/4.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>出行 穿戴</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_4">
                        <img src="./图片/5.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>智能 路由器</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_5">
                        <img src="./图片/6.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>电源 配件</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_6">
                        <img src="./图片/7.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>健康 儿童</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_7">
                        <img src="./图片/8.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>耳机 音箱</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_8">
                        <img src="./图片/9.png" alt="">
                    </div>
                </li>
                <li><a href=""><span>生活 箱包</span><span class="iconfont" style="float: right;margin-right: 20px;">&#xe62d;</span></a>
                    <div class="b_n_hide_9">
                        <img src="./图片/10.png" alt="">
                    </div>
                </li>
            </ul>
            <div class="prev"></div>
            <div class="next"></div>
            <div id="DD">
                <ol>
                    <li style="list-style: circle ;"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
        </div>
    </div>
    <div id="img_j">
        <div id="i_ferst">
            <div class="i_ferst1" style="text-align: center;">
                <div style="height: 20px;"></div>
                <a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont">&#xe61a;<p style="font-size: 10pt;">保障服务</p></a>
            </div>
            <div class="i_ferst2" style="text-align: center;">
                <div style="height: 20px;"></div>
                <a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont">&#xe610;<p style="font-size: 10pt;">企业团购</p></a>
            </div>
            <div class="i_ferst3" style="text-align: center;">
                <div style="height: 20px;"></div>
                <a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont">&#xf003d;<p style="font-size: 10pt;">F码通道</p></a>
            </div>
            <div class="i_ferst4" style="text-align: center;">
                <div style="height: 20px;"></div>
                <a href="" style="display: block;height: 79;width: 79;font-size: 18pt;" class="iconfont">&#xe649;<p style="font-size: 10pt;">米粉卡</p></a>
            </div>
            <div class="i_ferst5" style="text-align: center;">
                <div style="height: 20px;"></div>
                <a href="" style="display: block;height: 79;width: 79;font-size: 20pt;" class="iconfont">&#xe640;<p style="font-size: 10pt;">以旧换新</p></a>
            </div>
            <div class="i_ferst6" style="text-align: center;">
                <div style="height: 20px;"></div>
                <a href="" style="display: block;height: 79;width: 79;font-size: 20pt;" class="iconfont">&#xe6c8;<p style="font-size: 10pt;">话费充值</p></a>
            </div>
        </div>
        <div id="print">
            <a href="">
                <img src="./图片/最下面1.png" alt="">
            </a>
        </div>
        <div id="print1">
            <a href="">
                <img src="./图片/最下面2.png" alt="">
            </a>
        </div>
        <div id="print2">
            <a href="">
                <img src="./图片/最下面3.png" alt="">
            </a>
        </div>
    </div>

</body>
<div style="width: 1500px;height: 315px;background-color: rgb(250, 250, 250);position: relative;top: 10px;">
    <img src="./图片/125.png" alt="" style="width:1226px;height: 120px absolute;left: -50px;top: -5px;position: relative;left: 150px;">
</div>

</html>

3、百度网盘

链接：https://pan.baidu.com/s/1t5CeLTO-UP6brlnUL8HllQ 
留给自己的！

智商欠费不死也废i
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
终篇-安全自主可控发展之路
01-02
应用推广持续深化，特别是服务器操作系统，已经可以满足中低 端应用需求，并在向中高端应用发展 . .
前端实训
ustrivelife的博客
11-14 539
前端实训后续 一、重要含义 建立原则：做布局只考虑布局 做内容只考虑内容。 内容：布局外的统称为内容：文字、图片、音视频等。 标签 对布局和内容选择合适的标签，至关重要。 交互：多是在动画、特效、事件、及数据绑定，渲染等方面展开的内容。 基本布局学习：工 口、国。而一般大布局： 大页面框架多用工，T,I口。 注册界面、登陆界面：国字型。 设计模式：自适应：解决界面完整性的可视问题 主动。 响应...
JavaScript前端开发第一次课内实训
WHT869706733的博客
10-19 1225
1、计算年龄 内容:在页面中定义一个按钮,通过点击按钮跳出“请输入出生年份”输入框,用户输入年份后在页面上显示年龄。 要求:使用onclick()、prompt() if...else...语句。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算年龄</title> <script> function jsGetAge(){
web前端实训
weixin_37543460的博客
07-23 5491
HTML 学习总结 display：inline-block 用法与区别 div{ width:100%; margin:0 atuo } div居中 div{ text-align:center; } 内容居中 float的用法float
【前端】实训笔记
qq_36149079的博客
05-26 222
html5 列表 使用场景：多个相似结果 分类：有序、无序、自定义 无序 有序 span和p的区别 p标签是块元素，span标签行元素，行内元素即和其他行内元素排成一行，宽度随着内容变化而变化 元素的分类 行内[内联]元素（不独占一行，w、h无效,marging上下无效） <span><a><em><input><img> 块级元素（会独占一行，所有的css都有效） <div><p&gt..
Web前端实训day2
qianqianwanxing的博客
11-16 297
Web前端实训day2 float 浮动 指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。 （1）left 表明元素必须浮动在其所在的块容器左侧的关键字。 （2）right 表明元素必须浮动在其所在的块容器右侧的关键字。 （3）none 表明元素不进行浮动的关键字。 （4）inline-start 关键字，表明元素必须浮动在其所在块容器的开始一侧，在ltr脚本中是左侧，在rtl脚本中是右侧。 （5）in
LayaAir_简单跑酷JS版_-_05-终篇.zip_funnylkz_harborjqs_laya3Dqiuqiupaoku
07-15
layaair做的跑裤游戏，非常不错，用js开发的。
集成学习终篇：从CART回归树开始，经历BDT、GBDT彻底理解XGBoost - 知乎1
08-03
2.GBDT回归算法流程 3.GBDT二分类算法 4.GBDT多分类算法 1.XGBoost与GBDT的不同点 2.XGBoost损失函数推导 3.XGBoos
Anti-ADT:分析ADT原理用到的测试文件与demo
07-11
Anti-ADT解密ADT解密ADT第...解密ADT第二篇-编译APK资源解密ADT第三篇-java编译工具详解解密ADT第四篇-编译源码解密ADT第五篇-案例分析解密ADT终篇-RDT作者本文章 由 所写。文中所述仅代表个人理解,参照AIRSDK版本:3.5
MySql基础四之【终篇复杂查询】
04-28
本资源对应的是MySql基础三博客和MySql基础四之【终篇复杂查询】两篇内容操作的数据库表的SQL文件，直接运行便可以操作。
Web前端开发实训项目源代码
01-24
用bootstrap做的一个校园前端实训项目，有很强的参考价值。
大三前端实习日志
热门推荐
不认真写代码的姑娘
08-17 5万+
大三暑期选择实习：工作内容：前端web实习 实习地点：武汉光谷 公司规模：创业型公司，前端开发人数为9人，实习生5名1.实习内容总结：1.前端html+css页面结构培训实习内容：为完成UI设计稿到页面的实现。使用Photoshop切图，html+css完成页面制作 实习完成时间：5天 实习过程：前期： 到达公司，完成了基本的人事报到。找到自己座位，连接好电脑。公司中为迎接新人开了一个迎新会
前端实训之——前端基础
qq_45174301的博客
11-30 422
第一篇！
一个新进前端小白实习僧的初次探索
我是一只小前端
11-06 2309
我不怕万人阻挡，只怕自己投降 一个新进前端小白实习僧的初次探索在学校的时候写过几个静态页面、用过一些简单的JavaScript，写过一些基础的CSS，去应付课程项目，却也仅仅于此。 谁也没想到会阴差阳错的进入web前端这个行业。 俗话说：做一行爱一行 学习了一个多月，终于完成了一个相较于较为完整的demo，一个超市网页。完成了其中差不多完整的流程：登录->首页->商品详情页->购物车->商品搜索列
Web前端开发技术实训第一天
weixin_40909604的博客
06-17 1865
简易学习了HTML的语句 例如： span 是一个没有任何样式的段落标签 pre 是一个有带格式的p标签,可以保留缩进、换行（用于展示代码） div是没有任何样式的块级元素 用来包裹内容和分割内容 <iframe> 这是一个框架元素，用来显示其他内容 label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验 熟悉CSS的用法 例如： css选择器有5种...
web服务器开发课程项目实训,Web前端开发实训案例教程（初级）
weixin_45807706的博客
09-18 1621
目 录 第1章 实践概述 1 1．1 实践目标 1 1．2 实践知识地图 1 1．3 实施安排 6 1．3．1 实验部分(技术专题) 6 1．3．2 综合实践部分 11 第2章 网页设计与制作 19 2．1 实验目标 19 2．2 实验任务 19 2．3 设计思路 20 2．4 实验实施(跟我做) 20 2．4．1 步骤一：设计网页原型 20 2．4．2 步骤二：设计页面效果 21 2．4．3 步骤三：网页切图 22 2．4．4 步骤四：网页设计 25 第3章 开发工具(HB
分享几个前端实习or全职求职网站
无媛无故
05-09 3751
1. 看准网-查工资|聊面试|评公司|搜职位|中国领先的职场信息平台              http://www.kanzhun.com/           经常用这个网站查询公司，能得到一些关于公司的评价和福利情况。     2. 大街网_年轻人专属的社交招聘平台！           http://www.dajie.com         大街网经常会推送
2018/12/22 一位前端实习生 艰辛过程 励志 实习周记（一）—— 前言
徐磊
12-22 2万+
记录经历的真事，载入实习的日志 别人双12纷纷剁手，我双12找到实习，也算是在双12给我最好的礼物了 下面就是记载了我当时找实习的经历的一些真事，也算是给自己，给别人一些提示吧。 11月底，来杭州这边面试前端实习的，起初也是抱着试探，谦虚地心态来的，结果发现，问的问题都是概念上的问题，都没怎么问项目上的问题，可能是因为基础概念不清，以前学的那些，基本上全还给老师了。 面试完第一家，就觉得自己准备的...
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1184
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Nodejs util file getpost web express child_process mogodb
最新发布
ooo
05-18 926
Nodejs util file getpost web express child_process mogodb

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值