`

Tab页CSS样式

    博客分类:
  • CSS
阅读更多

 

.QuestionHeader {
	height:34px;
	border-bottom:1px solid #666;
	margin:0 0 15px 0;
}
.QuestionHeader #portrait {float:left;width:35px;}
.QuestionHeader #portrait img {width:24px;height:24px;}
.QuestionHeader #switcher {
	float:left;
	margin:5px 0 0 2px;
}
.QuestionHeader #switcher h1 {font-size:12pt;float:left;color:#666;}
.QuestionHeader #switcher h1 a {text-decoration:none;}
.QuestionHeader #switcher h1 em {font-style:normal;color:#40AA53;}

.QuestionHeader #opts {float:left;margin:10px 0 0 20px;color:#999;}
.QuestionHeader #opts #LinkFollow .FancyButton {display:inline;background:none;letter-spacing:0px;text-decoration:underline;}

.QuestionHeader #tabs {
	float:right; 
	text-align:right; 
	font-weight:bold;
	font-size:12pt;
}
.QuestionHeader #tabs a {
    background: inherit;
    border: 1px solid #f9f9f9;
    color: #777;
    display: block;
    float: left;
    font-size: 90%;
    height: 24px;
    line-height: 22px;
    margin: 8px 8px 0 0;
    padding: 0 6px;
    text-decoration: none;
	letter-spacing: 2px;
}
.QuestionHeader #tabs a:hover {color:#000;}
.QuestionHeader #tabs a.current {
    background: #f9f9f9;
    border: 1px solid #777;
    border-bottom-color: #f9f9f9;
    color: black;
    height: 30px;
    line-height: 28px;
    margin-top: 3px;
    padding: 0px 10px;
}
.QuestionHeader #tabs a.hot {color:#A00;}
.QuestionHeader #tabs a.hot:hover {color:#F00;}
  • 大小: 1.3 KB
分享到:
评论

相关推荐

    table与tab页css样式与demo.zip

    本压缩包“table与tab页css样式与demo.zip”提供了两种不同的CSS样式,旨在使原生HTML的table和tab页看起来更加美观。下面我们将详细探讨这些知识点。 首先,关于HTML表格(table): 1. 结构:HTML表格由`<table>...

    CSS样式漂亮Tab页

    "CSS样式漂亮Tab页"指的是利用CSS来创建美观且功能完善的Tab切换效果。Tab页是一种常见的用户界面元素,它允许用户在多个相关但独立的内容面板之间进行切换,而无需加载新的页面。 首先,我们需要理解CSS的基本概念...

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

    本资源包提供了多款精美的Tab页签样式,旨在提升用户体验,让网页布局更加清晰、美观。 1. Tab页签的基本结构: Tab页签通常由一组标签和对应的面板组成。标签位于顶部,表示每个面板的主题,用户点击标签时,相应...

    div+css tab样式

    2. 设置CSS样式: ```css .tab-btn:not(.active) { display: none; } .tab-content:not(.active) { display: none; } .tab-btn.active { /* 添加激活状态的样式 */ } .tab-content.active { /* 显示激活...

    CSS3实现的Tab多页签代码

    本篇文章将详细探讨如何使用CSS3来创建具有优秀视觉效果和交互体验的Tab多页签代码。 首先,我们需要理解Tab页签的基本结构。一个典型的Tab页签布局包括两部分:一是显示标签的容器,二是与每个标签对应的内容区域...

    CSS制作Tab菜单样式

    上述CSS样式将使Tab按钮呈水平排列,具有边框和默认选中的样式。点击Tab按钮后,对应的`.tab-content`元素会显示,其余的则隐藏。 为了实现Tab的交互效果,我们可以使用JavaScript(如jQuery)来处理点击事件。以下...

    js_CSS样式tab菜单导航样式

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

    纯css半圆角tab标签切换代码

    通过这个项目,开发者不仅可以学习到如何用纯CSS实现Tab标签切换,还能深入了解CSS的布局、样式控制、动态效果以及响应式设计等多个方面。这对于提升网页设计和开发技能,尤其是对于初学者来说,是非常宝贵的学习...

    13个css tab选项卡

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

    jsp页面中插入css样式的三种方法总结.docx

    4. 纯CSS+JS写的一个简洁的tab标签页带样式 5. JavaScript转变HTML元素的样式转变 6. CSS及元素属性JavaScript修改CSS样式style 7. 动态转变元素样式JS掌握CSS样式的方法 8. 原生JavaScript实现读写CSS样式的方法...

    JavaScript和css实现tab样式

    在Tab样式中,CSS主要用于设定各个选项卡的基础样式,如背景色、边框、文字对齐方式等,以及激活状态下的特殊样式,比如高亮或者下划线。以下是一个简单的CSS示例: ```css .tabs { display: flex; /* 使用Flexbox...

    CSS 实现的tab样式

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

    各种web的tab样式大全

    总结,"各种web的tab样式大全"这个资源包含了一系列的Tab设计示例,无论是初学者还是经验丰富的开发者,都可以从中汲取灵感,根据项目的具体需求选择合适的Tab样式,并利用HTML、CSS、JavaScript等技术实现。...

    使用HTML+CSS编写一个灵活的Tab页

    以下是一些基本的CSS样式: ```css .tabs-container { display: flex; flex-wrap: wrap; } .tabs { display: flex; list-style-type: none; padding: 0; margin: 0; } .tabs li { margin-right: 10px; } ...

    用CSS写的Tab滑动轮

    1. **CSS**:正如前面提到的,CSS在这里用于实现Tab的样式和动态效果,比如Tab的选中状态、滑动动画等。 2. **JS**:JavaScript,通常与CSS结合使用,用于处理用户交互,如点击事件,以及控制内容的显示和隐藏,实现...

    纯CSS3垂直Tab菜单 Tab样式可自定义

    Tab菜单在网页上使用起来非常方便,也比较节省空间,所以很多门户网站很喜欢用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单,它是用纯CSS3实现的,加载...另外,Tab菜单的样式你可以使用CSS重新定义,扩展很方便。

    纯css3经典tab选项卡动画特效

    10. 组合使用HTML结构和CSS3:创建Tab选项卡时,HTML结构通常是使用`<ul>`、`<li>`、`<a>`等标签来构建选项卡导航,而CSS3用于添加样式和动画效果,两者结合可以实现富有视觉吸引力的选项卡效果。 综上所述,纯CSS3...

    带轮换样式的Tab页签导航

    2. CSS 样式:使用CSS来定义Tab页签的外观,包括字体、颜色、边框、背景等。同时,对于轮换效果,可能需要使用CSS3的`transition`和`animation`属性来实现平滑的切换动画。 3. JavaScript 或 jQuery:为了实现自动...

    jQuery和CSS3响应式TAB选项卡样式幻灯片特效

    4. `css`目录:存放所有CSS样式文件,其中可能有一个名为`style.css`的文件,包含了响应式布局和动画效果的样式规则。 5. `related`目录:可能包含与项目相关的其他资源或链接。 6. `img`目录:存储了幻灯片中的图像...

    纯CSS写的TAB切换

    **CSS样式** 1. **隐藏默认内容**: 使用`display: none;`可以将所有初始内容区域隐藏,只显示第一个内容区域: ```css .tab-content { display: none; } .tab-content:first-child { display: block; } ...

Global site tag (gtag.js) - Google Analytics