用html和css制作静态小米网页（一）

admin管理员组

文章数量:1794759

用html和css制作静态小米网页（一）

目录

一、成果展示

二、html部分

三、css样式设置

3.1上方导航栏格式设置

3.2小米商城app下拉框制作，这里将小三角与二维码分开制作

3.3文本框中样式设计

---

一、成果展示

二、html部分

小米首页最上部导航和下面的快速导航栏制作

<div class="nav"> <nav > <ul class="n1"> <li><a href="#">小米官网</a></li> <li class="line">|</li> <li><a href="#">小米商城</a></li> <li class="line">|</li> <li><a href="#">MIUI</a></li> <li class="line">|</li> <li><a href="#">loT</a></li> <li class="line">|</li> <li><a href="#">云服务</a></li> <li class="line">|</li> <li><a href="#">天星数科</a></li> <li class="line">|</li> <li><a href="#">有品</a></li> <li class="line">|</li> <li><a href="#">小爱开放平台</a></li> <li class="line">|</li> <li><a href="#">企业团购</a></li> <li class="line">|</li> <li><a href="#">资质证照</a></li> <li class="line">|</li> <li><a href="#">协议规则</a></li> <li class="line">|</li> <li class="app"><a href="#">下载app</a> <div class="app1"> <div class="app2"></div> <div class="app3"><img src="./img/download.png" alt="二维码图片"><p>小米商城app</p></div> </div> </li> <li class="line">|</li> <li><a href="#">Select Location</a></li> </ul> <ul class="n2"> <li><a href="#">登录</a></li> <li class="line">|</li> <li><a href="#">注册</a></li> <li class="line">|</li> <li><a href="#">消通知</a></li> <li class="cart"><a href="#" class="a1"><i class="fa fa-shopping-cart i1"></i>购物车（0）</a> <div class="sc"> 购物车还没有商品，赶紧选购吧！ </div> </li> </ul> </nav> </div> <div class="srr"> <header> <a href="#"><img src="./img/logo-mi2.png" alt=""></a> <div class="xiaomi"> <ul> <li><a href="#">Xiaomi手机</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/手机1.webp" alt=""></div> <p class="civi">Xiaomi Civi 1S</p> <p class="pay">2299元起</p> </a> </div> </div> </div> </li> <li><a href="#">Redmi 红米</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/手机2.webp" alt=""></div> <p class="civi">Red Note 11T Pro+</p> <p class="pay">1999元起</p> </a> </div> </div> </div> </li> <li><a href="#">电视</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/电视.webp" alt=""></div> <p class="civi">Redmi智能电视X55 2022</p> <p class="pay">2299元</p> </a> </div> </div> </div> </li> <li><a href="#">笔记本</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/笔记本.webp" alt=""></div> <p class="civi">RedmiBook Pro 14 2022 锐龙版</p> <p class="pay">5299元起</p> </a> </div> </div> </div> </li> <li><a href="#">平板</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/平板.webp" alt=""></div> <p class="civi">小米平板5</p> <p class="pay">1999元起</p> </a> </div> </div> </div> </li> <li><a href="#">家电</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/家电.webp" alt=""></div> <p class="civi">米家扫地机器人1T</p> <p class="pay">1299元</p> </a> </div> </div> </div> </li> <li><a href="#">路由器</a> <div class="xiaomi1"> <div class="phone1"> <div class="phone2"> <a href="#"> <div><img src="./img/路由器.webp" alt=""></div> <p class="civi">Redmi 电竞路由器 AX5400</p> <p class="pay">549元</p> </a> </div> </div> </div> </li> <li><a href="#">服务中心</a></li> <li><a href="#">社区</a></li> </ul> <div class="text"> <input type="text"> <a href="#"><i class="fa fa-search fa-1x"></i></a> </div> </div> </header> 三、css样式设置

这里将一些关键css样式设置整理一下

3.1上方导航栏格式设置

将整体分为两个部分一个设置左浮动一个设置右浮动即可，这里可以防止页面大小变化，也不会影响整体展示

.nav{ width: 100%; height: 40px; background-color: #333; } nav{ width: 1226px; height: 40px; margin: 0 auto; } nav>ul>li{ color: #b0b0b0; font-size: 12px; float: left; height: 40px; line-height: 40px; text-align: center; } nav>.n2{ float: right; } .line{ font-size: 12px; color: #424242; float: left; margin: 0 8px; } 3.2小米商城app下拉框制作，这里将小三角与二维码分开制作 .app1{ position: relative; display: none; z-index: 4; } .app3{ width: 140px; height: 150px; box-shadow: 0px 0px 3px #b0b0b0; position: absolute; background-color: white; z-index: 10; left: -45px; top: 1px; } /* 白色箭头设置 */ .app1>.app2{ width: 0px; height: 0px; border-width: 8px; border-color: transparent transparent white transparent; border-style: dashed; position: relative; bottom: 16px; left: 15px; } .app3>p{ font-size: 16px; margin: -16px; color: #333; } .app3>img{ width: 90px; height: 90px; margin-top: 20px; } .app:hover>.app1{ display: block; } 3.3文本框中样式设计

这里采用的focus中的聚焦方法使得文本框与其后面的a元素能够一起进行样式变化

.text>input:hover,.text>input:hover+a{ border:1px solid gray; } .text>input:focus,.text>input:focus+a{ border:1px solid #FF832F; } .text>a>i{ margin: 17px 17px; } .text>a:hover{ background-color: #FF832F; } .text>a:hover>i{ color: white; }

本文标签： 小米静态网页htmlcss