HTML、CSS小米官网制作

最新推荐文章于 2022-02-11 23:13:48 发布
最新推荐文章于 2022-02-11 23:13:48 发布
阅读量156 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YYHHStarry/article/details/121860057
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/logo.png">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>仿小米官网</title>
</head>

<body>
    <div class="nav">
        <div class="one">
            <div class="nav_left">
                <a href="#" class="nav_a">小米商城</a><span>|</span>
                <a href="#" class="nav_a">MIUI</a><span>|</span>
                <a href="#" class="nav_a">loT</a><span>|</span>
                <a href="#" class="nav_a">云服务</a><span>|</span>
                <a href="#" class="nav_a">天星数科</a><span>|</span>
                <a href="#" class="nav_a">有品</a><span>|</span>
                <a href="#" class="nav_a">小爱开放平台</a><span>|</span>
                <a href="#" class="nav_a">企业团购</a><span>|</span>
                <a href="#" class="nav_a">资质证照</a><span>|</span>
                <a href="#" class="nav_a">协议规则</a><span>|</span>
                <a href="#" class="nav_a">下载app</a><span>|</span>
                <a href="#" class="nav_a">智能生活</a><span>|</span>
                <a href="#" class="nav_a">Select Location</a>
            </div>
            <div class="nav_right">
                <a href="#" class="nav_a">登录</a><span>|</span>
                <a href="#" class="nav_a">注册</a><span>|</span>
                <a href="#" class="nav_a">消息通知</a><span>|</span>
                <a href="#" class="cart">&nbsp;&nbsp;&nbsp;&nbsp;购物车</a>
            </div>
        </div>
    </div>
    <div class="one">
        <div class="con">
            <div class="logo_box">
                <a href="#" class="logo"></a>
            </div>
            <a href="#" class="logo_a">Xiaomi手机</a>
            <a href="#" class="logo_a">Redmi红米</a>
            <a href="#" class="logo_a">电视</a>
            <a href="#" class="logo_a">笔记本</a>
            <a href="#" class="logo_a">平板</a>
            <a href="#" class="logo_a">家电</a>
            <a href="#" class="logo_a">路由器</a>
            <a href="#" class="logo_a">服务</a>
            <a href="#" class="logo_a">社区</a>
            <div class="search_box">
                <input type="text" class="search" placeholder="手机">
                <a href="#" class="btn"> </a>
            </div>
        </div>
        <div class="char">
            <div class="char_left">
                <a href="#" class="char_left_title">手机</a>
                <a href="#" class="char_left_title">电视</a>
                <a href="#" class="char_left_title">笔记本 平板</a>
                <a href="#" class="char_left_title">家电</a>
                <a href="#" class="char_left_title">出行 穿戴</a>
                <a href="#" class="char_left_title">智能 路由器</a>
                <a href="#" class="char_left_title">电源 配件</a>
                <a href="#" class="char_left_title">健康 儿童</a>
                <a href="#" class="char_left_title">耳机 音箱</a>
                <a href="#" class="char_left_title">生活 箱包</a>
            </div>
            <div class="char_right">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="foot">
            <div class="foot_left">
                <a href="#" class="foot_left_a">保障服务</a>
                <a href="#" class="foot_left_a">企业团购</a>
                <a href="#" class="foot_left_a">F码通道</a>
                <a href="#" class="foot_left_a">米粉卡</a>
                <a href="#" class="foot_left_a">以旧换新</a>
                <a href="#" class="foot_left_a">话费充值</a>
            </div>
            <ul class="foot_right">
                <li class="foot_ultra"></li>
                <li class="foot_fold"></li>
                <li class="foot_3"></li>
            </ul>
        </div>
        <div class="K40"></div>
    </div>
</body>

</html>
* {
    list-style: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.nav_a {
    color: #b0b0b0;
    font-size: 12px;
    margin-right: 3px;
}

.nav_a:hover {
    color: #fff;
}

span {
    color: #40423e;
}

.one {
    width: 1266px;
    margin: 0 auto;
}

.nav {
    height: 40px;
    line-height: 40px;
    background-color: #333333;
    border-bottom: 2px solid #333333;
}

.nav_left {
    float: left;
}

.nav_right {
    float: right;
}

.cart {
    display: inline-block;
    width: 100px;
    height: 36px;
    color: #b0b0b0;
    font-size: 12px;
    text-align: center;
    background: url(images/购物车空.png) no-repeat;
    background-size: 20%;
    background-position: 16px 10px;
}

.cart:hover {
    background-color: #424242;
}

.con {
    width: 1266px;
    height: 100px;
    line-height: 100px;
}

.logo_box {
    float: left;
    margin-top: 22px;
    margin-right: 185px;
}

.logo {
    display: block;
    width: 56px;
    height: 56px;
    background: url(images/logo.png) no-repeat;
    background-size: 56px;
}

.logo_a {
    display: inline-block;
    color: #333333;
    padding: 0 10px;
}

.logo_a:hover {
    color: blue;
}

.search_box {
    position: relative;
    float: right;
}

.search {
    position: absolute;
    top: 26px;
    right: 53px;
    width: 245px;
    height: 50px;
    border: 1px solid #e0e0e0;
}

.btn {
    position: absolute;
    top: 26px;
    right: 0;
    display: inline-block;
    width: 52px;
    height: 50px;
    border: 1px solid #e0e0e0;
    background: url(images/搜索.png) no-repeat #fff;
    background-size: 50%;
    background-position: 15px 11px;
}

.btn:hover {
    background-color: blue;
}

.char {
    width: 1266px;
    height: 475px;
}

.char_left {
    float: left;
    width: 234px;
    height: 440px;
    padding-top: 20px;
    background-color: #b0b0b0;
}

.char_left_title {
    display: inline-block;
    width: 202px;
    height: 42px;
    padding-left: 32px;
    color: #fff;
    line-height: 42px;
    background: url(images/右箭头.png) no-repeat;
    background-size: 8%;
    background-position: 200px 14px;
    background-color: #b0b0b0;
}

.char_left_title:hover {
    background-color: orangered;
}

.char_right {
    position: relative;
    float: left;
    width: 1032px;
    height: 460px;
    background: url(images/xiaomi11.jpg) no-repeat;
    background-size: 119%;
    background-position: 100% 0;
}

.char_right ul {
    position: absolute;
    right: 33px;
    bottom: 18px;
}

.char_right ul li {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #484848;
    border: 2px solid #5e5e5e;
    border-radius: 10px;
}

.char_right ul li:hover {
    background-color: #fff;
}

.foot {
    width: 1266px;
    height: 188px;
}

.foot_left {
    float: left;
    width: 234px;
    height: 169.97px;
    background-color: #5f5750;
}

.foot_left_a {
    display: inline-block;
    width: 74.8px;
    height: 85px;
    color: #c3c0bd;
    font-size: 12px;
    line-height: 120px;
    text-align: center;
    background: url(images/时间.png) no-repeat;
    background-size: 50%;
    background-position: 20px 11px;
}

.foot_right li {
    float: right;
    display: inline-block;
    width: 315.99px;
    height: 170px;
    margin-left: 28px;
}

.foot_right .foot_ultra {
    background: url(images/小米11ultra.jpg) no-repeat;
    background-size: 100%;
}

.foot_right .foot_fold {
    background: url(images/mix\ fold.jpg) no-repeat;
    background-size: 100%;
}

.foot_right .foot_3 {
    background: url(images/Redmi\ Buds\ 3.jpeg) no-repeat;
    background-size: 100%;
}

.K40 {
    width: 1266px;
    height: 120px;
    background: url(images/K40.jpg) no-repeat;
    background-size: 100%;
}

YYHHStarry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML、CSS制作小米官网首页
weixin_58090164的博客
12-10 754
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=".
小米官网HTML网页制作项目
04-29
关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
html+css制作小米官网
07-18
学习前端的时候制作的网页，有需要的可以下载看看，前期学习html和css只要做出来这个我局的基本可以了，剩下的就是查缺补漏，把一些技巧再掌握的熟练一下就好了。
小米官网HTML5
12-04
仅供初学者巩固基础，交流和学习。跟案例为模仿小米官网用于传授HTML5基础课程学习。
小米首页手工代码html+CSS
11-26
小米首页手工代码html+CSS，未使用任何框架，供学习参考。
动态小米官网(html+css+js)
04-24
【动态小米官网(html+css+js)】是一个前端开发项目，旨在模仿小米商城的网页设计与功能实现。这个项目展示了如何使用HTML、CSS和JavaScript这三种核心技术来构建一个交互式的网页应用。以下将分别对这三个方面进行...
HTML+CSS购物网站——小米有品
03-23
HTML和CSS是构建网页的基本技术，本项目是一个以"小米有品"为主题的购物网站实现，涵盖了用户在在线购物过程中可能遇到的各种页面。下面将详细解释这些知识点。 首先，HTML（HyperText Markup Language）是用于创建...
基于CSS与HTML制作的简易小米网页
04-10
在本项目中，“基于CSS与HTML制作的简易小米网页”是一个使用基础的HTML结构和CSS样式来构建的小米公司官方网站的简化版本。这个项目旨在帮助初学者了解如何使用这两种技术来创建网页布局、设计和交互效果。以下是...
使用html+css+js+jquery实现小米官网.rar
05-07
在本项目中，“使用html+css+js+jquery实现小米官网.rar”是一个压缩包，它包含了一组文件，用于重现小米官网的前端页面。这个项目主要涵盖了四个关键的技术领域：HTML、CSS、JavaScript以及jQuery，这些都是构建...
仿小米官网(html+js+css)
11-09
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
小米商城html
01-03
利用css和html布局网页
手敲小米官网主页（HTML css3 js）
05-04
静态网页模拟，HTML源码，css源码，js源码
小米官网页面设计.zip
04-20
此项目属于自己个人爱好所编写 在家闲来无事写写代码 在这里分享给大家 一个跟小米官网极其相似的网站写法非常简单 一看就懂 不需有任何疑问，如果下载完成之后 你觉得看不懂 欢迎私聊 我会带领你走向前端 一起学习前端 ，谢谢大家，再次声明 此官网页面属于自己个人编写 中间采用了小米网站 链接 ，会转载至小米网站；声明结束，谢谢大家。
仿小米手机官网-html页面实现
02-18
仿小米手机商城的全套页面。包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等几十个页面。 有轮播的实现，demo 基于html css 实现小米官网部分内容搭建。基本功能都实现了
HTML小米商城代码 注册 登入
10-22
小米商城首页 登入 注册 代码
【HTML+CSS】小米官网首页
qq_41195893的博客
01-10 1393
【HTML+CSS】小米官网首页
HTML+CSS实现小米官网首页
热门推荐
道阻且长，行则将至。
12-28 3万+
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦！我会不定期的跟大家分享文章。 二、页面结构如下： 三、效果图如下： 四、部分源代码如下（如需要全部的源代码请加我QQ或者评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head>
小米官网——主页直接跳转登录页或注册页的制作（详细分析）
super码力的博客
02-11 3041
小米官网主页直接跳转登录页或注册页的制作，地址发生改变，页面可左滑右滑切换，特别简单......
小米官网项目制作——javascript知识分享上
DS153的博客
12-15 3062
前言 经过一些长时间的学习，我经过自己的努力，成功的进行了小米官网的主页和登录注册的页面的制作。这个过程更多的是对自己知识的总结和练习，实践出真理，只有做了才知道需要怎么去写代码的逻辑才可以写出我们需要的效果。今天我就给大家分享一下，小米官网主页的javascript的代码上需要书写注意的地方。 一、整体架构 首先，我们需要去看看小米官网的内容都有什么，我们可以直接前往官网查看它的内容：小米官网 我们可以看到有这么一些地方是我们值得注意的： 1.下滑的二维码 2.购物...
小米网页制作html➕css
最新发布
06-20
小米网页制作中，HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是两个基本的前端技术，它们一起用来创建和设计网页。 1. HTML (超文本标记语言)：它是网页的骨架，负责网页内容的结构。使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值