小米官网静态页面：

导航栏部分：

这里用id选择器，猫脸动画：class选择器（复习！）

F12

导航栏分了左右两个部分：

下图18行少了个v，记得补上，是navCenter

设置好网页的边距
图片原本是带着框线的，要去掉
a标签本来是带着下划线的，要去掉

小米官网~Selection Location

naCenter的div里写无序列表ul，里面写小米官网~Selection Location
每个类别后都有一个竖线，最后一个li的后面没有竖线，所以最后一个li要用上class属性，因为它在后面需要单独设置

鼠标悬停设置：
达到效果字体颜色改变，并且没有下划线

购物车

购物车标
用的时候一定要删掉里面的点

购物车是和无序列表ul是并列关系
小知识点：href="#"是一种临时链接的写法，这样写就是说这个链接目前不可用，点击了也不会有作用，还是会跳转到本页，当#被有效链接替换才会起作用。

下图是鼠标放在上面的效果：

登录注册消息通知

登录注册消息通知是和购物车和 li 同级

效果是鼠标放上去字变白色，并且是没有下划线的

导航栏效果展示：

代码：
html：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>小米商城</title><!-- 对应图标库的引入 --><!-- Bootstrap --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- 外部文件引入 --><link rel="stylesheet" type="text/css" href="css/mi.css" /></head><body><div id="container"><div id="header"><div id="nav"><div id="navCenter"><ul><li><a href="#">小米官网</a></li><li><a href="#">小米商城</a></li><li><a href="#">MIUI</a></li><li><a href="#">oT</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="#">企业团购</a></li><li><a href="#">资质证书</a></li><li><a href="#">协议规则</a></li><li><a href="#">下app</a></li><li class="lastli"><a href="#">SelectLocation</a></li></ul><div id="navRightCar"><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>购物车(0)</a></div><div id="navRightLogin"><a href="#">登录</a><span>|</span><a href="#">注册</a><span>|</span><a href="#">消息通知</a><span>|</span></div></div></div></div></div></body>
</html>

css：

/* 初始化 */
*{margin: 0;padding: 0;
}
ul{list-style: none;
}
body{font-family: "微软雅黑";
}
img{border: none;
}
a{/* 去掉a标签下划线 */text-decoration: none;
}
#container{width: 100%;
}
#header{width: 100%;height: 140px;
}
#nav{width: 100%;height: 40px;background-color: #333;
}
#navCenter{width: 1226px;height: 40px;/* 位置居中 */margin: 0 auto;/* background-color: red; */
}
#navCenter ul{margin-top: 16px;float: left;
}
#navCenter ul li{float: left;font-size: 12px;line-height: 14px;/* 右边框 */border-right: 1px solid #424242;
}
#navCenter ul li a{color: #b0b0b0;margin-right: 8px;margin-left: 8px;
}
#navCenter ul .lastli{border: none;
}
#navCenter ul li a:hover{color: #E0E0E0;text-decoration: none;
}
#navRightCar{background-color: #424242;width: 120px;height: 40px;float: right;line-height: 40px;/* 设置鼠标移动上去，变成手的形状 */cursor: pointer;/* 设置父级div里面的内容水平居中 */text-align: center;
}
#navRightCar a{font-size: 12px;color: #B0B0B0;
}
#navRightCar:hover{background-color: white;
}
#navRightCar:hover a{color: #ff6700;/* 去掉a标签下划线 */text-decoration: none;
}
#navRightLogin{float: right;height: 40px;line-height: 40px;/* 设置父级div里面的内容水平居中 */text-align: center;margin-right: 15px;
}
#navRightLogin span{color: #424242;/* 去掉a标签下划线 */text-decoration: none;
}
#navRightLogin a{color: #B0B0B0;font-size: 12px;margin-left: 5px;margin-right: 5px;
}
#navRightLogin a:hover{color: #E0E0E0;
}

实战小米官网静态页面1：导航栏部分相关推荐

仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
小米官网静态网页练习记录
本次练习是在完成京东网页的独自完成,来达到提升熟练度的目的. 完成效果图总结 (1)logo:在logo处不只是放图片,还外加文字通过检索权重 .header-b .logo::before{ co ...
小米官网静态网页项目实战3
小米商城APP二维码下拉以及过渡效果结构 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
html+css复刻NIKE官网静态页面（一）
nike的官网比较简洁,是我喜欢的风格,那么,复刻nike官网要怎么入手呢? html部分对一个网页进行复刻,我们应该先从结构下手. 这是初步的结构的分析,在html中我们可以用div或者secti ...
html+css仿写NIKE官网静态页面
第一次较完整的网页,没有动画,纯静态,没有调式各种窗口大小,谷歌浏览器缩放90%为正常比例部分效果图 html <!DOCTYPE html> <html lang="e ...
小米官网登陆页面制作
1.效果图 2.所搭建文件 3.index.html文件 <!DOCTYPE html> <html lang="en"> <head> < ...
仿写小米官网右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...

实战小米官网静态页面1：导航栏部分

小米官网静态页面：

导航栏部分：

小米官网~Selection Location

购物车

登录注册消息通知

实战小米官网静态页面1：导航栏部分相关推荐

最新文章

热门文章