Tips_一级菜单栏实现

1.纵向

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>menu01</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         a{
12             text-decoration: none;
13             display: block;
14         }
15         ul{
16             list-style:none;
17         }
18         .menu{
19             width: 600px;
20             margin: 300px auto;
21         }
22         ul li a{
23             width: 120px;
24             height: 30px;
25             line-height: 30px;
26             text-align:center;
27             /*padding-left: 20px;*/
28             /*text-indent: 20px;*/
29             background: pink;
30             color:#fff;
31             margin-bottom: 5px;
32         }
33         a:hover{
34             background: #EE7A23;
35         }
36     </style>
37     
38 </head>
39 <body>
40  <div class="menu">
41     <ul>
42         <li><a href="javascript:;">首页</a></li>
43         <li><a href="javascript:;">行业解决方案</a></li>
44         <li><a href="javascript:;">资讯</a></li>
45         <li><a href="javascript:;">招聘</a></li>
46         <li><a href="javascript:;">服务</a></li>
47     </ul>
48  </div>
49 </body>
50 </html>

实现效果:

注意:

解决方案:

2.横向(注意:把<a>标签设置为:display: block;)

实现效果:

3.圆角

实现效果:

4.向上增加高度

效果图:

5.水平增加宽度(JS)

 1 <script type="text/javascript">
 2         window.onload=function(){
 3             var a_num = document.getElementsByTagName("a");
 4             for(let i=0;i<a_num.length;i  ){
 5                 a_num[i].onmouseover=function(){
 6                     clearInterval(this.time);
 7                     var $this = this;
 8                     $this.time = setInterval(function(){
 9                         $this.style.width = $this.offsetWidth 8 "px";
10                         if($this.offsetWidth>=120){
11                             clearInterval($this.time);
12                         }
13                     },30)
14                 }
15 
16                 a_num[i].onmouseout=function(){
17                     clearInterval(this.time);
18                     var $this = this;
19                     $this.time = setInterval(function(){
20                         $this.style.width = $this.offsetWidth-8 "px";
21                         if($this.offsetWidth<=120){
22                             $this.style.width = "120px";
23                             clearInterval($this.time);
24                         }
25                     },30)
26                 }
27 
28             }
29         }
30 
31 
32     </script>

6.水平增加宽度(JQ)

 1 <script type="text/javascript">
 2     $ (function(){
 3         $("a").hover(
 4             function(){
 5                 $(this).stop().animate({"width":"160px"},200);
 6             },
 7             function(){
 8                 $(this).stop().animate({"width":"120px"},200);
 9             }
10         )
11     })
12     </script>

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

数学基础 - 向量

1. 向量(Vector) 向量指具有大小和方向的量。 2 基(Basic,基底) 2.1 线性无关 在一个向量空间\(V_n\)中&#xff0c;假设&#xff1a; \(a_1e_1 ⋯ a_ne_n 0\)  (式1) 只在 \(a_1 ⋯ a_n 0\) 时成立&#xff0c;那么向量 \(\{e_1, e_2, ..., e_n\}\) 是线性无关的。 如…

2-使用git管理一个单片机程序

https://www.cnblogs.com/yangfengwu/p/10842205.html 我用电脑压缩一个文件,然后通过git上传,然后在新买的linux系统通过wget 网络下载这个压缩文件,然后死活解压不可以...无论是哪种格式的文件 一开始我怀疑是压缩软件压缩的问题,就换了一个压缩软件进行压缩,但是没有解决问题…

Java线程面试的前50个问题,面向初学者和经验丰富的程序员

您可以参加任何Java面试&#xff0c;无论是大四还是中级&#xff0c;经验或新来的人&#xff0c;一定会看到线​​程&#xff0c;并发和多线程中的几个问题。 实际上&#xff0c;这种内置的并发支持是Java编程语言的最强优势之一&#xff0c;并帮助它在企业界和程序员中同样流行…

《写给大家看的Web设计书(第3版)》即将上市

《写给大家看的设计书》姊妹篇——《写给大家看的Web设计书&#xff08;第3版&#xff09;》 即将上市。它是Robin Williams的又一本设计书。 也许大家对Robin Williams的畅销书《写给大家看的设计书》还念念不忘&#xff0c;还在回味那些简单凝练的设计经验。那好&#xff0c;…

Node_初步了解(4)小爬虫

1 var httprequire(http);2 var cheeriorequire(cheerio);3 var urlhttp://www.cnblogs.com/Lwd-linux/archive/2017/01.html;4 5 //获取6 function filterChapters(html){7 var $cheerio.load(html);8 9 var chapters$(.entrylistItem); 10 11 var courseData[];…

VUE+ElementUI 搭建后台项目(一)

前言 之前有些过移动端的项目搭建的文章&#xff0c;感觉不写个pc端管理系统老感觉少了点什么&#xff0c;最近公司项目比较多&#xff0c;恰巧要做一个申报系统的后台管理系统&#xff0c;鉴于对vue技术栈比较熟悉&#xff0c;所以考虑还是使用vue技术栈来做&#xff1b;看过一…

ES6_入门(3)_顶层对象属性

1 //顶层对象属性&#xff1a;在ES5中&#xff0c;顶层对象的属性与全局变量是等价的.以下代码中&#xff0c;为顶层对象的属性赋值与全局变量的赋值&#xff0c;是同一件事。2 window.a10;3 console.log(window.a);//104 a40;5 console.log(w…

用 .NET 3.5 创建 ToJSON() 扩展方法

今年早些时候&#xff0c;我通过blog介绍了 C# 和 VB 语言的一项新的扩充特性"扩展方法"。 扩展方法让开发者可以向已有的 CLR 类型的公共契约中添加新的方法&#xff0c;而不需要子类化或重新编译原有的类型。通过这种做法&#xff0c;可以使很多有用的应用场景成为…

Java中File的getPath(),getCanonicalPath()和getAbsolutePath()之间的区别

File API在Java中非常重要&#xff0c;因为它使文件系统可以访问Java程序。 尽管Java的文件API丰富&#xff0c;但是使用它们时仍需要了解许多细节。 关于文件路径的常见查询程序员之一是getPath() &#xff0c; getCanonicalPath()和getAbsolutePath()方法之间的区别&#xff…

Docker容器CPU、memory资源限制

背景 在使用 docker 运行容器时&#xff0c;默认的情况下&#xff0c;docker没有对容器进行硬件资源的限制&#xff0c;当一台主机上运行几百个容器&#xff0c;这些容器虽然互相隔离&#xff0c;但是底层却使用着相同的 CPU、内存和磁盘资源。如果不对容器使用的资源进行限制&…

JS_理解函数参数按值传递

本文是我基于红宝书《Javascript高级程序设计》中的第四章&#xff0c;4.1.3传递参数小节P70&#xff0c;进一步理解javaSript中函数的参数&#xff0c;当传递的参数是对象时的传递方式。 &#xff08;结合资料的个人理解&#xff0c;有不正确的地方&#xff0c;希望大家指出&…

FastReport.Net 使用字符串

OutlineExpression &#xff1a;Month([tb_trainlog.tb_trainlog_time])&"月"转载于:https://www.cnblogs.com/yzy666/archive/2010/05/11/1732678.html

检查Red Hat JBoss BRMS部署架构的规则和事件(第一部分)

&#xff08;文章来宾与北美红帽公司高级中间件顾问约翰赫洛克 &#xff08; John Hurlocker&#xff09;合着&#xff09; 在本周的技巧中&#xff0c;我们将放慢速度&#xff0c;并仔细研究可能的Red Hat JBoss BRMS部署体系结构。 当我们谈论部署架构时&#xff0c;我们指…

CSS_选择符

2016-10-28 《CSS入门经典》第五章 以下提示注意事项&#xff1a; 1.如何选择使用id选择符还是class选择符&#xff1a;当确信id选择符在页面的唯一性时&#xff0c;就可以使用id选择符。 2.通用选择符在所有元素上设置样式&#xff0c;并不是只设置继承的默认值。 eg&…

TFS2010配置SQLServer2008R2 tf255049错误

TFS2010配置SQLServer2008R2时&#xff0c;配置数据库时提示 tf255049错误。转载于:https://www.cnblogs.com/ShuaiHo/archive/2010/05/12/1733731.html

位运算笔记2.0

声明&#xff1a; 本文为转载文章 转载于:https://www.cnblogs.com/ShineEternal/p/10853132.html

教程–带有Jersey和Spring的Java REST API设计和实现

想要在Java中使用REST&#xff1f; 然后您来对地方了&#xff0c;因为在博客文章中&#xff0c;我将向您介绍如何“美丽”地设计REST API&#xff0c;以及如何使用Jersey框架在Java中实现它。 在本教程中开发的RESTful API将为存储在MySql数据库中的播客资源演示完整的Create&a…

Vue 封装的组件生命周期钩子

export default {// ...// 在组件初始化时调用&#xff0c;可以简单理解为页面加载时created () {// 存在 localStorage 的缓存内容 if (localStorage.data) { this.myData JSON.parse(localStorage.data) } else { // 页面无缓存内容时&#xff0c;初始化数据并写入缓存 this…

使用Spring-Cloud将Spring Boot应用程序部署到Cloud Foundry

我有一个基于Spring Boot的小型应用程序 &#xff0c;该应用程序使用Postgres数据库作为数据存储。 我想记录将示例应用程序部署到Cloud Foundry的步骤 。 Spring Boot参考指南中描述了一些步骤 &#xff0c;但是这些指南并未充分说明如何与基于云的环境中提供的数据存储集成。…

前台js获取guid --getGuid

/** *获取id */function getGuid(){ var len32; //32长度 var radix16; //16进制 var chars0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ.split(); var uuid[],i; radixradix || chars.length; if(len){ for(i0;i<len;i){ uuid[i]cha…