HTML期末作业课程设计期末大作业--小米网站开发者平台首页 1页

news2024/11/25 14:32:17

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制| HTML期末大学生网页设计作业,Web大学生网页

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

在这里插入图片描述

HTML结构代码



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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/loTDeveloperPlatform.css">
</head>

<body>
    <header>
        <div class="nav-father">
            <nav>
                <a href="#">
                    <img src="picture/1.png" alt="">
                </a>
                <ul>
                    <li class="first-link"><a href="#">首页</a></li>
                    <li><a href="#">开发引导</a></li>
                    <li><a href="#">登录/注册</a></li>
                </ul>
            </nav>
        </div>

        <div class="slide-show">

            <ul>
                <li>
                    <div class="introduce-box">
                        <div>
                            <p>MIUI 10 · 手机就是智控中心0</p>
                        </div>
                        <div>
                            <p>MIUI 10 支持对小米IoT设备进行闪电连接和快捷控制</p>
                            <p>智能硬件直连接入平台即可拥有</p>
                        </div>
                        <div><a href="#">了解更多</a></div>
                    </div>
                </li>
                <li>
                    <div class="introduce-box">
                        <div>
                            <p>开放云对云接入方案1</p>
                        </div>
                        <div>
                            <p>连接第三方平台的智能硬件也可以接入小爱同学</p>
                            <p>AI时代尽享语音智控</p>
                        </div>
                        <div><a href="#">了解更多</a></div>
                    </div>
                </li>
                <li>
                    <div class="introduce-box">
                        <div>
                            <p>MIUI 10 · 手机就是智控中心2</p>
                        </div>
                        <div>
                            <p>MIUI 10 支持对小米IoT设备进行闪电连接和快捷控制</p>
                            <p>智能硬件直连接入平台即可拥有</p>
                        </div>
                        <div><a href="#">了解更多</a></div>
                    </div>
                </li>
                <li>
                    <div class="introduce-box">
                        <div>
                            <p>开放云对云接入方案3</p>
                        </div>
                        <div>
                            <p>连接第三方平台的智能硬件也可以接入小爱同学</p>
                            <p>AI时代尽享语音智控</p>
                        </div>
                        <div><a href="#">了解更多</a></div>
                    </div>
                </li>
            </ul>


            <div class='click-box'>
                <span class="slide-click left bg-white"></span>
                <span class="slide-click right"></span>
            </div>

        </div>
    </header>


    <div class="content">
        <section class="sec-one">
            <ul>
                <li class="upward-move"><img src="picture/12.png" alt=""></li>
                <li class="upward-move"><img src="picture/2.png" alt=""></li>
                <li class="upward-move"><img src="picture/3.png" alt=""></li>
                <li class="upward-move"><img src="picture/4.png" alt=""></li>
            </ul>
        </section>
        <section class="sec-two">
            <p class="title">关于平台</p>
            <p class="title-description ">小米IoT开发者平台面向智能家居、智能家电、健康可穿戴、出行车载等领域,开放智能硬件接入、智能硬件控制、</p>
            <p class="title-description">自动化场景、AI技术、新零售渠道等小米特色优质资源,与合作伙伴一起打造极致的物联网体验。</p>
            <div class="mar-top-70">
                <ul>
                    <li><img src="picture/1.jpg" alt=""></li>
                    <li><img src="picture/2.jpg" alt=""></li>
                    <li><img src="picture/3.jpg" alt=""></li>
                    <li><img src="picture/4.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/5.jpg" alt=""></li>
                    <li><img src="picture/6.jpg" alt=""></li>
                    <li><img src="picture/7.jpg" alt=""></li>
                    <li><img src="picture/8.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/9.jpg" alt=""></li>
                    <li><img src="picture/10.jpg" alt=""></li>
                    <li><img src="picture/11.jpg" alt=""></li>
                    <li><img src="picture/12.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/13.jpg" alt=""></li>
                    <li><img src="picture/14.jpg" alt=""></li>
                    <li><img src="picture/15.jpg" alt=""></li>
                    <li><img src="picture/16.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/17.jpg" alt=""></li>
                    <li><img src="picture/18.jpg" alt=""></li>
                    <li><img src="picture/19.jpg" alt=""></li>
                    <li><img src="picture/20.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/21.jpg" alt=""></li>
                    <li><img src="picture/22.jpg" alt=""></li>
                    <li><img src="picture/23.jpg" alt=""></li>
                    <li><img src="picture/24.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/1.jpg" alt=""></li>
                    <li><img src="picture/2.jpg" alt=""></li>
                    <li><img src="picture/3.jpg" alt=""></li>
                    <li><img src="picture/4.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/5.jpg" alt=""></li>
                    <li><img src="picture/6.jpg" alt=""></li>
                    <li><img src="picture/7.jpg" alt=""></li>
                    <li><img src="picture/8.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/9.jpg" alt=""></li>
                    <li><img src="picture/10.jpg" alt=""></li>
                    <li><img src="picture/11.jpg" alt=""></li>
                    <li><img src="picture/12.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/13.jpg" alt=""></li>
                    <li><img src="picture/14.jpg" alt=""></li>
                    <li><img src="picture/15.jpg" alt=""></li>
                    <li><img src="picture/16.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/17.jpg" alt=""></li>
                    <li><img src="picture/18.jpg" alt=""></li>
                    <li><img src="picture/19.jpg" alt=""></li>
                    <li><img src="picture/20.jpg" alt=""></li>
                </ul>
                <ul>
                    <li><img src="picture/21.jpg" alt=""></li>
                    <li><img src="picture/22.jpg" alt=""></li>
                    <li><img src="picture/23.jpg" alt=""></li>
                    <li><img src="picture/24.jpg" alt=""></li>
                </ul>


            </div>
        </section>
        <section class="sec-three">
            <p class="title">合作方案</p>
            <div class="mar-top-70">
                <ul>
                    <li>
                        <div class="upward-move"><img src="picture/5.png" alt=""></div>
                        <p>直连接入</p>
                        <p>智能硬件通过嵌入小米智能模组或集成SDK的方式连接到小米IoT平台。</p>
                        <p>适合无自有云平台的开发者,或者希望产品上架小米有品的开发者。</p>
                        <div><a href="#">了解更多</a></div>
                    </li>
                    <li>
                        <div class="upward-move"><img src="picture/6.png" alt=""></div>
                        <p>云对云接入</p>
                        <p>智能硬件通过自有云平台连接到小米IoT平台</p>
                        <p>适合有自有云平台的开发者,或者希望产品仅接入小爱的开发者。</p>
                        <div><a href="#">了解更多</a></div>
                    </li>
                </ul>
            </div>
        </section>
        <section class="sec-four">
            <p class="title">合作流程</p>
            <ul>
                <li>
                    <div><img src="picture/7.png" alt=""></div>
                    <p>成为开发者</p>
                    <p>注册开发者资质,获得平台</p>
                    <p>使用开发权限</p>
                    <hr>
                </li>
                <li>
                    <div><img src="picture/8.png" alt=""></div>
                    <p>创建产品</p>
                    <p>确定产品功能与技术方案,</p>
                    <p>正式立项</p>
                    <hr>
                </li>
                <li>
                    <div><img src="picture/9.png" alt=""></div>
                    <p>研发产品</p>
                    <p>开发产品软硬件功能,自行</p>
                    <p>测试通过</p>
                    <hr>
                </li>
                <li>
                    <div><img src="picture/10.png" alt=""></div>
                    <p>认证产品</p>
                    <p>寄送产品样机和测试报告,</p>
                    <p>由平台检验确认</p>
                    <hr>
                </li>
                <li>
                    <div><img src="picture/11.png" alt=""></div>
                    <p>发布产品</p>
                    <p>获得平台授权,进行产品销</p>
                    <p>售和推广</p>
                </li>
            </ul>
            <div>
                <a href="#">申请合作</a>
            </div>
        </section>
    </div>



    <footer>
        <section class="sec-video">
            <div>
                <div><img src="picture/21.png" alt=""></div>
                <p>极致物联 智享生活</p>
            </div>
        </section>
        <section class="sec-friendLink">
            <div class="box">
                <div>
                    <p>关于平台</p>
                    <p><a href="#">平台介绍</a></p>
                    <p><a href="#">直连接入方案</a></p>
                    <p><a href="#">云对云接入方案</a></p>
                    <p><a href="#">小米模组采购</a></p>
                    <p><a href="#">服务协议</a></p>
                </div>
                <div>

                    <p>友情链接</p>
                    <p><a href="#">小米生态云</a></p>
                    <p><a href="#">小米开放平台</a></p>
                    <p><a href="#">小米商城</a></p>
                    <p><a href="#">小米有品</a></p>
                    <p><a href="#">联系我们</a></p>
                </div>
                <div>
                    <p>联系我们</p>
                    <p><a>邮箱:miot-openhome@xiaomi.com</a></p>
                </div>
            </div>

        </section>
        <section class="sec-policeNum">
            <p>京ICP证110507号 京ICP备100463444号 京公网安备1101085212535号</p>
        </section>
    </footer>

    <div class="modal-box">
        <div>
            <div class="btn-close">X</div>
            <video src="./video/loTDeveloperPlatform/1.mp4" autoplay="" controls=""></video>
        </div>
    </div>


</body>

</html>


学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MyBatis学习笔记(2022-11-30)

熬过无人问津的日子才会有诗和远方。 文章目录一、MyBatis简述二、快速入门三、MyBatis配置文件详解1. MyBatis核心配置文件1.1 configuration&#xff08;配置&#xff09;1.2 properties&#xff08;属性&#xff09;1.3 environments&#xff08;环境配置&#xff09;1.4 ty…

vue项目 element UI input框扫码枪扫描过快 出现数据丢失问题(已解决二)

项目需求: 输入框要掉两个接口&#xff0c;根据第一个验证接口返回的code&#xff0c;弹不同的框&#xff0c;点击弹框确认再掉第二个接口 根据客户现场反应&#xff0c;扫描枪快速扫描会出现 料号前几位字符丢失 不完整的问题。于是开始了测试之路。 解决方案探索 1.首先考…

数据可视化,销量第一的新能源汽车是什么?比亚迪新能源汽车销量接近60万辆

去年以来&#xff0c;新能源汽车火热度席卷全球&#xff0c;中国的新能源汽车无论制造或者销售&#xff0c;数量增长迅猛。下面小编用一款数据可视化软件&#xff0c;带你用可视化数据解读高端制造背后&#xff0c;中国新能源汽车的具体销售情况。同样如果你工作上有数据报表需…

[附源码]计算机毕业设计springboot酒店物联网平台系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

全国省市县 经纬度的 json数据(提供原文件),写Java代码,入库(提供代码)

目录 1 需求2 分析1 需求 有一个全国省市县 经纬度的 json数据,我想要使用代码入库 如何操作,代码咋写 2 分析 首先分析json结构, 一般拿到一个json数据,如果最外层不是 { } 包裹的,那么自己手动加一个 以上这个是自己加的,这个就是key 值就是list 集合 分析完json数…

【并发】深入理解Java线程的底层原理

线程基础知识 线程与进程 进程 操作系统会以进程为单位&#xff0c;分配系统资源&#xff08;CPU时间片、内存等资源&#xff09;&#xff0c;进程是资源分配的最小单位。 当一个程序被运行&#xff0c;从磁盘加载这个程序的代码至内存&#xff0c;这时就开启了一个进程。 线…

LDcad零件新增与导入

LDcad大颗粒小颗粒套装导入方法&#xff0c;以后LDcad也可以用套装搭建模型了。 LDcad大颗粒小颗粒套装导入方法&#xff0c; 以后LDcad也可以用套装搭建模型了。 有个遗憾&#xff0c;就是零件不全。 具体导入方法看下文。 我们可以看到。这些套装都有对应的图标。方便…

环境温湿度在线监测如何实现?有何应用场景?

温度、湿度等环境数据与人们生活生产息息相关。温湿度传感器作为能将温度量和湿度量转换成容易被测量处理的电信号的设备或装置&#xff0c;广泛应用于工农业生产、气象、环保、国防、科研等经常需要对环境或设备的温度与湿度进行测量的领域&#xff0c;因此也产生了对温湿度远…

ASP.NET Core 3.1系列(15)——Entity Framework Core之DB First

1、前言 本文开始介绍一些关于Entity Framework Core的内容。在EFCore中&#xff0c;常用的为DB First模式和Code First模式&#xff0c;下面就来介绍一下如何在EFCore中使用DB First模式生成实体类和数据库上下文。 2、创建测试数据库 在SQL Server中新建一个数据库Dao&…

2016-04《信息资源管理 02378》真卷解析,逐题解析+背诵技巧

本系列博客合计 21 篇&#xff0c;每篇都将解析一张《信息资源管理》真卷&#xff0c;并附带答案解析与背诵技巧。 全国 2016 年 4 月自学考试信息资源管理试题&#xff08;02378&#xff09; 单选题 1、按信息表现形式划分&#xff0c;信息可分为&#xff08;C&#xff09; …

JavaScript的Web api接口

JavaScript的Web api 文章目录JavaScript的Web api选中元素事件操作元素获取/元素内容获取/修改元素属性获取/修改表单元素属性实现一个显示/隐藏 密码的功能实现一个加减计算器复选框全选/全不选获取/修改样式属性点击文字放大字体实现白天模式与夜间模式的切换操作节点新增节…

【附源码】计算机毕业设计JAVA住房公积金筹集子系统的网站系统

【附源码】计算机毕业设计JAVA住房公积金筹集子系统的网站系统 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xf…

3D漫游:所见即所得的形式,构建线上数字展厅

企业在数字化转型的大环境下&#xff0c;较为常用的当属数字展厅了&#xff0c;数字展厅能够为企业、行业协会、展销基地以及体验中心助力&#xff0c;以所见即所得的形式构建线上数字空间&#xff0c;满足企业的数字化展示和数字化营销。3D漫游&#xff0c;更加沉浸式的三维空…

使用 Hibernate Envers 进行实体审计

业务应用程序中的常见要求是在特定数据更改时存储版本控制信息;当某事发生变化时&#xff0c;谁改变了它&#xff0c;改变了什么。在这篇博文中&#xff0c;我们将介绍Hibernate Envers&#xff0c;它是Hibernate JPA库的一个组件&#xff0c;它为实体类提供了一个简单的审计/版…

【Linux网络配置实战】服务器Network静态路由配置

【Linux网络配置实战】服务器Network静态路由配置一、环境介绍1.环境规划2.实验目的二、检查各节点IP地址1.检查server01服务器上2.检查server02服务器网卡3.检查route01上的网卡三、在route01上启动IP包转发四、查看当前两节点互通情况1.查看server01和server02连通状态2.查看…

新手小白可以做什么互联网项目,副业项目应该怎么选择

现在网上的信息这么冗杂&#xff0c;有没有可靠的副业项目呢&#xff1f;怎样才能找到适合自己的副业呢&#xff1f; 说实话&#xff0c;在网上找副业并不难&#xff0c;搜索一下就会出来很多&#xff0c;但新手小白不知道如何选择&#xff0c;导致焦虑&#xff0c;一个重要的…

helm2.0安装及部署

一、helm简介 Helm是Deis (https://deis.com/) 开发的一个用于kubernetes的包管理器。每个包称为一个Chart&#xff0c;一个Chart是一个目录&#xff08;一般情况下会将目录进行打包压缩&#xff0c;形成name-version.tgz格式的单一文件&#xff0c;方便传输和存储&#xff09…

Linux 如何设置代理

安装部署 clash 是一款用 Go 语言开发的软件&#xff0c;所以我可以直接下载预编译的版本进行部署。 下载地址&#xff1a;https://github.com/Dreamacro/clash/releases/download/v1.8.0/clash-linux-amd64-v1.8.0.gz软件的作者提供了多种架构下预编译的二进制文件&#xff0…

67 - 经典问题解析五(指针的判别 构造中的异常)

---- 整理自狄泰软件唐佐林老师课程 1. 问题一 编写程序判断一个变量是不是指针&#xff1f; 1.1 指针的判别 C中仍然支持C语言中的可变参数函数C编译器的 匹配调用 优先级&#xff1a;重载函数 > 函数模板 > 变参函数 #include <iostream> #include <strin…

16-JavaSE基础巩固项目:拼图小游戏

阶段项目-拼图小游戏 一、项目介绍 1、目的 锻炼逻辑思维能力&#xff0c;让我们知道前面学习的知识点在实际开发中的应用场景。 1、为了学习一个新知识&#xff1a;GUI GUI全称&#xff1a;Graphical User Interface&#xff08;又称图形用户接口&#xff09;是指采用图形化…