小米网页作业

最新推荐文章于 2024-08-08 17:46:27 发布
最新推荐文章于 2024-08-08 17:46:27 发布
阅读量37 收藏
点赞数
文章标签： 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aW666_/article/details/134759366
版权

（主体）

<!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 rel="stylesheet" href="./download/font_4353511_x66hiumitbb/iconfont.css">

    <link rel="stylesheet" href="./5index.css">

</head>

<body>

    <div class="top-nav">

        <div class="container">

            <div class="top-nav-left">

                <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="#">小米商城</a>

                <span>|</span>

                <a href="#">小米商城</a>

                <span>|</span>

                <a href="#">小米商城</a>

                <span>|</span>

                <a href="#">小米商城</a>

                <span>|</span>

                <a href="#">小米商城</a>

            </div>

            <div class="top-nav-right">

                <a href="#">登录</a>

                <span>|</span>

                <a href="#">注册</a>

                <span>|</span>

                <a href="#">消息通知</a>

                <button><em class="iconfont icon-sousuo"></em>购物车（0）</button>

            </div>

        </div>

    </div>

    <div class="site-header">

        <div class="container">

            <div class="site-header-left"></div>

            <div class="site-header-center">

                <ul>

                    <li><a href="#">Xiaomi手机</a></li>

                    <li><a href="#">Xiaomi手机</a></li>

                    <li><a href="#">Xiaomi手机</a></li>

                    <li><a href="#">Xiaomi手机</a></li>

                    <li><a href="#">Xiaomi手机</a></li>

                    <li><a href="#">Xiaomi手机</a></li>

                    <li><a href="#">Xiaomi手机</a></li>

                </ul>

            </div>

            <div class="site-header-right">

                <input type="text">

                <button><em class="iconfont icon-sousuo"></em> </button>

            </div>

        </div>

    </div>

    <div class="banner">

        <div class="container">

            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/72d2f359aa032bc5f6372b3022b39a92.jpg?thumb=1&w=1269&h=476&f=webp&q=90"

                alt="" width="1226px">


 

            <div class="banner-nav">

                <ul>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                    <li><a href="#">手机<span>></span></a></li>

                </ul>

            </div>

        </div>

    </div>

</body>

</html>

（css）

{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

a {

    text-decoration: none;

}

li {

    list-style: none;

}

.top-nav {

    height: 40px;

    background-color: #333;

    line-height: 40px;

}

.container {

    width: 1226px;

    margin: 0 auto;

}

.top-nav .container {

    display: flex;

    justify-content: space-between;

}

.top-nav a {

    font-size: 15px;

    color: #B0B0B0;

}

.top-nav span {

    color: #424242;

    margin: 0 3px;

}

.top-nav-right button {

    width: 120px;

    height: 40px;

    background-color: #B0B0B0;

    font-size: 12px;

}



 

.site-header {

    height: 100px;

    line-height: 100px;

}

.site-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.site-header-left {

    width: 56px;

    height: 56px;

    background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png) no-repeat;

    background-size: 56px;

}


 

.site-header-center ul {

    width: 700px;

    display: flex;

    justify-content: space-between;

}

.site-header-center ul li a {

    font-size: 16px;

    color: #333;

}

.site-header-right {

    position: relative;

    width: 300px;

    height: 50px;

}

.site-header-right input {

    position: absolute;

    top: 0;

    outline: none;

    width: 245px;

    height: 50px;

    border: 1px solid #e0e0e0;

}

.site-header-right button {

    position: absolute;

    top: 0;

    right: 0;

    width: 52px;

    height: 51px;

    border: 1px solid #e0e0e0;

}

.banner .container {

    position: relative;

}

.banner-nav ul {

    position: absolute;

    top: 0;

    left: 0;

    width: 234px;

    height: 460px;

    background: rgba(105, 101, 101, .6);

    padding: 20px 30px;

}

.banner-nav ul li {

    height: 42px;

}

.banner-nav ul li a {

    color: #FFFFFF;

    font-size: 14px;

}

aW666_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WEB前端小米商城网页制作
jinxiaofei8的博客
05-23 2413
小米商城页面框架： <!DOCTYPE html> <html> <head><title>小米商城</title></head> <body> <div class="box"> <div class="header"> <div class="header_menu"> <ul class="header_left">
网页设计作业——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
qq_524614081的博客
06-16 327
HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业
小米网页作业改善中
qq_72174695的博客
07-07 209
小米网页
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 24万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
小米商城 网页设计 html源码 大作业
VX_laoxuezhangzy的博客
06-16 146
【学生网页源码】小米商城 htm+css。
dreamweaver网页设计作业制作 小米商城官网商城购物网页设计 WEB静态网页作业模板 大学生个人购物商城网页代码 dw个人网页作业
网页设计与制作 | HTML+CSS+JS
10-20 114
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
网页设计-仿小米商城-前端期末大作业
weixin_43474701的博客
07-28 353
网页设计-仿小米商城-前端期末大作业 网页比较完美，详细情况请看下图：（点我下载资源） 点我下载资源
小米商城首页 网页设计 html源码 大作业
VX_laoxuezhangzy的博客
06-13 145
采用浮动布局 dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。【网页源码】小米商城首页html+css。
大四web前端网页制作课作业——HTML+CSS+JavaScript仿小米手机商城网站(37页)
网页设计与制作
11-25 258
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
网页设计大作业-小米商城
07-26
本项目"网页设计大作业-小米商城"显然聚焦于模拟真实电商网站的界面设计和交互体验，这对于学习和提升网页设计技能是非常有价值的实践。 HTML（HyperText Markup Language）是网页内容的基础结构语言，它定义了网页...
小米商城（HTML+CSS）网页设计期末作业
01-04
内容概要：这份资源写的是静态小米商城，点开资源前大家可以去小米商城官网查看设计效果，通过带着读者手写简化版小米商城网页，逐步巩固学习到的HTML和css基础知识，例如：背景属性的使用background、iconfont字体...
大学生网页设计期末作业动态网页.zip
05-30
【标题】"大学生网页设计期末作业动态网页.zip" 涉及的知识点主要集中在动态网页设计上，特别是使用JavaServer Pages（JSP）技术。动态网页是互联网技术中的一种，它能够根据用户输入或者服务器状态实时生成内容，...
网页设计作业-小米网站
06-13
在这个“网页设计作业-小米网站”项目中，我们可以看到一个初学者尝试通过Dreamweaver这样的工具来模仿知名科技品牌——小米的官方网站。这个作业虽然不用于商业目的，但它是学习网页设计过程中的宝贵实践。 首先，...
Bytebase 2.22.1 - SQL 编辑器展示更丰富的 Schema 信息
Bytebase的博客
08-08 857
💡 更多资讯，请关注 Bytebase 公号：Bytebase。升级前请备份元数据库，升级后无法回退版本。
聚类算法-一种无监督学习方法.docx
最新发布
08-12
聚类算法是一种无监督学习方法，用于将数据集中的数据点自动分组到不同的类别中，这些类别也称为“簇”或“群”。聚类的目标是让同一簇内的数据点尽可能相似，而不同簇之间的数据点尽可能不相似。聚类算法广泛应用于多种领域，如数据挖掘、模式识别、图像分析、信息检索等。 聚类算法的基本概念 无监督学习：聚类算法不需要事先标记数据点的类别标签，而是根据数据本身的相似性来分组。 相似性度量：聚类算法依赖于某种相似性或距离度量来决定数据点之间的相似程度。常用的度量包括欧氏距离、曼哈顿距离等。 目标函数：大多数聚类算法都会尝试最小化某种目标函数，例如簇内的平方误差和（SSE）。 常见的聚类算法 K-Means K-Means 是一种原型聚类算法，它通过迭代地将数据点分配到最近的质心来形成簇，并重新计算每个簇的质心，直到质心不再显著变化为止。 在 Python 的 scikit-learn 库中，可以通过 KMeans 类实现 K-Means 聚类。 层次聚类 层次聚类构建一个树状图（称为树状图或 dendrogram），显示数据点是如何逐渐合并成簇的。 这种算法可以是凝聚型（自底向上）或分裂型（自顶向下）。
45ft集装箱模型3D图纸 STEP格式.zip
08-12
45ft集装箱模型3D图纸 STEP格式.zip
Spring Boot网吧管理系统.zip
08-12
该系统严格按照需求分析制作相关模块，并利用所学知识尽力完成，但是本人由于学识浅薄，无法真正做到让该程序可以投入市场使用，仅仅简单实现部分功能，希望日后还能改善。 本系统具有以下优点： 该系统具有较高的适用性，选用B/S结构，可以在绝大部分个人平台上使用该系统。 系统将用户权限进行划分，管理员，网管和会员都能看到及操作的信息不一样，三者具备不同的操作权限。 该系统操作界面简单明了，大部分人都可以正常使用。 但也存在以下问题需要改进： 运行时窗口不能被刷新，可以改进。 系统过于简单，显示的信息有限。。 不能添加多个管理员账号，如果可以则将利于发展网吧规模，便于网吧信息集中管理。 不能实时预约接待消息和网吧反馈建议，容易被忽视，不利于管理员服务客户。
小米网页制作html➕css
06-20
小米网页制作中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是两个基本的前端技术，它们一起用来创建和设计网页。 1. HTML (超文本标记语言)：它是网页的骨架，负责网页内容的结构。使用HTML标签来定义文本、图像、链接、列表、表格等元素，并通过这些元素组织网页的内容。比如`<h1>`用于标题，`<p>`用于段落，`<a>`用于创建链接等。 2. CSS (层叠样式表)：则是美化页面的工具，用于控制网页的布局、颜色、字体、间距等视觉样式。CSS通过选择器指定哪些HTML元素应用什么样的样式，如`.class`用于选择具有特定类的元素，`#id`用于选择具有特定ID的元素。例如，你可以使用`color: red;`改变文字颜色，`margin: 10px;`设置外边距等。 小米网页制作时，通常会结合这两种语言，首先用HTML构建基础结构，然后用CSS来增强页面的视觉效果和用户体验。要创建一个简单的小米网页，你需要了解HTML的基本标签和结构，同时掌握一些CSS选择器和布局技巧，如盒模型、浮动、定位等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值