今天我们来做一个类似于淘宝网站的导航栏，我以天猫超市、聚划算、天猫作为今天的例子
开发工具:VsCode

HTML部分代码

首先我们先理一下编程思路，假设我们要做三个导航栏，我们就要对里面的字体大小、字体颜色、背景颜色等等属性进行一致的设置，所以我们要设置一个父级容器ul，以及里面的三个子元素li，并且每个子元素里分别有一个设置链接的a元素。具体html部分代码如下图：

css部分代码

首先，初始化昂。

*{    margin: 0;   padding:0;  }

先运行一下，看是什么效果：

哇，是不是感觉很丑，不急，下一步会更好。

淘宝上面的导航栏都是横着的，因为ul和li都是块状元素，所以我们先把这些横起来，这里我们加一个浮动float:left，系统内部就会自动把所有元素都转化成为inline-block（行级块元素），此时就可以横向排列了。（其中float:right和position:absolute也可以使系统内部发生转化）

横向排列完成了，a标签的链接会有下划线，我们不希望有下划线，text-decoration: none即可去除下划线。

设置容器的宽高，并且设置盒子外边距margin使3个容器之间隔着一点距离。

接着设置字体的颜色，淘宝红：#40。字体加粗font-weight: bold;

最后就要设置鼠标移动到链接事件a::hover（其实写a:hover也是可以的，系统会自动把后面那个冒号补上）我们希望鼠标放在链接上时容器背景变“淘宝色”，字体变白色。

css代码如下：

   *{    margin: 0;    padding:0;  }.nav{   list-style: none;}a{    text-decoration: none;
}.nav .list-item{    float:left;margin:0 10px;    height:30px;    line-height: 30px;    /*border:2px solid violet;*/}.nav .list-item a{    padding:0 5px;    color:#f40;    font-weight: bold;   height:30px;    display:inline-block;   border-radius:15px;}.nav .list-item a:hover{    background-color: #f40;    color:#fff;}

运行效果图：

不要在意上面那条线，那是浏览器的边框。

CSS+HTML如何写一个类似于淘宝的简单导航栏？相关推荐

写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
Android仿淘宝底部图标导航栏
在上一篇中,简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框,上午又花了两个小时研究了一下淘宝底部的导航栏实现,网上的做法也有很多,今天我就使用一种通过基本控件加上布局的方式,没有任 ...
仿淘宝左侧菜单导航栏纯Html + css 写的
这俩天闲来没事淘宝逛了一圈看到淘宝的左侧导航菜单做的是真心的棒啊,一时兴起,查了点资料抓了几个图片仿淘宝写了个css,时间紧写的不太好,大神勿喷,给小白做个参考废话不多说先来个效果图接下来直接上代 ...
浅析我对Web（淘宝网）导航栏的深入理解
首先刚拿到这个项目的实现我也一脸迷茫的,不知道数据库和jsp以及Controller之间的传递流程,下面我为大家浅析一下我对此类导航栏的理解吧. 首先:项目界面大概UI是这个样子的. 一级目录:化妆品 ...
vue动手写一个类似淘宝的订单表格
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.vue表格二.使用步骤 1.正文 2.data数据及样式一.vue表格二.使用步骤 1.正文代码如下(示例 ...
使用react 写一个仿淘宝图片放大镜效果
效果图人狠话不多,先上效果图,看看是不是各位想要的再往下看使用方法 import React, { Component } from "react"; import Image ...
模仿淘宝首页横向导航栏
@TOC在这里插入代码片 <nav class="w"><div class="nav-scroll"><!-- 列表信息 --& ...
陈华：淘宝同学左侧导航栏div鼠标上浮边框变色无遮挡处理方法
LESS源码: div{ width: 300px; height: 100px; border: 1px solid #CCC; margin:-1px; display: block; posit ...
淘宝首页左侧导航栏源代码
需要源码的朋友请Q我:
一个静态淘宝购物车网页练习
一个静态淘宝购物车网页练习话不多说,直接上代码! <!DOCTYPE html> <html><head><meta charset="utf-8 ...

CSS+HTML如何写一个类似于淘宝的简单导航栏？

HTML部分代码

css部分代码

CSS+HTML如何写一个类似于淘宝的简单导航栏？相关推荐

最新文章

热门文章