选项卡的完整代码~~还有一些自己copy

最新推荐文章于 2023-11-03 23:34:55 发布
最新推荐文章于 2023-11-03 23:34:55 发布
阅读量315 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mayjay517/article/details/78108075
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>选项卡制作</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,h3,p{margin: 0;padding: 0;}

#nav ul li p a{text-decoration: none;
 color: #928F8F;
 font-size: 14px;}
 
a:hover{text-decoration: underline;}
 
#nav{width: 220px;
background:/*#0477c0*//*rgba(0, 0, 0, 0.0980392)*/rgba(0, 0, 0, 0.0666667);
margin: 0 0 0 100px;
float: left;
/*border: 1px solid #000;*/}

.title{line-height:50px ;
color: #000000;
font-family: "微软雅黑";
background: rgba(0, 0, 0, 0.0980392) url(img/title.png) no-repeat 20px;
text-indent: 45px;}

ul{}

li{position: relative;
list-style: none;
height: 70px;
text-indent: 10px;
/*border-bottom: 1px solid #0099ff;*/
}

li:hover{background: rgb(255,255,255);}

h3{color: #000000;
line-height: 40px;
font-weight: 600;
font-size: 16px;
background: url(img/li.png) no-repeat 184px;}


#nav ul li .menu{position: absolute;
display: none;
left: 220px;
top: 0;
width: 620px;
/*border: 1px solid #000;*/
}

.left{width: 120px;
      float: left;
      }
     
      .left a{color: #000000;
      text-decoration: none;
      font-weight: 800;
      font-size: 16px;
      float: left;}
     
      /*.right_ul li .right a{text-decoration: none;
      color: #000000;
      line-height: 30px;
      font-weight: 500;
      font-size: 16px;
      }*/
      #nav  ul li .menu a{
      text-decoration: none;
      color: #716E6E;
      line-height: 30px;
      font-weight: 500;
      font-size: 16px;
      }
      #nav  ul li .menu a:hover{text-decoration: underline;}
      #nav  ul li .menu li h3 a{text-decoration: none;
      color: #000000;
      line-height: 30px;
      font-weight: 700;
      font-size: 16px;}
</style>
</head>
<body>
<div id="nav">
<div class="title">
全部课程
</div>
<ul>
<li>
<h3>职业技能</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
<div class="menu">
<ul class="">
<li>
<h3 class="left"><a href="" target="_blank">互联网产品</a></h3>
<a href="" target="_blank">产品策划</a>
<a href="" target="_blank">游戏策划</a>
<a href="" target="_blank">产品运营</a>
<a href="" target="_blank">游戏运营</a>
</li>
<li>
<h3 class="left"><a href="" target="_blank">互联网产品</a></h3>
<a href="" target="_blank">产品策划</a>
<a href="" target="_blank">游戏策划</a>
<a href="" target="_blank">产品运营</a>
<a href="" target="_blank">游戏运营</a>
</li>
<li>
<h3 class="left"><a href="" target="_blank">互联网产品</a></h3>
<a href="" target="_blank">产品策划</a>
<a href="" target="_blank">游戏策划</a>
<a href="" target="_blank">产品运营</a>
<a href="" target="_blank">游戏运营</a>
</li>
<li>
<h3 class="left"><a href="" target="_blank">互联网产品</a></h3>
<a href="" target="_blank">产品策划</a>
<a href="" target="_blank">游戏策划</a>
<a href="" target="_blank">产品运营</a>
<a href="" target="_blank">游戏运营</a>
</li>
</ul>
</div>
</li>
<li>
<h3>IT培训</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>语言学习</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>中小学/大学</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>兴趣爱好</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>亲子课堂</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
<li>
<h3>职业技能</h3>
<p>
<a href="" target="_blank">职场技能</a>
<a href="" target="_blank">SNS营销</a>
<a href="" target="_blank">公务员</a>
</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#nav ul li").hover(function(){
$(this).find(".menu").show();
},function(){
$(this).find(".menu").hide();
});
</script>
</html>
MayJay517
关注
下载URL包含Signature和OSSAccessKeyId的实战代码
herosunly的博客
10-15 8万+
 今天给大家带来的文章是：下载URL包含Signature和OSSAccessKeyId的实战代码，希望对同学们有所帮助。 文章目录 1. 前言 2. 解决方案 2.1 操作步骤 2.2 实战代码
选项卡代码
06-07
选项卡代码
选项卡的制作代码
weixin_30399155的博客
01-22 91
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> </head> <style> /*复位*/ *{pad...
简单易用的选项卡代码
qq_35935086的博客
08-22 573
html> html> head lang="en"> meta charset="UTF-8"> title>title> style> #btn1,#btn2,#btn3{ width: 160px; height: 40px; border: none; b
复制选项卡「Copy Tabs」-crx插件
03-15
在经过特别热烈的浏览会话后，保存大量选项卡有时会很麻烦。 在浏览器和文本字段之间来回复制和粘贴。 现在，您可以将Web URL和网页标题复制为当前窗口中每个突出显示的选项卡的单个格式链接。 在chrome中，您可以...
copy-as-html:括号扩展，用于将代码复制到剪贴板，并突出显示全彩色语法
05-26
选择“文件”>“扩展管理器”，然后选择“可用”选项卡 搜索此扩展名 单击安装！ 执照 MIT许可-有关详细信息，请参见main.js 兼容性 托架Sprint 15或更高版本（或Adobe Edge Code Preview 2或更高版本）。
vue 选项卡【利用按钮操作】
weixin_45044349的博客
06-01 474
在vue3中 element-plus有着自己的选项卡，之前也有案例，但是UI设计并不一致
LayUI的基本使用 - Tab选项卡切换显示对应数据
weixin_42525096的博客
09-18 8208
要求：实现tab选项卡改变的同时展示数据也跟着改变 实现条件： 1、 选项卡 【官网 – 文档/示例 – 页面元素 – 选项卡】 2、数据表格 【官网 – 文档/示例 – 内置模块 – 数据表格】 3、分页 【官网 – 文档/示例 – 内置模块 – 分页】 具体实现过程： 1、 先找选项卡、使用默认的tab、然后查看代码、复制对应的代码。 2、 然后改成自己想要显示效果、如下： 3、...
html选项卡源码
04-05
完美简单的选项卡源码
一组简洁选项卡代码 选项卡
04-17
一组简洁选项卡代码 选项卡 JS 选项卡
滑动门菜单
weixin_33868027的博客
12-21 114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <me...
JS代码实现选项卡功能
米兰小铁匠的博客
02-11 872
在平时的网页开发中会遇到很多选项卡功能的情况，下面通过一个简单的例子说明选项卡如何实现 首先，选项卡基本的样式会有可以点击的选项按钮，以及按钮对应的显示内容。这是一个基本的选项卡应该具备的两大部分。所以我在结构的布局上选用： 1、一个大DIV中套有三个button，三个小div。 2、内部样式中将三个小div全部display none。三个button的北京颜色全部设置成一个灰色（举例子） 3、...
选项卡教程（源代码）
weixin_30888707的博客
08-24 364
做网页无论实现的功能大或者小，都要先思考和分析一下思路，然后接着动手实现。 下面我来讲讲实现选项卡的思路，学会了就可以用到很多网页里哦~~~ 一、HTML页面布局: 1、选项卡一般选用无序列表：ul..li。 2、选项卡的内容用div，这样在写css样式和js的时候可以很方便的把一块内容作为一个容器去控制。 二、CSS样式制作: 1、选项卡的样式设置。 2、选项卡标题样式的设置。 ...
选项卡js代码段
web_q的博客
06-05 780
js示例代码$(function () { var oFocus = $('#focus'), oRight = oFocus.find('.right'), oLeft = oFocus.find('.left'), aRLi = oRight.find('li'), ...
选项卡代码 php,css中选项卡实现的代码
weixin_35641153的博客
03-11 193
这篇文章给大家介绍的文章内容是关于css中选项卡实现的代码，有很好的参考价值，希望可以帮助到有需要的朋友。#title {height: 30px;width: 400px;}#title li {float: left;list-style-type: none;height: 30px;width: 132px;line-height: 30px;text-align: center;marg...
javascript代码实现选项卡(附完整源码)
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 180
javascript代码实现选项卡(附完整源码)
js选项卡代码详解
kakashs
12-28 771
** js选项卡 ** &amp;lt;body&amp;gt; &amp;lt;input type=&quot;button&quot; name=&quot;&quot; id=&quot;btn1&quot; value=&quot;选项一&quot; style=&quot;background-color: yellow;&quot;/&amp;gt; &amp;lt
QT实现拖拽TabWidget选项卡形成单独的窗口选项卡里面含多个控件，双击标题栏可还原多个控件回选项卡的功能
03-20
以下是示例代码： ```cpp void MyTabWidget::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_dragStartPosition = event->pos(); } } void MyTabWidget::mouseMoveEvent...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值