一、页面效果展示

实现如下效果：
（官网）

（自己实现的效果）

二、代码实现解析

1、导航栏使用 ul-li 来实现，先写出 html 基本框架。

<body><!-- 整个导航栏 --><div class="nav"><!-- 导航栏的内容部分 --><div class="content"><!-- 添加图片 --><a href="#"><img src="./img/pdd_logo.png"/></a><!-- 导航栏 --><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>拼多多商家入驻</span></a></li><li><a href="#"><span>跨境商家入驻</span></a></li><li><a href="#"><span>热点资讯</span></a></li><li><a href="#"><span>社会招聘</span></a></li><li><a href="#"><span>校园招聘</span></a></li><li><a href="#"><span>招采平台</span></a></li><li><a href="#"><span>帮助中心</span></a></li><li><a href="#"><span>举报平台</span></a></li><li><a href="#"><span>分享赚钱</span></a></li><li><a href="#"><span>查快递</span></a></li></ul></div></div>
</body>

当前效果如下：

2、给元素添加样式，使用 position: fixed; 将整个导航栏设置为固定定位，使用 top: 0 固定在最上方。

/* 初始化样式 */
* {padding: 0;margin: 0;
}/* 设置整个导航栏.nav的样式 */
.nav {/* 将导航栏固定在整个页面上方 */position: fixed;top: 0;width: 100%;height: 105px;border-bottom: 5px solid red;
}

当前效果如下：

3、调整导航元素内容 .content 的位置，并将图片缩放到合适大小。

.nav .content {/* 设置宽高 */width: 1200px;height: 105px;/* 居中 */margin: 0 auto;
}/* 设置图片显示尺寸和边距 */
.nav .content img {/* 修改了图片宽度后高度也会按原比例自动变化 */width: 180px;  /* 边距 */margin: 21px 0;
}

当前效果如下：

4、由于 ul-li 中的元素是垂直放置的，通过对子元素使用 float: left 让元素水平放置，并将前面的 ul li 小圆点和 a 的自带样式消除，设置 span 中的导航文字的样式。

.nav .content ul {/* 清除小圆点 */list-style: none;/* 设置高度，并让元素垂直居中 */height: 20px;line-height: 20px;
}.nav .content ul li {/* 设置元素左浮动 */float: left;
}.nav .content ul li a {/* 清除 a 标签自带的样式 */text-decoration: none;
}.nav .content ul li a span {/* 字体颜色 */color: #6c6c6c;/* 左右边距 */margin: 0 10px;/* 字体大小 */font-size: 16px;
}

当前效果如下：

5、将 ul-li 放到合适的位置，设置绝对定位 position: absolute 来调整位置，那父元素 .content 就要设置相对定位 position: relative 。

.nav .content {width: 1200px;height: 105px;margin: 0 auto;/* 新增 */position: relative;
}.nav .content ul {list-style: none;height: 20px;line-height: 20px;/* 新增 */position: absolute;right: 24px;top: 50%;margin-top: -10px;
}

效果如下，导航条已经基本完成了：

6、可以看到官网中的导航文字中的分割线还没有实现，可以对 ul-li 设置右边框线来实现该效果，并通过 ul li:last-child 选择到最右边的 li 多余的边框线取消掉。

.nav .content ul li {float: left;/* 新增 */border-right: 1px solid #6c6c6c;
}/* 选择最右边的 li */
.nav .content ul li:last-child {/* 取消掉最右边的边框线 */border: none;
}

当前效果如下：

7、官网中的第一个导航文字的样式都不一样，用 ul li:first-child span 为它单独设置一个样式，最后将导航文字两边多余的边距给清除就完成了。

/* 选中第一个span单独设置样式 */
.nav .content ul li:first-child span {margin-left: 0;       /* 清除左边多余边距 */color: #fc475d;font-weight: bold; /* 加粗 */
}.nav .content ul li:last-child span {margin-right: 0;  /* 清除右边多余边距 */
}

最终效果：

三、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {padding: 0;margin: 0;}.nav {position: fixed;top: 0;width: 100%;height: 105px;border-bottom: 5px solid red;}.nav .content {position: relative;width: 1200px;height: 105px;margin: 0 auto;}.nav .content img {width: 180px;margin: 21px 0;}.nav .content ul {list-style: none;position: absolute;right: 24px;top: 50%;margin-top: -10px;height: 20px;line-height: 20px;}.nav .content ul li {float: left;border-right: 1px solid #6c6c6c;}.nav .content ul li a {text-decoration: none;}.nav .content ul li a span {color: #6c6c6c;margin: 0 10px;font-size: 16px;}.nav .content ul li:last-child {border: none;}.nav .content ul li:first-child span {margin-left: 0;color: #fc475d;font-weight: bold;}.nav .content ul li:last-child span {margin-right: 0;}</style></head><body><div class="nav"><div class="content"><a href="#"><img src="./img/pdd_logo.png"/></a><ul><li><a href="#"><span>首页</span></a></li><li><a href="#"><span>拼多多商家入驻</span></a></li><li><a href="#"><span>跨境商家入驻</span></a></li><li><a href="#"><span>热点资讯</span></a></li><li><a href="#"><span>社会招聘</span></a></li><li><a href="#"><span>校园招聘</span></a></li><li><a href="#"><span>招采平台</span></a></li><li><a href="#"><span>帮助中心</span></a></li><li><a href="#"><span>举报平台</span></a></li><li><a href="#"><span>分享赚钱</span></a></li><li><a href="#"><span>查快递</span></a></li></ul></div></div></body>
</html>

【前端小实战】拼多多首页导航布局相关推荐

微信小程序仿拼多多首页导航按钮
这里我也是参考别人实现的 https://blog.csdn.net/zhaohanqq/article/details/84389049 https://www.jb51.net/article/1 ...
Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多
码说明:Thinkphp开发微信商城小程序源码拼团小程序源码带后台+前端小程序拼团源码仿拼多多其它说明: 基于小程序的拼团应用,用户可通过拼团,随时发起拼团活动并分享给好友拼团是商品营销和售卖的一 ...
【HTML】HTML首页---拼多多首页界面-网易首页界面
1.引言设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题.你想要解决的问题,在微信 ...
Web前端学习仿拼多多软件——模拟练习
Web前端学习仿拼多多软件模拟练习,作者声明:该项目只是学习模拟软件前端的界面,不允许用于商业行为,否则后果自负! 代码界面截图(因为只是学习分享,所以已经多处避免雷同): 下载资源后运行的时候要记得 ...
榆熙电商：拼多多首页的装修技巧分享
店铺装修是每个电商运营都必须会的,如果是商家自己操作那就更需要掌握了,当然也可以在选择参考模板进行店铺装修.今天成都榆熙电子商务有限公司小编就跟大家聊一聊,拼多多店铺装修需要注意什么问题? 首先进入到 ...
成都拓嘉辰丰：拼多多首页竞价活动失败的原因
很多的商家会通过给商品定价更低来竞价,因为拼多多首页竞价是一个特别好的活动,如果竞价成功,那你的商品就会被曝光,获得更多的流量,但是一些商家没有注重一些问题导致拼多多首页竞价失败,无法获得被曝光的机会 ...
做好拼多多的几个小技巧-拼多多出评技巧
一个拼多多店铺如果没有销量,就意味着没有收入,因而提高销售量是每个店铺卖家都必须做的.今天小编就跟大家分享一下拼多多店铺提高销售量的5个技巧,希望能帮到大家. 1.提炼卖点和打造宝贝详情页. 提高销售 ...
拼多多首页html制作,拼多多商家视频怎么制作？有什么要求？
前不久拼多多推出了直播功能,从此也逐渐向内容营销靠近了.现在拼多多又推出了[商家视频]功能,是可以帮助商家增强消费者信任感.提升商品转化率及增强粉丝粘性的.拼多多商家视频是什么?怎么发布?下面给大家讲 ...
推“今日爆款”对标美团与拼多多，滴滴布局电商有何居心？
近期,不少互联网巨头的动作吸引不少的关注. 先是抖音再次对本地生活服务进行加码,在抖音App的内测版本中,抖音在其同城页加入了地图服务.然后是美团计划通过配股和发债筹资多达100亿美元.腾讯在美团本次 ...

【前端小实战】拼多多首页导航布局

文章目录

一、页面效果展示

二、代码实现解析

三、完整代码

【前端小实战】拼多多首页导航布局相关推荐

最新文章

热门文章