web练习仿小米页面

news2024/11/25 20:29:17

效果图:

HTML代码:

<!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="index.css">
    <link rel="stylesheet" href="../素材/font_4488562_j154ryih3xs/iconfont.css">
</head>

<body>
    <div class="header">
        <div class="content">
            <div class="header-left">
                <a rel="nofollow" href="//www.mi.com/" >小米官网</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/shop" >小米商城</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//hyperos.mi.com/" target="_blank">小米澎湃OS</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//airstar.com/home" target="_blank">天星数科</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/?id=88" target="_blank">资质证照</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank">下载app</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="#">Select Location</a>
            </div>
            <div class="header-right">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
                <span class="shopping"><a href="#"><span class="iconfont icon-gouwuche"></span>购物车</a></span>
            </div>

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

            </div>
            <div class="top-nav-mid">
                <ul>
                    <li><a href="#">xiaomi手机</a></li>
                    <li><a href="#">xiaom手机</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="#">xia手机</a></li>
                    <li><a href="#">xiaomi手机</a></li>
                    <li><a href="#">手机</a></li>

                </ul>
            </div>
            <div class="top-nav-right">
                <form action="#">
                    <input type="text">
                    <span class="iconfont icon-icon-test2"></span>
                </form>
            </div>
        </div>
    </div>
    <div class="xia">
        <div class="content">
            <div class="left">
                <ul>
                    <li><a rel="nofollow" href="#">手机</a></li>
                    <li><a rel="nofollow" href="#">电视</a></li>
                    <li><a rel="nofollow" href="#">家电</a></li>
                    <li><a rel="nofollow" href="#">笔记本平板</a></li>
                    <li><a rel="nofollow" href="#">出行穿戴</a></li>
                    <li><a rel="nofollow" href="#">耳机音响</a></li>
                    <li><a rel="nofollow" href="#">健康儿童</a></li>
                    <li><a rel="nofollow" href="#">生活箱包</a></li>
                    <li><a rel="nofollow" href="#">智能路由器</a></li>
                    <li><a rel="nofollow" href="#">电源配件</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="zb"><span class="iconfont icon-zuo"></div>
                <div class="yb"><span class="iconfont icon-you"></div>
                <div class="xb">
                    <ul>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>  
    <div class="buttom">
        <div class="content">
            <div class="aaa">
                <ul>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-icon-test1"></span>保障范围</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-qiyetuangou-copy"></span>企业团购</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-Fnum"></span>F码通道</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-mifenka"></span>米粉卡</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-yijiuhuanxin"></span>以旧换新</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-huafeichongzhi"></span>话费充值</a></li>
                </ul>
            </div>
            <div class="zhaopian">
                <ul>
                    <li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt=""></a></li>
                    <li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340" alt=""></a></li>
                    <li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <div class="you">
        <a rel="nofollow" href="#"><span class="iconfont icon-shoujiapp"></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-gerenzhongxin
            "></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-shouhoufuwu"></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-rengongkefu
            "></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-gouwuche"></span></a>
    </div>







</body>

</html>

 css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.content {
  width: 1226px;
  margin: 0 auto;
}

/* header开始 */
.header {
  height: 40px;
  background-color: #333;
  color: #B0B0B0;
  font-size: 12px;
}

.header .content {
  display: flex;
  justify-content: space-between;
}

.header-left {
  width: 790px;
}

.header-right {
  width: 230px;
}

.header .content a {
  font-size: 12px;
  color: #B0B0B0;
  line-height: 40px;


}

.header .sep {
  margin: 0 3.6px;
}

.header .shopping {
  margin-left: 20px;
}

/* header结束 */


/* top-nav */
.top-nav {
  height: 100px;
  overflow: hidden;
}

.top-nav .content {
  display: flex;
  justify-content: space-between;
}

.top-nav-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;
  margin-top: 20px;

}

.top-nav-mid ul {
  display: flex;
  justify-content: space-between;
  width: 700px;
  height: 100px;
  line-height: 100px;

}

.top-nav-mid ul a {
  color: #333;
}

.top-nav-right {
  padding-top: 25px;
  width: 296px;
  height: 100px;
  line-height: 100px;
}

.top-nav-right form {
  position: relative;
  width: 296px;
  height: 50px;

}

.top-nav-right input {
  position: absolute;
  left: 0;
  top: 0;
  width: 245px;
  height: 50px;
  vertical-align: middle;
  outline: none;
}

.top-nav-right span {

  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 50px;
  line-height: 50px;
  border: 1px solid black;
  text-align: center;
  font-size: 24px;
}
/* xia */
.xia{
  width: 1226px;
  height: 460px;
  background: url("../素材/3.jpg") no-repeat;
  background-size: 1226px 460px;
  margin: 0 auto;

}
.xia .content{
  position: relative;
}
.xia .content .left ul{
  width: 234px;
  height: 460px;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding: 20px 0px;
  
}
.xia .content .left ul li{

  display: list-item;
  text-align: left;
}
.xia ul li a{
  width: 234px;
  height: 42px;
  display: block;
  height: 42px;
  line-height: 42px;
  position: relative;
  padding-left: 30px;
  float: left;
}
a{
  font-size: 12px;
  /* 去除默认样式加继承父元素 */
  text-decoration: none;
  color: inherit;
}
.xia .content .zb{
  left: 234px;
  top: 230px;
  position: absolute;
}
.xia .content .yb{
  right:0px;
  top: 230px;
  position: absolute;
}
.xia .content .xb{
  box-sizing:inherit;
  right:30px;
  bottom: 20px;
  position: absolute;
}
.xia .content .xb ul{
  display: flex;
  flex-direction: row;
  /* flex-direction: column-reverse; */
}
.xia .content .xb a{
  width: 10px;
  height: 10px;
}
.xia .content .xb ul li{
  list-style: disc;
}
.xia .content .xb ul li::marker {
  font-size: 15px;
}

/* xia */

/* bottom */
.buttom{
  margin-top: 15px;
}
.buttom .content .aaa{
  background-color: rgb(95, 87, 80);
  float: left;
  line-height: 21px;
  font-size: 12px;
}

.buttom .content .aaa ul{
  width: 234px;
  height: 170px;
  line-height: 18px;
  text-align: center;
}

.buttom .content .aaa ul li{
  display: list-item;
  float: left;
  width: 70px;
  height: 82px;
  padding: 0px 3px;
  position: relative;
  text-align: center;
}
.buttom .content .aaa li a{
  width: 70px;
  height: 64px;
  color: #ffff;
  display: block;
  font-size: 12px;
  line-height: 18px;
  padding-top: 18px;
  text-align: center;
}
.buttom .zhaopian{
  width: 978px;
  height: 170px;
  float: right;
}
.buttom .zhaopian ul{
  width: 978px;
  height: 170px;
  padding: 0;
  margin: 0;
}
.buttom .zhaopian ul li{
  float: left;
  margin-left: 15px;
}
.buttom .zhaopian ul li:nth-child(1) {
  margin-left: 0px;
}
.buttom .zhaopian ul li a{
  display: block;
  box-sizing: border-box;
}
.buttom .zhaopian ul li a img{
  height: 170px;
  width: 315px;
  text-align: left;
  position: relative;
}
/* bottom */

/* you */
.you{
  color: rgb(51, 51, 51);
  display: flex;
  position:fixed;
  right: 57px;
  bottom: 40px;
  z-index: 99;
  line-height: 21px;
  z-index: 99;
  flex-direction: column;
  flex-direction: row-reverse;
  flex-direction: column-reverse;
}
.you a{
  display: block;
  font-size: 14px;
  text-align: center;
  height: 42px;
  width: 27px;
  text-decoration-style: solid;
  position: relative;
}

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

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

相关文章

绿联 安装PDF工具

这是一个强大的本地托管的基于 Web 的 PDF 操作工具&#xff0c;使用 docker&#xff0c;允许您对 PDF 文件执行各种操作&#xff0c;例如拆分、合并、转换、重组、添加图像、旋转、压缩等。这个本地托管的 Web 应用程序最初是 100% ChatGPT 制作的应用程序&#xff0c;现已发展…

【ENSP】OSPF实现多区域之间的通信

多区域作用&#xff1a;减少路由条目&#xff0c;增加收敛时间 OSPF配置方法 ospf 1 router-id 1.1.1.1 #1为进程号&#xff0c;1.1.1.1唯一标识路由器are 0.0.0.0 #配置区域network 192.168.1.0 0.0.0.25…

专升本-云计算

被誉为第三次信息技术革命 什么是云计算&#xff1f; 云计算是一种商业的计算模式&#xff0c;它将任务分布在大量计算机构成的资源池上&#xff0c;用户可以按需通过网络存储空间&#xff0c;计算能力和信息等服务 云计算的产生和发展&#xff1a; 起源&#xff1a;上世纪6…

牛客NC153 信封嵌套问题【中等 动态规划,最长递增子序列 Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/9bf77b5b018d4d24951c9a7edb40408f 相同的题目&#xff1a; https://www.lintcode.com/problem/602 思路 本质是求最长子序列问题envelopes 先按 w 升序排序&#xff0c;再按 h 降序 排序&#xff0c;只需考虑h…

IPv6-地址解析、NUD、DAD、NDP

IPv6-地址解析、NUD&#xff08;邻居不可达检测&#xff09;、DAD&#xff08;重复地址检测&#xff09;&#xff1a; ICMPv6的消息类型&#xff1a; ICMPv6消息回显&#xff0c;type在0~127之间的表示为差错消息&#xff1b;type值在128、129表示信息消息。 1、IPv6地址协议…

HCIP【GRE VPN、MGRE VPN与PPP验证综合实验】

目录 实验要求&#xff1a; 实验拓扑图&#xff1a; 实验思路&#xff1a; 实验步骤&#xff1a; 一、配IP地址 &#xff08;1&#xff09;配置所有设备接口的IP地址&#xff1a; &#xff08;2&#xff09;配置私网与公网接口的缺省路由使得公网可通&#xff1a; 二、P…

ChatGPT如何升级为GPT-4在国内

通过 WildCard 可以把ChatGPT升级为GPT-4 地址 1: 2155 Bailey Hill Rd 城市: Eugene 邮编: 97405 州: Oregon ChatGPT Plus/Team 一键升级&#xff0c;几分钟即可自动升级到 ChatGPT Plus。 选择我的邮箱账号符合要求 复制这个页面的链接即可 复制上面的link 到请在…

SpringCloud实用篇(二)——搭建eureka服务

搭建eureka服务 搭建EurekaServer 注册eureka自己本身 1.创建项目&#xff0c;引入spring-cloud-starter-neflix-eureka-server的依赖 <!--eureka服务端--> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cl…

sectigo 单IP证书360元

IP数字证书使用了强大的加密功能&#xff0c;能够有效保护网站和用户数据在传输过程中的安全。由Sectigo颁发的各种数字证书兼容性高&#xff0c;可以支持几乎所有主流浏览器&#xff0c;在用户访问时不会出现“不安全”提示&#xff0c;Sectigo旗下的IP证书可以为只有公网IP地…

理解游戏服务器架构-逻辑底层架构

目录 前言 什么是逻辑底层架构 逻辑底层架构的职责 1&#xff09;Thread-线程 线程管理 线程通讯 线程安全锁机制 2&#xff09;Network-网络 网络模型 网络消息协议 断线重连 网络安全 防范重复消息 防范篡改消息内容 防范篡改内存数据 网络承载 3&#xff0…

OpenKylin安装Kafka

一、操作系统 openKylin 1.0.1 X86 二、下载安装包 # 安装依赖jdk sudo apt-get update sudo apt-get install default-jdk # 下载kafka mkdir -p /data/software/kafka wget https://archive.apache.org/dist/kafka/2.4.1/kafka_2.13-2.4.1.tgz三、解压安装 # 解压缩Kafka…

【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

目录 前言 一、自动装箱与拆箱&#xff08;以 Integer 包装类为例&#xff09; 二、再来看看几个示例 ​编辑三、Double ,Float 类型亦是如此吗&#xff1f; 前言 小伙伴们大家好&#xff0c;日常使用业务层方面的代码居多&#xff0c;但也不可忘了基本的一些代码格式以及原…

使用Flink实现Kafka到MySQL的数据流转换:一个基于Flink的实践指南

使用Flink实现Kafka到MySQL的数据流转换 在现代数据处理架构中&#xff0c;Kafka和MySQL是两种非常流行的技术。Kafka作为一个高吞吐量的分布式消息系统&#xff0c;常用于构建实时数据流管道。而MySQL则是广泛使用的关系型数据库&#xff0c;适用于存储和查询数据。在某些场景…

微信小程序如何进行npm导入组件

文章目录 目录 文章目录 前言 一、安装node 二、微信小程序通过npm安装组件&#xff08;以Vant-weapp为例&#xff09; 一、Vant-weapp下载 二 、修改 app.json 三 、修改 project.config.json 四 、 构建 npm 包 前言 微信小程序使用npm导入有很多的教程&#xff0c;我…

Vue_08事件处理

最近在学一点前端的Vue。这篇文章来说说Vue中事件处理 我理解的事件处理就是说能够让用户与我们的系统实现交互操作&#xff0c;我们人发出的动作就是事件&#xff0c;我们需要编写vue来处理我们人类发出的事件。 一、事件处理基础 v-on指令 这里使用的是使用按钮触发一个弹…

Kafka入门到实战-第四弹

Kafka入门到实战 Kafka集群搭建官网地址Kafka概述使用Kraft搭建Kafka集群更新计划 Kafka集群搭建 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://kafka.apache.org/Kafka概述 Apache Kafka 是一个开源的分布式事件…

计算机网络——31数据链路层和局域网引论和服务

数据链路层和局域网 WAN&#xff1a;网络形式采用点到点链路 带宽大&#xff0c;距离远&#xff08;延迟大&#xff09; 贷款延迟积大 如果采用多点连接方式 竞争方式&#xff1a;一旦冲突代价大令牌等协调方式&#xff1a;在其中协调节点的发送代价大 点到点链路的链路层服…

学习日记(SSM整合流程_SpringMVC_part_two)

目录 大致流程如下 1、创建工程 2、SSM配置类结构 3、功能模块 代码部分 整体结构 Jdbc.Config MyBatisConfig ServletConfig SpringConfig SpringMvcConfig BookController BookDao Book BusinessException SystemException Cord Result BookService BookserviceImpl jd…

手写红黑树【数据结构】

手写红黑树【数据结构】 前言版权推荐手写红黑树一、理论知识红黑树的特征增加删除 二、手写代码初始-树结点初始-红黑树初始-遍历初始-判断红黑树是否有效查找增加-1.父为黑&#xff0c;直接插入增加-2. 父叔为红&#xff0c;颜色调换增加-3. 父红叔黑&#xff0c;颜色调换&am…

java Web洗衣店管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 洗衣店管理系统是一套完善的web设计系统&#xff0c;对理解JSP java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&#xff0c;使用…