小米官网（部分内容）

最新推荐文章于 2022-08-30 16:27:33 发布
最新推荐文章于 2022-08-30 16:27:33 发布
阅读量467 收藏 1
点赞数 1
文章标签： webview elementui fpga开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63122857/article/details/121859565
版权
这是一个关于小米官网头部和导航栏的HTML及CSS代码示例。内容包括头部布局、导航菜单、购物车、消息通知、登录注册链接、主导航栏、搜索框等元素的实现。CSS样式定义了各个元素的颜色、布局和交互效果，如链接颜色、背景色、悬浮效果等。
摘要由CSDN通过智能技术生成

今天是小米官网部分内容的制作

 <link rel="stylesheet" href="css/小米官网1.css">
    <link rel="stylesheet" href="css/小米官网2.css">
</head>
<body>
    <div class="header">
        <div class="inner">
            <div class="naver">
                <a href="#">小米商城</a>
                <span class="kongge">|</span>
                <a href="#">MIUI</a>
                <span class="kongge">|</span>
                <a href="#">loT</a>
                <span class="kongge">|</span>
                <a href="#">云服务</a>
                <span class="kongge">|</span>
                <a href="#">天星数科</a>
                <span class="kongge">|</span>
                <a href="#">有品</a>
                <span class="kongge">|</span>
                <a href="#">小爱开放平台</a>
                <span class="kongge">|</span>
                <a href="#">企业团购</a>
                <span class="kongge">|</span>
                <a href="#">资质证照</a>
                <span class="kongge">|</span>
                <a href="#">协议规则</a>
                <span class="kongge">|</span>
                <a href="#">下载app</a>
                <span class="kongge">|</span>
                <a href="#">智能生活</a>
                <span class="kongge">|</span>
                <a href="#">Select Location</a>
            </div>
            <div class="gwc">
                <a href="#"><p>购物车(0)</p></a>
            </div>
            <div class="mont">
                <a href="#">消息通知</a>
            </div>
            <div class="link">
                <a href="#">登录</a>
                <span class="kongge">|</span>
                <a href="#">注册</a>
                <span class="kongge">|</span>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="headed">
            <div class="logoer">
                <img src="images/logo.png" alt="">
            </div>
            <div class="nothing">
            </div>
            <div class="linked">
                <a href="#">Xiaomi手机</a>
                <a href="#">Redmi手机</a>
                <a href="#">电视</a>
                <a href="#">笔记本</a>
                <a href="#">平板</a>
                <a href="#">家电</a>
                <a href="#">路由器</a>
                <a href="#">服务</a>
                <a href="#">社区</a>
            </div>
            <div class="search">
                <div class="boxbig">
                    <div class="boxsmall"><input class="search_text" type="text"></div>
                    <div class="boxsmaller"><img src="images/123.jpeg" width="50px" height="50px"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_left">
            <ul class="list_nav">
                <li class="list_text">
                    <a href="#">手机
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">电脑
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">笔记本&nbsp;平板
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">家电
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">出行&nbsp;穿戴
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">智能&nbsp;路由器
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">电源&nbsp;配件
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">健康&nbsp;儿童
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">耳机&nbsp;音响
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
                <li class="list_text">
                    <a href="#">生活&nbsp;箱包
                        <div class="nexted">
                        &gt;
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="second">
        <div class="channel">
            <ul>
                <li class="channel_il">
                    <a href="#"><img src="images/6.png" alt="">保障服务</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/7.png" alt="">企业团购</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/8.png" alt="">F码通道</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/9.png" alt="">米粉卡</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/10.png" alt="">以旧换新</a>
                </li>
                <li class="channel_il">
                    <a href="#"><img src="images/11.png" alt="">话费充值</a>
                </li>
            </ul>
        </div>
        <div class="figure">
            <a href="#"><img src="images/2.jpg" alt=""></a>
        </div>
        <div class="figure">
            <a href="#"><img src="images/3.jpg" alt=""></a>
        </div>
        <div class="figure">
            <a href="#"><img src="images/4.jpg" alt=""></a>
        </div>
    </div>
    <div class="footer">
        <div class="pic_big">
            <a href="#"><img src="images/5.jpg" alt=""></a>
        </div>
    </div>
</body>
</html>

这是部分网页的代码CSS的话也是用了两个 如果要完整版的话还需要大量时间去码代码因为时间的问题只做了部分的网页

a{
    text-decoration: none;
    color: black;
}

.header{
    height: 40px;
    background-color: rgb(51, 51, 51);
}

.header .inner{
    width: 1226px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.header .inner .naver{
    width: 800px;
    float: left;
}

.header .inner .naver a{
    color: rgb(176, 164, 132);
    display: inline-block;
    line-height: 40px;
    font-size: 10px;
}

.header .inner .naver a:hover{
    color: rgb(176, 176, 176);
}

.header .inner .gwc{
    float: right;
    background-color: rgb(66, 66, 66);
    height: 40px;
    width: 120px;
}

.header .inner .gwc a{
    display: block;
    height: 40px;
    float: left;
    padding-top: 10px;
    color: rgb(176, 176, 176);
    font-size: 14px;
    width: 120px;
    text-align: center;
}

.header .inner .gwc a:hover{
    background-color: rgb(255, 255, 255);
    color: rgb(255, 103, 0);
}

.header .inner .mont{
    height: 40px;
    width: 68px;
    float: right;
}

.header .inner .mont a{
    color: rgb(176, 164, 132);
    display: block;
    line-height: 40px;
    font-size: 10px;
    text-align: center;
}

.header .inner .mont a:hover{
    color: rgb(176, 176, 176);
}

.header .inner .naver{
    width: 800px;
    float: left;
}

.header .inner .link{
    float: right;
}

.header .inner .link a{
    color: rgb(176, 164, 132);
    display: inline-block;
    line-height: 40px;
    font-size: 10px;
}

.header .inner .link a:hover{
    color: rgb(176, 176, 176);
}

.nav{
    height: 100px;
}

.nav .headed{
    width: 1226px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.nav .headed .logoer{
    width: 56px;
    height: 56px;
    float: left;
    margin-top: 22px;  
}

.nav .headed .logoer img{
    width: 56px;
    height: 56px;
}

.nav .headed .nothing{
    height: 100px;
    width: 150px;
    left: 60px;
    float: left;

}

.nav .headed .linked{
    height: 100px;
    width: 650px;
    left: 210px;
    float: left;
}

.nav .headed .linked a{
    display: inline-block;
    line-height: 100px;
    font-size: 16px;
    margin-right: 20px;
}

.nav .headed .linked a:hover{
    color: rgb(255, 103, 0);
}

.nav .headed .search{
    height: 100px;
    width: 350px;
    float: right;
}

.nav .headed .search .boxbig{
    width: 300px;
    height: 50px;
    margin-top: 22px;
    float: right;
    overflow: hidden;  
}

.nav .headed .search .boxbig .boxsmall{
    width: 238px;
    height: 50px;
    float: left;
    overflow: hidden;
}

.nav .headed .search .boxbig .boxsmaller{
    width: 52px;
    height: 50px;
    float: left;
    border: 1px solid rgb(176, 176, 176);
}

.nav .headed .search .boxbig .boxsmall .search_text{
    width: 240px;
    height: 48px;
    font-size: 14px;
    line-height: 48px;
    border: 1px solid rgb(176, 176, 176);
}

.nav .headed .search .boxbig .boxsmall .search_text:focus{
    outline: none;
    border-color:  rgb(255, 103, 0);
}

.content{
    width: 1226px;
    height: 460px;
    background:url("../images/1.jpg");
    margin-left: auto;
    margin-right: auto;
}

.content .content_left{
    width: 234px;
    height: 460px;
    float: left;
    background-color: rgba(164, 151, 139, 0.8);
    overflow: hidden;
}

.content .content_left .list_nav{
    width: 234px;
    height: 420px;
    margin-top: 20px;
}

.content .content_left .list_nav .list_text{
    height: 42px;
    position: relative;
    font-weight: 800;
}

.content .content_left .list_nav .list_text a{
    display: block;
    width: 214px;
    height: 100%;
    padding-left: 20px;
    line-height: 42px;
    font-size: 14px;
    color: rgb(255,255,255);
}

.content .content_left .list_nav .list_text .nexted{
    color: rgb(255,255,255);
    font-size: 20px;
    position: absolute;
    right: 20px;
    top: 0;
}

.content .content_left .list_nav .list_text a:hover{
    background-color: rgb(255, 103, 0);
}

.second{
    width: 1226px;
    height: 170px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.second .channel{
    height: 170px;
    width: 234px;
    background-color: rgb(95, 87, 80);
    text-align: center;
    float: left;
}

.second .channel .channel_il{
    width: 76px;
    height: 83px;
    float: left;
}

.second .channel .channel_il a{
    display: block;
    height: 64px;
    width: 70px;
    font-size: 12px;
    color: rgb(207, 204, 202);
}

.second .channel .channel_il a img{
    width: 24px;
    height: 24px;
    display: block;
    margin:auto;
    padding-top: 20px;
}

.second .channel .channel_il a:hover{
    color: rgb(255,255,255);
}

.second .figure{
    width: 310px;
    height: 170px;
    float: left;
    margin-left: 20px;
}

.second .figure a{
    display: block;
    width: 310px;
    height: 170px;
}

.second .figure a img{
    width: 310px;
    height: 170px;
}

.footer{
    height: 200px;
    background-color: rgb(245, 245, 245);
    margin-top: 30px;
}

.footer .pic_big{
    width: 1226px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}

.footer .pic_big a{
    display: block;
    width: 1226px;
    height: 120px;
}

.footer .pic_big a img{
    width: 1226px;
}

这是其中一个的CSS下面是另外一个CSS

html{
	color:#000;
	background:#FFF;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img {
	border:0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}

ol,ul {
	list-style:none;
}

caption,th {
	text-align:left;
}

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}

q:before,q:after {
	content:'';
}

abbr,acronym {
	border:0;
	font-variant:normal;
}

sup {
	vertical-align:text-top;
}

sub {
	vertical-align:text-bottom;
}

input,textarea,select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}

input,textarea,select {
	*font-size:100%;
}

legend {
	color:#000;
}

然后图片的话这边就不上传了自己去找对应的就可以了最后我把效果图放在封面了

还未迟暮
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css制作小米官网
07-18
学习前端的时候制作的网页，有需要的可以下载看看，前期学习html和css只要做出来这个我局的基本可以了，剩下的就是查缺补漏，把一些技巧再掌握的熟练一下就好了。
小米官网项目制作——javascript知识分享上
DS153的博客
12-15 3066
前言 经过一些长时间的学习，我经过自己的努力，成功的进行了小米官网的主页和登录注册的页面的制作。这个过程更多的是对自己知识的总结和练习，实践出真理，只有做了才知道需要怎么去写代码的逻辑才可以写出我们需要的效果。今天我就给大家分享一下，小米官网主页的javascript的代码上需要书写注意的地方。 一、整体架构 首先，我们需要去看看小米官网的内容都有什么，我们可以直接前往官网查看它的内容：小米官网 我们可以看到有这么一些地方是我们值得注意的： 1.下滑的二维码 2.购物...
html+css制作小米商城官网初尝试
weixin_47243832的博客
08-30 3643
看着攻略一点点摸索花了几个小时的时间用html+css制作了小米商城的官网，还有很多的不足之处，后面会继续进行修改完善。
小米网页案例
DcTbnk的博客
03-09 3446
1.小米网站的大致框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
小米官网HTML网页制作项目
04-29
关于小米官网的一个项目,如果说有初学者的话,项目不会做可以参考一下.
小米官网源码.rar
12-01
在小米官网源码中，我们可以看到各种HTML标签的使用，如`<head>`、`<body>`、`<header>`、`<nav>`、`<section>`、`<article>`、`<footer>`等，这些标签定义了网页的各个部分。通过分析这些标签，可以学习到如何构建...
小米便签部分代码精读注释
最新发布
03-25
### 小米便签部分代码精读注释 #### 一、概述 本文将对小米便签中的部分代码进行深入解读，并重点分析其中的 `UI` 包内 `AlarmAlertActivity.java` 文件的相关代码实现细节。 #### 二、UI 包详解 ##### 2.1 `...
使用html+css+js+jquery实现小米官网.rar
05-07
综上所述，这个项目展示了前端开发的基本流程，通过HTML构建结构，CSS添加样式，JavaScript和jQuery提供交互，实现了小米官网的前端部分。对于想要学习或提升前端技能的开发者来说，这是一个很好的实践案例。
小米商场官网2020版
10-17
小米商场官网可能采用了媒体查询（Media Queries）和其他技术，确保网站在不同尺寸的屏幕（如手机、平板、桌面）上都能呈现出合适的布局和内容。 5. **前端框架**：虽然未明确提及，但为了高效开发和维护，开发者...
小米官网.rar html
12-27
在这里，我们可以推测这个压缩包可能包含的是小米官网的部分或全部网页源码，可能是为了学习、分析或者进行网页设计参考。 HTML由一系列的元素组成，这些元素以标签对的形式出现，比如`<html>`, `<head>`, `<body>`...
小米官网制作注意事项
weixin_30567471的博客
05-30 552
注意事项 1、先规划布局 2、写一个css里面放　　 body{ margin: 0; padding: 0;}ul{ margin: 0; padding: 0; list-style-type: none;}a{ text-decoration: none;} 　3、起名一定规范　 4、注意注释 方便查找 5、定位问题 会导致布局偏移 6、...
HTML+CSS实现小米官网首页
道阻且长，行则将至。
12-28 3万+
一、HTML+CSS实现小米官网首页 仿写小米官网的页面，熬了两个晚上终于把这个页面做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦！我会不定期的跟大家分享文章。 二、页面结构如下： 三、效果图如下： 四、部分源代码如下（如需要全部的源代码请加我QQ或者评论区留言，原创不易，记得点赞和收藏哦）。 HTML部分源代码如下： <!DOCTYPE html> <html lang="en"> <head>
HTML、CSS制作小米官网首页
weixin_58090164的博客
12-10 757
<!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和css仿制小米官网页面
SunAndYou
12-13 9277
学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。
【前端实战项目】手把手教你做出小米商城官网（HTML+CSS）
N_01040709的博客
06-21 1757
今天给大家带来小米商城的网页设计教程，有兴趣的小伙伴们可以点击下方视频学习哟~~~ 【web前端实战练习】小米商城项目，（HTML+css）网页制作https://www.bilibili.com/video/BV1r34y1W7Tr?spm_id_from=333.999.0.0&vd_source=3dc17743417209d9d759a231450c3c50 HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet
HTML、CSS制作小米商城网页首页源码解析
热门推荐
Etui۹(･༥･´)و的博客
01-29 3万+
简介： 这是我学习前端以来仿写的第一个项目，沿着尚硅谷李立超老师的教学视频学习。 在仿写这个项目的过程中即巩固了这两周以来的知识，也增加了一些小经验（主要是老师传授），同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想！加油！ 小米官网效果： 效果图： 文件目录： HTML文件 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
小米商城网页制作大全-完结篇
tomorrownan的博客
10-17 1万+
时隔多日，小米商城网页基本完成。跳转的第二页面没有做。在这过程中遇到了很多小而细的问题，例如浏览器兼容性、字符图标不显示、动画效果不起作用等。抽时间整理一下，再继续完善。效果图如下： 实际右侧固定栏只有个人中心、购物车、联系客服、回到顶部四项，固定在哪里不动，由于截图是连续的，所以显示出来是连续的。 动态图如下： 完整的工程详见小米网页完整版 https://github.com/wnn08...
小米官网项目制作——javascript知识分享下
DS153的博客
12-30 1892
前言 之前我分享了关于小米官网主页的javascript内容的制作，不知道大家通过上一篇博客有没有获得需要的知识。
html+css 简单的静态网页小米官网
犹如菜鸡的博客
09-04 1万+
html+css简单静态小米官网 把之前做的改进了一下，其他的都是一样的布局 效果图： 新增了一些字体文件 不多说上代码 HTML代码： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 网站说明 --> <me
小米手机官方使用手册：从入门到精通
"小米手机说明书" 小米手机是小米公司推出的一款高性能智能手机，其用户...由于产品会持续更新，用户手册可能会与实际操作存在差异，因此建议用户定期访问小米官方网站下载最新的用户手册，以获取最准确的操作指南。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值