html和css写淘宝的快速导航条

目录

1、css代码

2、html代码


1、css代码

 <style>* {margin: 0;padding: 0;list-style: none;text-decoration: none;}.nav {width: 900px;height: 40px;background-color: rgb(247, 249, 250);margin: 50px auto;padding-left: 30px;}.nav>li {float: left;width: 100px;text-align: center;}a {color: rgb(82, 82, 83);border-right: 1px solid rgb(90, 88, 88);display: block;width: 100px;height: 20px;margin-top: 10px;text-align: center;}.first {color: red;font-weight: 800;}.two {color: green;font-weight: 800;}a:hover {color: red;}.three {border-right: none;}</style>

2、html代码

 <ul class="nav"><li><a href="" class="first">天猫</a></li><li><a href="" class="first">聚划算</a></li><li><a href="" class="two">天猫超市</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="" class="three">淘宝直播</a></li></ul>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/255400.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

06 硬件知识入门(MOSS管)

1 简介 MOS管和三极管的驱动方式完全不一样&#xff0c;以NPN型三极管为例&#xff0c;base极以小电流打开三极管&#xff0c;此时三极管的集电极被打开&#xff0c;发射极的高电压会导入&#xff0c;此时电流&#xff1a;Ic IbIe &#xff1b;电压&#xff1a;Ue>Uc>Ub…

2024年网络安全比赛--系统渗透测试(超详细)

一、竞赛时间 180分钟 共计3小时 二、竞赛阶段 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 1.在渗透机中对服务器主机进行信息收集&#xff0c;将服务器开启的端口号作为 Flag 值提交; 2.在渗透机中对服务器主机进行渗透&#xff0c;在服务器主机中获取服务器主机名称&#xff…

前端典例算法集合

前言 刷算法顺序&#xff1a;1、熟悉本文章第1点的内容&#xff1b;2、刷力扣算法&#xff0c;可以参考这本书的顺序与思想&#xff1a;代码随想录完整版PDF下载 | 合集下载 | 百度云 | | 代码随想录 (programmercarl.com) 3、刷牛客的高频考题 1、熟悉数组Array&#xff0c…

泰勒级数泰勒展开, 麦克劳林级数

一直认为泰勒展开就是泰勒级数。查度娘说不是&#xff0c;晕&#xff0c;当知识储备&#xff0c;重温高数。想当年&#xff0c;同济编的高数&#xff0c;每次都是95分&#xff08;百分制&#xff09;以上呢。 一、定义不同 泰勒级数&#xff08;英语&#xff1a;Taylor series…

使用pandas制作图表

数据可视化对于数据分析的重要性不言而喻&#xff0c;一个优秀的图表有足以一眼就看出关键所在。pandas利用matplotlib实现绘图。能够提供各种各样的图表功能&#xff0c;包括: 单折线图多折线图柱状图叠加柱状图水平叠加柱状图直方图拆分直方图箱型图区域块图形散点图饼图多子…

若依框架的搭建

若依框架 若依框架的搭建&#xff08;前后端分离版本&#xff09;环境要求IDEA拉取Gitee源码Mysql 配置Redis 配置后端启动前端配置问题解决 效果展示 若依框架的搭建&#xff08;前后端分离版本&#xff09; 简介 RuoYi-Vue 是一个 Java EE 企业级快速开发平台&#xff0c;基…

编程应用实例,商超进销存管理系统软件,支持扫描条形码也可以自编码

一、前言 软件特色&#xff1a; 1、功能实用&#xff0c;操作简单&#xff0c;不会电脑也会操作&#xff0c;软件免安装&#xff0c;已内置数据库。软件在关闭的时候&#xff0c;可以设置会员数据备份到U盘&#xff0c;数据本机备份一份&#xff0c;U盘备份一份&#xff0c;双…

流量分析1--菜刀666

1&#xff1a;菜刀666&#xff1a; 题目描述 分析流量包&#xff0c;过滤http数据流 追踪TCP数据流 对比第5个流和第7个流发现&#xff0c;同样的目录下 多出了6666.jpg。猜测是由攻击者上传&#xff0c;直接在请求包里搜索FFD8--FFD9 保存为1.jpg 利用foremost工具对1.jpg进…

生成模型之Flow-Based model

Flow-Based Model 文章目录 Flow-Based Model简介总览数学基础jacobian matrixdeterminant行列式Change of variable theorem 架构常见几种方法coupling layer采用1*1卷积进行channel shuffle 简介 ​ Flow-Based对概率密度函数的直接建模&#xff0c;这使得它们在数据生成和推…

Java-单人聊天

package 一对一用户;import java.awt.BorderLayout;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.ServerSocket;import java.net.Socket;import java.util.Vector;import javax.sw…

Scratch少儿编程系统开发时案例验证的必要性

scratch少儿编程[1] 随着少儿编程教育的普及&#xff0c;越来越多的公司和集成商开始关注scratch少儿编程系统的二次开发。scratch是一个由麻省理工学院媒体实验室开发的免费、开源的少儿编程软件。它具有易用、趣味性强、可扩展性强等特点&#xff0c;非常适合少儿编程教育。…

联想范建平:联想混合AI架构具备两大明显优势

12月7日&#xff0c;首届AI PC创新论坛在北京联想集团总部举办。联想集团副总裁、联想研究院人工智能实验室负责人范建平表示&#xff0c;为提供真正可信、个性化的AI专属服务&#xff0c;联想提出了混合智能&#xff08;Hybrid AI&#xff09;概念&#xff0c;并已经显现出更强…