使用html和css的一些案列（小米官网）
2024-05-04 16:13:50
1.小米导航栏
html部分
<!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"><title>Document</title><link rel="stylesheet" href="小米导航.css">
</head>
<body><div id="body"><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>
</body>
</html>css部分
*{padding: 0;margin: 0;
}
#body{width: 750px;height: 100px;line-height: 120px;background-color: #FFFFFF;position: absolute;right: 400px;
}
a{text-decoration: none;padding-left: 25px;color: #333333;
}效果图
2.小米上边栏
html部分
<!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"><title>Document</title><link rel="stylesheet" href="小米上边栏.css">
</head>
<body><div id="sel"><div class="body"><a href="" id="a">小米官网</a><span class="seq">|</span><a href="" id="a">小米商城</a><span class="seq">|</span><a href="" id="a">MIUI</a><span class="seq">|</span><a href="" id="a">loT</a><span class="seq">|</span><a href="" id="a">云服务</a><span class="seq">|</span><a href="" id="a">天星数科</a><span class="seq">|</span><a href="" id="a">有品</a><span class="seq">|</span><a href="" id="a">小爱开放平台</a><span class="seq">|</span><a href="" id="a">企业团购</a><span class="seq">|</span><a href="" id="a">资质证照</a><span class="seq">|</span><a href="" id="a">协议规则</a><span class="seq">|</span><a href="" id="a">下载app</a><span class="seq">|</span><a href="" id="a">SelectLocation</a><span class="seq">|</span></div><div class="head"><a href="" id="b">登录</a><span class="seq">|</span><a href="" id="b">注册</a><span class="seq">|</span><a href="" id="b">消息通知</a><span class="seq">|</span></div></div>
</body>
</html>css部分
*{padding: 0;margin: 0;
}
#sel{height: 40px;width: 1200px;background-color: #333333;}
.body{width: 900px;height: 40px;background-color: #333333;display: inline-block;line-height: 40px;margin-left: 50px;
}
.head{display: inline-block;width: 150px;height: 40px;background-color: #333333;line-height: 40px;float: right;
}
a{color: #B0B0B0;font-size: 12px;text-decoration: none;
}
.seq{padding-left: 5px;padding-right: 5px;font-weight: 100;color: #424242;
}效果图
3.小米侧边栏
html部分
<!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"><title>Document</title><link rel="stylesheet" href="侧边栏.css">
</head><body><div id="body"><a href="">手机</a><a href="">电视</a><a href="">笔记本 平板</a><a href="">出行 穿戴</a><a href="">耳机 音箱</a><a href="">家电</a><a href="">智能 路由器</a><a href="">电源 配件</a><a href="">健康 儿童</a><a href="">生活 箱包</a></div>
</body></html>css部分
* {padding: 0;margin: 0;
}#body {width: 234px;height: 460px;background-color: #3F3D3D;padding: 25px 0px;
}#body a {line-height: 42px;display: block;width: 204px;height: 42px;color: white;text-decoration: none;padding-left: 30px;font-size: 14px;
}a:hover {background-color: #FF6700;
}效果图
4.小米手机栏
html部分
<!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"><title>Document</title><link rel="stylesheet" href="小米手机栏.css">
</head>
<body><div id="title"> <h2>手机</h2> </div><div id="left"><a href="" id="l"><img src="5.jpg" alt="" height="520px" width="200px"></a></div> <div id="right"><div><a href="" id="m"><img src="7.jpg" alt="" id="a"><h3>Xiaomi 12S Ultra</h3><p id="ms">这真徕卡|专业徕卡影像</p><p><span id="n">5999元起</span></p></a><a href="" id="m"><img src="6.jpg" alt="" id="b"><h3>Xiaomi 12S Pro</h3><p id="ms">骁龙8+ 旗舰处理器|徕卡影像</p><p><span id="n">4699元起</span></p></a><a href="" id="m"><img src="9.jpg" alt="" id="c"><h3>Xioami 12S</h3><p id="ms">小尺寸性能旗舰|徕卡影像</p><p><span id="n">3999元起</span></p></a><a href="" id="m"><img src="1.jpg" alt="" id="d"><h3>Xiaomi 12 Pro 天玑版</h3><p id="ms">全球首发天玑9000+ | 叶脉冷泵散热系</p><p><span id="n">3999元起</span></p></a><a href="" id="m"><img src="2.jpg" alt="" id="e"><h3>Redmi Note 11T Pro+</h3><p id="ms">天玑8100+|真旗舰芯</p><p><span id="n">1999元起</span><span id="v">2099元</span></p></a><a href="" id="m"><img src="4.jpg" alt="" id="f"><h3>Redmi Note 11T Pro</h3><p id="ms">天玑8100+|真旗舰芯</p><p><span id="n">1699元起</span><span id="v">1799元</span></p></a><a href="" id="m"><img src="3.jpg" alt="" id="g"><h3>Redmi Note 11SE</h3><p id="ms">双卡双5G|疾速登陆</p><p><span id="n">999元起</span><span id="v">1099元</span></p></a><a href="" id="m"><img src="8.jpg" alt="" id="h"><h3>Xiaomi Civi 1S</h3><p id="ms">原生美肌人像|奇迹阳光动人新色</p><p><span id="n">2999元起</span></p></a></div>
</body>
</html>css部分
*{padding: 0;margin: 0;
}
#left{display: inline-block;height: 450px;width: 200px;float: left;margin-top: 20px;
}
#l{/* float: left; *//* padding-top: 20px; */
}
#a{width: 119px;height: 159px;
}
#v{text-decoration: line-through;color: #B0B0B0;padding-left: 0px;
}
#m{display: inline-block;width: 205px;height: 230px;text-decoration: none;padding-top: 20px;padding-bottom: 20px;float: left;
}
#right{width: 820px;height: 300px;text-align: center;float: left;
}
h3{color: #333333;font-size: 14px;font-weight: 400;padding-top: 10px;
}
#ms{color: #B0B0B0;font-size: 12px;padding-top: 5px;
}
#n{color: #FF6700;font-size: 14px;display: inline-block;padding: 15px 10px 0px 10px;
}
效果图
这些就是仅用html和css所做的一些案例，对空间的布局，对元素的理解.....
使用html和css的一些案列（小米官网）相关推荐
- html+css 简单的静态网页小米官网
html+css简单静态小米官网 把之前做的改进了一下,其他的都是一样的布局 效果图: 新增了一些字体文件 不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
- 用html+css实现小米官网的模拟
小米官网制作 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 用html和css仿作小米官网（静态）
目录 一:准备工作 二:头部导航栏部分 三:中间照片部分 四:尾部文字部分 准备工作: 首先我们需要从小米官网的网页源文件上下载需要的图片等素材,其次我们需要准备一个reset.css的 ...
- Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果 大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
- html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
- 小米官网首屏纯css代码
小米官网首屏代码(纯CSS编写) ** 1.html部分: ** 小米商城 <!-- bar的内部容器--> <div class="top-bar w"> ...
- css:动画 小米官网盒子阴影 心跳动画
小米官网盒子阴影 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
- 前端700行代码项目练习--小米官网（仅html、css实现）
目录 一.效果展示 二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标 三.代码 一.效果展示 二.准备工具 1.css重置样式 请自行查找,CSDN上一 ...
- HTML+CSS 小米官网案例
HTML+CSS 小米官网案例 收获:学会引用阿里矢量图,观察网页布局,熟练掌握float的使用方式,简单实用css动画,调整网页布局,引用css样式. 网页没有完全还原,建议大家找最新的教程 xia ...
最新文章
- js6的未来（二）函数增强
- 以比特币现金（BCH）为核心的慈善经济体系革新业态
- 小程序不同页面之间通讯的解决方案
- 设置finder窗口大小_五个Finder技巧让你快速提高工作效率
- 深入理解浏览器原理和架构|硬核
- 苏州大学计算机科学研究生,报录比最高专业TOP10！就离谱！
- c++ mysql 写库 乱码 ??_mysql c++ 乱码 解决方法
- redis数据类型语法及与java连接
- 0514JS函数练习
- 解决vagrant up出现：An error occurred while downloading the remote file. The errormessage
- MTPA 永磁同步电机 计算
- TwinCAT 3 基础——编程基础
- oracle12c不使用cdb模式,12c CDB和PDB启动和关闭操作
- get与navigate方法
- 一文解释Micro-F1, Macro-F1，Weighted-F1
- QTP数据驱动和关键字驱动
- 普歌-飞灵团队-nuxt中jQuery报e.indexOf is not a function错误
- 关于解决显卡自己卸载后，无法安装新显卡驱动的解决办法（亲测）
- APS审核经验+审核资料汇总——计算机科学与技术专业上海德语审核
- Android Dialog