web练习仿小米页面

效果图：

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.mzph.cn/news/781691.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

江苏开放大学2024年春《液压与气压传动060246》第2形考作业占形考成绩的25％参考答案

江苏开放大学2024年春《液压与气压传动060246》第2形考作业占形考成绩的25％参考答案

​答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 电大搜题 多的用不完的题库&#xff0c;支持文字、图片搜题&…
阅读更多...
python--冒泡排序和main函数

python--冒泡排序和main函数

1.判断是不是回文数&#xff1a; x int(input("请输入一个正整数&#xff1a;")) x str(x) if x x[::-1]:print("是回文数。") else:print("不是回文数。") 2.冒泡排序 # 冒泡排序: # [30&#xff0c;8&#xff0c;-10&#xff0c; 50&am…
阅读更多...
[OAuth2]authorization_request_not_found

[OAuth2]authorization_request_not_found

最近在写一套OAuth2s授权认证&#xff0c;当在oauth2-client调用oauth2-server&#xff0c;并且在点击授权以后&#xff0c;oauth2-client却显示【authorization_request_not_found】&#xff0c;并跳到了登陆页面。 经过调试发现&#xff0c;【authorization_request_not_fou…
阅读更多...
Java希尔排序知识点（含面试大厂题和源码）

Java希尔排序知识点（含面试大厂题和源码）

希尔排序&#xff08;Shell Sort&#xff09;是插入排序的一种改进版本&#xff0c;也被称为“缩小增量排序”。它是由IBM的研究员Donald Shell于1959年提出的。希尔排序的核心思想是将原始数据集分割成若干个子序列&#xff0c;每个子序列由相隔一定增量的元素组成&#xff0c…
阅读更多...
[LeetCode][400]第 N 位数字

[LeetCode][400]第 N 位数字

题目 400. 第 N 位数字 给你一个整数 n &#xff0c;请你在无限的整数序列 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, …] 中找出并返回第 n 位上的数字。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;3 示例 2&#xff1a; 输入&#xff1a;n 11 输出&#xff1a;…
阅读更多...
java算法汇总(蓝桥常用--＞自总版)(更新中...)

java算法汇总(蓝桥常用--＞自总版)(更新中...)

这里写目录标题 1.递归求n的阶乘2.互质3.例题:奇妙的数字两个数字拼接String.toCharArray()方法String.valueOf()方法 4.例题:美丽的2String.contains()方法 5.ASCII码---a,A,0的转换6.String[] a---->求sum(a[p].charAt(q))-0;7.复数BigInteger 大整数类型本题用到的方法--…
阅读更多...
Sora是否能颠覆视频制作行业？一文带你了解

Sora是否能颠覆视频制作行业？一文带你了解

一个月前OpenAI宣布了一款名为Sora的新生成式人工智能系统&#xff0c;该系统可以根据文本提示生成短视频。虽然Sora尚未向公众开放&#xff0c;但迄今为止发布的高质量样本已经引起了兴奋和担忧的反应。 OpenAI发布的样本视频&#xff08;该公司称这些视频是由Sora直接制作&am…
阅读更多...
Python学习笔记-简单案例实现多进程与多线程

Python学习笔记-简单案例实现多进程与多线程

Python 的多进程与多线程是并发编程的两种重要方式&#xff0c;用于提高程序的执行效率。它们各自有不同的特点和适用场景。 多进程&#xff08;Multiprocessing&#xff09; 概念&#xff1a; 多进程是指操作系统中同时运行多个程序实例&#xff0c;每个实例称为一个进程。…
阅读更多...
表单元素使用

表单元素使用

表单元素使用 要完成的效果:代码实现: 要完成的效果: 代码实现: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…
阅读更多...
完整部署一套k8s-v.1.28.0版本的集群

完整部署一套k8s-v.1.28.0版本的集群

一、系统情况 虚拟机版本&#xff1a;esxi 6.7 系统版本&#xff1a;centos7.9_2009_x86 配置&#xff1a;4核8G&#xff08;官网最低要求2核2G&#xff09; 192.168.0.137 master节点 192.168.0.139 node2节点 192.168.0.138 node1节点&#xff08;节点扩容练习&#xf…
阅读更多...
Spring Cloud_Spring Cloud Alibaba_00000

Spring Cloud_Spring Cloud Alibaba_00000

版本选择 Spring Boot版本选择 Spring Boot github源码地址&#xff1a;https://github.com/spring-projects/spring-boot/releases/ Spring Boot github地址&#xff1a;https://github.com/spring-projects/spring-boot/wiki/Spring-Boot-3.0-Release-Notes Spring Cloud g…
阅读更多...
DataX 源码改造支持Mysql 8.X

DataX 源码改造支持Mysql 8.X

文章目录 DataX 源码改造支持Mysql 8.X问题背景克隆源代码并修改重新打包生产环境发布DataX 源码改造支持Mysql 8.X 问题背景 今天在使用DataX同步数据的时候遇到一个问题，报错如下 错误信息为：java.sql.SQLException: No suitable driver found for ["jdbc:mysql://…
阅读更多...
Java-常见面试题收集(七)

Java-常见面试题收集(七)

十四 MySQL 1 MySQL 支持的存储引擎 MySQL 支持多种存储引擎&#xff0c;常见的有2种&#xff0c;你可以通过 show engines 命令来查看 MySQL 支持的所有存储引擎。MySQL 当前默认的存储引擎是 InnoDB。并且&#xff0c;所有的存储引擎中只有 InnoDB 是事务性存储引擎&#xf…
阅读更多...
==和equals的区别【大白话Java面试题】

==和equals的区别【大白话Java面试题】

和equals的区别 大白话回答 的作用&#xff1a; 　　基本类型&#xff1a;比较的就是值是否相同 　　引用类型&#xff1a;比较的就是地址值是否相同 equals 的作用: 　　引用类型&#xff1a;默认情况下&#xff0c;比较的是地址值。 注&#xff1a;不过&#xff0c;我们可以…
阅读更多...
在axios中设置方法防止http重复请求

在axios中设置方法防止http重复请求

可以在封装的 Axios 中设置方法来防止 HTTP 的重复请求。一种常见的方法是通过设置一个标识符&#xff0c;在发送请求前检查该标识符&#xff0c;如果之前已经有相同的请求正在进行&#xff0c;则取消当前请求或者等待上一个请求完成后再发送新请求。这种方式可以有效地避免重复…
阅读更多...
CCF考级 1-8级考纲知识点

CCF考级 1-8级考纲知识点

CCF考级 C 一级考纲知识内容计算机基础知识集成开发环境结构化程序设计程序的基本语句程序的基本概念基本运算基本数据类型 C 二级考纲知识内容计算机存储与网络程序设计语言流程图ASCII 编码数据类型转换多层分支/循环结构数学函数 C 三级考纲知识内容数据编码进制转换位运算算…
阅读更多...
On Java8读书笔记

On Java8读书笔记

Housekeeping Unsafe programming is one of the major culprits that makes programming expensive 使用构造器确保初始化 初始化数据是一个相当重要但是常常容易忘记的事&#xff0c;但是作为一个程序员&#xff0c;你也不想跨过千山万水的Debug&#xff0c;最后与变量未初始…
阅读更多...
P8715 [蓝桥杯 2020 省 AB2] 子串分值

P8715 [蓝桥杯 2020 省 AB2] 子串分值

一、题目描述 P8715 [蓝桥杯 2020 省 AB2] 子串分值 二、问题简析 记录字符串 s s s 的 第 i i i 个字符 s i s_i si​&#xff08; 0 ≤ i < s . s i z e 0\leq i<s.size 0≤i<s.size&#xff09;上一次出现的位置 p r e i pre_i prei​、下一次出现的位置 n…
阅读更多...
模型部署实战：从训练到上线

模型部署实战：从训练到上线

目录 1.前言 2.RESTful API设计 3.使用Flask/Django开发后端服务 4.使用TensorFlow Serving部署模型 5.性能监控与服务维护要点 6.总结 1.前言 在机器学习的全周期中&#xff0c;模型部署是至关重要的一环。经过长时间的训练、验证和优化&#xff0c;当模型准备就绪时&am…
阅读更多...
【Leetcode】top 100 栈

【Leetcode】top 100 栈

基础知识补充 1.栈是一种运算受限的线性表&#xff0c;仅允许在一端进行插入和删除操作&#xff1b; 2.可用列表实现&#xff0c;list.append(val) // list.pop() 题目 20 有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的…
阅读更多...
最新文章

Copyright @ 2022~2023