侧边选项卡

最新推荐文章于 2023-10-18 15:28:16 发布
最新推荐文章于 2023-10-18 15:28:16 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangrui201107/article/details/8240860
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile=" http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<style>
dl {
 position:absolute;
 width:270px;
 height:170px;
 border:10px solid #eee;
 }
dd {
 margin:0;
 width:270px;
 height:170px;
 overflow:hidden;
 }
dt {
 position:absolute;
 right:1px;
 }
ul {
 margin:0;
 padding:0;
 width:260px;
 height:170px;
 list-style:none;
 background:url(" http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif") no-repeat 75% 20px;
 border:1px solid #ccc
 }
#b {
 background-position:75% center
 }
#c {
 background-position:75% 86%
 }
li {
 width:255px;
 height:27px;
 font:12px/27px "宋体",sans-serif;
 white-space:nowrap;
 overflow:hidden;
 }
dt a {
 display:block;
 margin:1px;
 width:70px;
 height:56px;
 text-align:center;
 font:700 12px/55px "宋体",sans-serif;
 color:#fff;
 text-decoration:none;
 background:#666;
 }
dt a:hover {
 background:orange
 }
</style>
<head/>
<body>
<dl>
<dt><a href="#a" title="">一个好孩子</a><a href="#b" title="">科比入党了</a><a href="#c" title="">失忆的猪猪</a></dt>
<dd>
<ul id="a">
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
 <li>·<a href="" title="">国际新闻国际新闻国际新闻</a></li>
</ul>
<ul id="b">
 <li><marquee behavior="alternate">·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></marquee></li>
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
 <li>·<a href="" title="">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>
<ul id="c">
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
 <li>·<a href="" title="">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>
</body>
</html>
始是逍遥人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML实现Tab选项卡（自动+手动）
03-06
基本样式可能包括选项卡的背景色、边框、字体等，以及隐藏非当前选中面板的内容。例如： ```css .tabs-container { display: flex; } .tabs { display: flex; list-style-type: none; margin: 0; padding: 0; ...
html左侧选项卡的代码,HTML侧边栏Tab选项卡
weixin_39922769的博客
05-30 2109
HTML CSS Jq实现的简单侧边栏选项卡，实现非常简单，你也可以轻松的在现有的基础上扩充。先看下效果图，再献上代码。HTML代码选项卡1选项卡2选项卡3选项卡4选项卡5我是Tab选项卡1的内容使用简单，引入css和Jq代码即可我是Tab选项卡2的内容我是Tab选项卡3的内容我是Tab选项卡4的内容我是Tab选项卡5的内容CSS代码#TabMain{width:800px;height:5...
HTML侧边栏菜单
weixin_44589374的博客
03-04 1万+
HTML侧边栏菜单 用div做一个侧边菜单栏样式，没有导航功能，还没学会，大家不要介意。 HTML： <div class="sidebar"> <div class="tab" id="cate0"><i class="reorder"></i> 全部教程</div> <div class="design" id=...
html5选项卡左侧,侧滑导航（div模式左滑菜单）主体菜单放入选项卡（左侧选项卡-div模式）选项卡无法区域滚动...
weixin_36345268的博客
05-31 492
Hello MUI.mui-row.mui-fullscreen>[class*="mui-col-"] {height: 100%;}.mui-col-xs-3,.mui-control-content {overflow-y: auto;height: 100%;}.mui-segmented-control .mui-control-item {line-height: 50px;wi...
二维码名片页面的样式设计
m0_59742894的博客
12-17 759
对右侧编辑器中的Begin - End区域的文字内容补充样式规则，以实现下面的页面效果。 具体要求 1.使用群组选择器，对<body>、<dl>、<dt>、<dd>标签中的内容进行样式设置。将外边距和内边距值设置为0，并将边框线宽设置为0 2.对<dl>标签进行样式设置： （1）内容区宽度设置为170px，高度设置为270px (2)内边距设置为10px,外边距设置为10px (3)边框线宽设置为10px，线样式设置为单实线，边框线颜色设
html 左侧选项卡tab,js实现左侧网页tab滑动门效果代码
weixin_32223625的博客
05-31 675
本文实例讲述了js实现左侧网页tab滑动门效果代码。分享给大家供大家参考。具体如下：这是一款开口靠左的网页滑动门，网页滑动门,TAB滑动门,竖排滑动门菜单,竖排TAB选项卡，兼容IE6/IE7/FF/opera浏览器。其实竖排和横排的代码基本一样，只不过稍加修改就可以了。只要学会了一种滑动门，就能举一返三了。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3...
安卓FragmentTab选项卡相关-基于Fragment实现Tab的切换滑出侧边栏.zip
07-29
在这个“安卓FragmentTab选项卡相关-基于Fragment实现Tab的切换滑出侧边栏.zip”压缩包中，我们很可能会找到一个实现类似Google Play商店或许多其他应用中的顶部选项卡和侧滑菜单效果的示例项目。 首先，让我们深入...
jQuery右侧选项卡切换特效代码
03-20
jQuery右侧选项卡切换特效是一种常见的网页交互设计，它能够提升用户体验，使用户更容易导航和浏览网站内容。在这款特效中，选项卡位于页面的右侧，以垂直的方式排列，用户可以通过点击不同的标签来切换显示的内容...
jQuery左侧选项卡菜单点击切换代码.zip
07-11
在页面布局中，通常会有一个包含多个链接的侧边栏（选项卡），以及一个用于显示内容的区域。HTML代码可能如下所示： ```html <li><a href="#content1">选项卡1</a></li> <li><a href="#content2">选项卡2</a>...
Android编程实现自定义Tab选项卡功能示例
08-31
在Android开发中，自定义Tab选项卡是一种常见的用户界面设计，用于展示多个并行的视图或功能。本文将深入探讨如何在Android编程中实现自定义Tab选项卡，并通过一个完整的实例来阐述其核心概念和操作技巧。 首先，...
侧边栏tab(css版本+js版本)
10-08
纯CSS的竖直的滑动门（IE6请无视）。 js实现的竖直的滑动门（4种效果）。
JS实现侧边选项卡功能
程序员小陈的博客
07-17 1053
**一、简述：**通过JS实现简单的选项卡功能，本示例是左右布局，要实现上下布局只需更改样式即可。 **二、功能介绍：**页面初始第一个选项——此示例为“第一天”为选中状态，对应右侧的内容——“学习HTML基础”，当鼠标点击第二个选项——此处为“第二天”，右侧出现对应内容——“学习CSS基础”……以此类推，实现点击左侧选项右侧出现相应内容。 ** 功能实现图 ** （后边依次类推） 页面内容编写——HTML <!DOCTYPE html> <html> <head&gt
PySide2如何做到侧边栏选项卡
小白tree的博客
06-09 2769
一、在PySide2中先新建Main Window窗口 添加一个ListView和一个StackedWidget，位置大小调整好。 当前选中的就是StackedWidget控件，右上方的左右小箭头用于切换Stack。（先别按！） 二、在当前Stack添加一个TabWidget 三、点击右上方的箭头，发现切换了一个Stack后，是没有TabWidget控件的 所以需要在当前Stack添加一次TabWidget 四、在两个Stack都添加了TabWidget后，对象查看器的结构如下 五、为了方便区分，我
WPF实现选项卡效果（1）——使用AvalonDock
热门推荐
诗人江湖老的专栏
05-25 3万+
简介　　公司最近一个项目，软件采用WPF开发，需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果。搜寻诸多资料后，发现很多同仁推荐AvalonDock这款开源控件。在其官方地址下载源码和Demo后，对其进行了初步的研究，初步实现了预期效果。 　　完整系列 　　● 第一部分 　　● 第二部分 　　● 第三部分 　　在Git中下载工程源码AvalonDocking的结构树　　在下载的Dem
WPF 控件库——可拖动选项卡的TabControl
weixin_30635053的博客
09-11 572
WPF 控件库系列博文地址： WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的ScrollViewer WPF 控件库——可拖动选项卡的TabControl 一、先看看效果 二、原理 1、选项卡大小和位置 　　这次给大家介绍的控件是比较常用的Tab...
wpf TabControl 选项卡设置间隔
最新发布
weixin_44333942的博客
10-18 376
样式实现TabControl选项卡之间设置间隔距离
WPF实现选项卡效果（2）——动态添加AvalonDock选项卡
诗人江湖老的专栏
05-25 2万+
简介　　在前面一篇文章里面，我们使用AvalonDock实现了类似于VS的选项卡（或者浏览器的选项卡）效果。但是我们是通过xaml代码实现。 　　现在我们尝试通过C#代码实现选项卡的动态添加。修改Xaml代码　　在前面一篇文章的Xaml代码里面，添加如下代码：　　 <Grid.RowDefinitions> <RowDefinition Height="25"></RowD
C# WPF 左侧菜单右侧内容布局效果实现
weixin_34290000的博客
11-07 7633
原文:C# WPF 左侧菜单右侧内容布局效果实现我们要做的效果是这样的，左侧是可折叠的菜单栏，右侧是内容区域，点击左侧的菜单项右侧内容区域则相应地切换。 wpf实现的话，我的办法是用一个tabcontrol，修改tabcontrol的样式模板，首先将控件的TabStripPlacement设置为left使tabcontrol的item header部分靠左内容靠右，然后用一个Expander将T...
C# WPF抽屉式侧边栏导航栏 炫酷漂亮效果 MD主题重绘原生控件的美观效果 提供源码Demo下载
liyu3519的博客
06-09 6516
C# WPF抽屉式侧边栏导航栏 炫酷漂亮效果 MD主题重绘原生控件的美观效果 提供源码Demo下载
bootstrap侧边选项卡
08-18
Bootstrap提供了一种实现侧边选项卡的方法，可以在左侧或右侧显示竖直的选项卡。您可以使用Bootstrap的CSS类和组件来实现这个效果。通过添加适当的类和结构，您可以创建一个侧边选项卡布局。 要实现左侧或右侧的竖直选项卡，您可以使用Bootstrap的Tabs组件，并添加适当的CSS类。您可以使用"flex-column"类将选项卡设置为竖直排列，并使用"nav"类将选项卡标记为导航。 下面是一个示例代码，演示如何使用Bootstrap实现侧边选项卡布局： ```html <div class="container"> <div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical"> <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a> <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a> <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <h4>Home tab content</h4> <p>This is the content of the home tab.</p> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <h4>Profile tab content</h4> <p>This is the content of the profile tab.</p> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <h4>Messages tab content</h4> <p>This is the content of the messages tab.</p> </div> </div> </div> </div> </div> ``` 在这个示例中，我们使用了"flex-column"类将选项卡设置为竖直排列。每个选项卡都包含一个链接元素，使用"data-bs-toggle"和"href"属性来切换选项卡内容。选项卡内容是用"tab-content"类包裹的，并使用相应的ID和角色来关联选项卡和内容。 希望这个示例对您有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [BootStrap实现左侧或右侧竖式tab选项卡](https://blog.csdn.net/w1366352655/article/details/86156263)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Bootstrap5 组件](https://blog.csdn.net/qq_44174346/article/details/126056554)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值