<!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" />
<title></title>
<style type="text/css">
body,td,th {font-size: 12px;}
body {margin: 0px;margin: 0px;}
.clear{ clear:both;}
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
.test{width:100%; margin-top:50px; height:250px; border:1px solid red;}
.test ul{list-style:none; margin:0px;margin-top:4px;padding:0px; border-bottom:1px solid red; height:30px;}
.test li{float:left;width:100px;margin-left:5px;line-height:30px; border:1px solid red; border-bottom:0px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#000000;text-decoration:none;}
.test a:visited{color:#000000;text-decoration:none;}
.test a:hover{text-decoration:none;}
.onselect{font-weight:bold;background:url(images/spritebg.png) no-repeat 0px 12px;}
.noselect{font-weight:normal;background:normal}
</style>
<script>
<!--
function setTab(obj,tagName){
var list=document.getElementsByName(tagName);
for(i=0;i<list.length;i++){
list[i].className="noselect";
}
obj.className="onselect";
}
</script>
</head>
<body>
<div class="test">
<ul>
<li><a href="#" onclick="setTab(this,'tablink')" name="tablink" class="onselect">首页</a></li>
<li><a href="#" onclick="setTab(this,'tablink')" name="tablink">产品介绍</a></li>
<li><a href="#" onclick="setTab(this,'tablink')" name="tablink">服务介绍</a></li>
<li><a href="#" onclick="setTab(this,'tablink')" name="tablink">技术支持</a></li>
<li><a href="#" onclick="setTab(this,'tablink')" name="tablink">立刻购买</a></li>
<li><a href="#" onclick="setTab(this,'tablink')" name="tablink">联系我们</a></li>
</ul>
<div class="clear"></div>
<div class="clear">1121</div>
</div>
</body>
</html>
相关推荐
**DIV+CSS选项卡的核心概念** 1. **HTML `<div>`元素**: `<div>`是HTML中的一个块级元素，用于对网页内容进行分组和布局。在选项卡设计中，`<div>`通常作为容器，包裹着各个选项卡和对应的显示区域。 2. **CSS选择...
总的来说，这个jQuery+div+css选项卡列表样式提供了一种有效的方法来优化网站的用户体验，通过简洁的交互设计呈现多样的内容。它体现了前端开发中的灵活性和可复用性，是网页设计中的一个重要工具。
CSS选项卡是一种常见的网页交互设计，它允许用户在有限的空间内切换不同的内容视图。在网页设计中，CSS（层叠样式表）被用来控制页面布局和视觉样式，而选项卡则是实现这种交互的一种有效方式。本文将深入探讨CSS...
在网页设计中，"可无限扩展的CSS选项卡"是一种常见的用户界面元素，它允许将大量内容组织到多个标签页中，每个标签页都显示不同的信息。这种设计模式提高了用户体验，因为它使得用户能够轻松地浏览和切换不同部分的...
至此，一个基本的纯CSS选项卡效果已经完成。当然，还可以根据需求进一步定制，比如添加过渡动画，或者响应式布局调整。但核心思想就是使用CSS选择器来控制元素的显示与隐藏，以及利用伪类来实现交互反馈。 总结来说...
在网页设计中，CSS选项卡效果是一种常见的交互设计模式，用于组织和展示多部分内容，而只显示其中之一在用户界面的有限空间内。这种效果常见于导航菜单、设置面板或者产品介绍等场景。在这个名为“CSS选项卡效果代码...
CSS选项卡和手风琴是两种常见的交互式用户界面元素，广泛应用于网站内容展示，尤其在有限的空间内提供多级导航或隐藏/显示大量信息时。下面我们将深入探讨这两个概念以及如何使用CSS实现它们。 **CSS选项卡** 选项...
在网页设计中，CSS Tab选项卡是一种常见的交互元素，它允许用户通过点击不同的标签来查看或切换不同的内容区域。这种设计模式在很多网站上都能看到，例如设置面板、产品介绍等场景。本教程将深入探讨如何创建13种...
### 网页常用的DIV+CSS选项卡设计与实现 #### 一、概述 在前端网页开发中，选项卡（Tabs）是一种常见的交互组件，它能够有效地组织和展示多个相关但不连续的信息区块，帮助用户在不同的内容块之间进行切换。这种...
js+div+css选项卡，可运行html看效果
本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件，并且需要引入jQuery UI库以增强其表现力和可用性。 首先，我们需要在HTML中设置选项卡的基本结构。这通常包括一个包含所有选项标题的容器...
纯CSS实现的简易选项卡效果，非常实用。
本主题“CSS+div选项卡”主要关注如何利用这两者来创建功能性和美观的选项卡组件。选项卡是一种常见的网页布局模式，它允许在有限的空间内展示多个相关但独立的内容区域，通过点击不同的标签来切换显示的内容。 ...
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中，我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素，它帮助用户在有限的空间内组织和展示多个...
在选项卡切换中，CSS3可以用来定义每个选项卡的样式，以及在切换过程中实现平滑的过渡效果。 1. **HTML 结构**： 选项卡的基本HTML结构通常包含一个容器（用于放置选项卡和内容区域），一组选项卡按钮，以及多个...
本文将深入探讨“超级翻页的选项卡”这一设计，它结合了CSS（层叠样式表）和JavaScript的技术，为用户提供了一种交互性强、视觉效果出色的翻页体验。 首先，我们来理解CSS在选项卡设计中的作用。CSS是用于控制网页...