`
zuroc
  • 浏览: 1307348 次
  • 性别: Icon_minigender_1
  • 来自: 江苏
社区版块
存档分类
最新评论

顺手写的一个tab样式

体育活动XHTMLHTML 
阅读更多


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.tab {border-left:#E4E4E4 1px solid;}
.tab a{text-decoration:none;border-top:1px #E4E4E4 solid;border-right:1px #E4E4E4 solid;
border-bottom:1px solid #E4E4E4;
background:#F6F5EE;
padding:5px;
color:#369;
float:left;}
.tab .on{border-bottom:1px solid #fff;background:#fff;color:#666}
.tabspace{border-bottom:1px solid #E4E4E4;padding-top:11px;*padding-top:10px}
.tabbody{border:#E4E4E4 1px solid;border-top:0;padding:5px;padding-top:1px;}
</style>
</head>
<body>
<div style="width:300px;margin:auto">

    <div class="tab">
        <a>体育</a>
        <a class="on">体育</a>
        <a>体育</a>
        <div class="tabspace">&nbsp;</div>
    </div>
    <div class="tabbody">
        <div>
            <p>北师北邮小西天玉桃园集体活动</p>
            <p>2月25日 周三 - 3月24日 周二</p>
        </div>
    </div>

</div>

</body>
</html>
分享到：
| 今天才发现python的sort有个key参数,我好 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    各种web的tab样式大全

    Tab组件通常由一个标题栏和对应的内容区域组成，标题栏中的每个按钮代表一个独立的选项卡，点击后会显示相应的内容。这种设计模式在网页布局中广泛使用，如导航菜单、设置面板等，可以有效地节省空间并提高用户体验...

    div+css tab样式

    在网页设计领域，`div+css`是一种常见的布局方式，用于构建复杂的网页结构。...`Tab`样式则是利用这些工具创造互动式用户体验的一个例子。理解并掌握这两者，能帮助开发者构建更加高效、美观且易用的网页。

    菜单tab样式经典集合10.3.24

    开发网站必备菜单tab样式集合，里面集合了很多东西包括菜单 tab 选项卡 banner css js各种样式具体如：35个菜单样式、19个CSS菜单、鼠标放大镜查看图片效果、css_tab_ul菜单安装程序、让你震撼的图片展示javascript...

    纯CSS写的TAB切换

    通常，一个TAB切换系统包括两部分：可见的TAB按钮和对应的隐藏内容区域。当用户点击一个TAB按钮时，对应的内容区域应该显示，其他内容区域则应隐藏。在CSS中，我们主要依赖于伪类选择器（如`:hover`, `:focus`, `:...

    JavaScript和css实现tab样式

    本篇文章将详细探讨如何利用这两种技术来创建一个功能完备的Tab样式。 首先，我们需要理解CSS（层叠样式表）的作用。CSS是用于控制网页样式的语言，它可以定义颜色、字体、布局等视觉属性。在Tab样式中，CSS主要...

    CSS制作Tab菜单样式

    一个典型的Tab菜单由两部分组成：Tab按钮（通常是静态文本或图标）和对应的显示区域。用户点击Tab按钮时，相应的显示区域会被激活，其他区域则隐藏。CSS在这里的作用是为Tab按钮添加样式，以及控制各个显示区域的...

    13个css tab选项卡

    1. **基础Tab样式** 创建基础的Tab选项卡，我们需要HTML结构和CSS样式。HTML通常包含一个容器元素和一系列的标签页与内容区域。每个标签页和对应的内容都应有唯一的ID，以便于CSS选择器进行关联。 2. **纯CSS实现*...

    CSS 实现的tab样式

    很好的tab样式，通过a标签来画线实现tab效果

    用CSS写的Tab滑动轮

    标题中的“用CSS写的Tab滑动轮”是指在网页设计中使用CSS来实现一种交互式的Tab切换效果。...4. **div**：在HTML中，`&lt;div&gt;`元素是一个通用容器，常用于布局和组合其他元素，这里的Tab面板和每个Tab对应的内

    js_CSS样式tab菜单导航样式

    对于Tab菜单，我们通常会创建一个包含多个类的CSS样式规则，比如`.tabs`（容器），`.tab-links`（链接组），`.tab-content`（内容区），以及`.active`（激活状态）等。例如： ```css .tabs { display: flex; } ....

    把一个tab控件加入到一个form或对话框中.rar_Tabú_tab控件

    在本文中，我们将深入探讨如何将一个Tab控件添加到一个Form或对话框中，以及与之相关的编程知识。 首先，我们要知道Tab控件在Windows Forms（WinForms）和Windows Presentation Foundation（WPF）等开发环境中是...

    对话框上的TAB标签的使用，给每个TAB页装上一个对话框

    标题“对话框上的TAB标签的使用，给每个TAB页装上一个对话框”表明我们将讨论如何在对话框中添加和管理多个TAB页，每个页就像一个独立的小对话框，展示不同的内容或功能。实现这一功能通常涉及到以下几个关键技术点...

    多款精美的tab页签样式任你挑选

    在网页设计中，Tab页签是一种常见的用户界面元素，它能有效地组织和展示大量信息，让用户在多个相关但独立的内容区域之间轻松切换。本资源包提供了多款精美的Tab页签样式，旨在提升用户体验，让网页布局更加清晰、...

    一个漂亮的Tab效果

    Tab样式通常包括一组可切换的面板，每个面板代表一个独立的内容区域，用户可以通过点击Tab标题在这些区域之间切换。在这个案例中，我们主要关注的是利用CSS来增强视觉效果和交互体验。 首先，HTML结构是构建Tab的...

    android gallery 导航TAB样式 非常的漂亮和实用

    在`GalleryDemo`这个项目中，开发者可能创建了一个示例应用，包含了一个`Gallery`实例，展示了如何将这个漂亮和实用的导航TAB样式应用到实际的Android应用中。开发者可能会在代码中设置`OnItemSelectedListener`监听...

    CSS样式漂亮Tab页

    1. **基础布局**：Tab页的布局通常包含一个容器（如`&lt;div&gt;`），里面包含一个水平排列的无序列表（`&lt;ul&gt;`）和一系列列表项（`&lt;li&gt;`）。每个列表项内部再包裹一个链接（`&lt;a&gt;`），用于触发内容的切换。 2. **样式设计*...

    一个比较美观的圆角Tab选项卡切换效果

    一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html一个比较美观的圆角Tab选项卡切换效果.html

    React-Native 实现点击Tab标签切换Tab页面

    在React-Native开发中，创建一个用户界面时，Tab导航是一种常见的设计模式，它允许用户在不同的视图之间轻松切换。本教程将详细介绍如何使用React-Native中的TabBar组件来实现点击Tab标签切换Tab页面的功能。 首先...

    同一页面多个Tab选项卡嵌套显示实例

    1. 外部Tab：首先创建一个主要的Tab组，每个Tab对应一个主要内容区域。 2. 内部Tab：在某个Tab的内容区域内，再次使用Tab结构创建子Tab，这些子Tab只在父Tab被选中时可见。 3. 事件处理：使用JavaScript或jQuery监听...

    jQuery easyui后台管理页面tab布局样式代码

    Tab布局是jQuery EasyUI中的一个重要特性，它允许在一个页面上展示多个并行的内容区域，每个区域被一个标签页所代表，用户可以通过点击不同的标签来切换显示的内容。这种布局方式常用于后台管理系统，因为它可以有效...

Magicbox
Global site tag (gtag.js) - Google Analytics