CSS选项卡(精品)

最新推荐文章于 2024-07-10 23:34:24 发布
最新推荐文章于 2024-07-10 23:34:24 发布
阅读量437 收藏
点赞数
分类专栏： CSS Study 文章标签： css url class div xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beichen_/article/details/3975286
版权

 

 <!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=gb2312" />
 <title>无标题文档</title>
 <style type="text/css">
 <!--
 * {
  margin: 0; padding:0
 }
 body {
  margin-top: 10px;
  margin-right: auto;
  margin-bottom: 10px;
  margin-left: auto;
  text-align: center;
  height: auto;
  width: auto;
  background-color: #666666;
  font-size: 12px;
  color: #000000;
 }
 #container {
  text-align: left;
  width: 760px;
  height: 400px;
  background-color: #FFFFFF;
  padding: 20px;
 }
 #container #title {
  height: 28px;
 }
 #container #title li {
  float: left;
  list-style-type: none;
  height: 28px;
  line-height: 28px;
  text-align: center;
  margin-right: 1px;
 }
 #container #title ul {
  background-color: #FFFFFF;
  height: 28px;
 }
 #container #title a {
  text-decoration: none;
  color: #000000;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -29px;
 }
 #container #title a span{
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -29px;
  padding: 0 15px 0 15px;
 }
 #container #title #tag1 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
 }
 #container #title #tag1 a:hover span{
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
  padding: 0 15px 0 15px;
 }
 #container #title #tag2 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
 }
 #container #title #tag2 a:hover span{
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
  padding: 0 15px 0 15px;
 }
 #container #title #tag3 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
 }
 #container #title #tag3 a:hover span{
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
  padding: 0 15px 0 15px;
 }
 #container #title #tag4 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
 }
 #container #title #tag4 a:hover span{
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
  padding: 0 15px 0 15px;
 }
 #container #title #tag5 a:hover {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
 }
 #container #title #tag5 a:hover span{
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
  padding: 0 15px 0 15px;
 }
 #container #title .selectli1 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -87px;
 }
 #container #title a .selectspan1 {
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -87px;
  padding: 0 15px 0 15px;
 }
 #container #title .selectli2 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left 0px;
 }
 #container #title a .selectspan2 {
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right 0px;
  padding: 0 15px 0 15px;
 }
 #container #title .selectli3 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -58px;
 }
 #container #title a .selectspan3 {
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -58px;
  padding: 0 15px 0 15px;
 }
 #container #title .selectli4 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -145px;
 }
 #container #title a .selectspan4 {
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -145px;
  padding: 0 15px 0 15px;
 }
 #container #title .selectli5 {
  text-decoration: none;
  color: #ffffff;
  display: block;
  width: auto;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif) no-repeat left -174px;
 }
 #container #title a .selectspan5 {
  display: block;
  background: url(http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif) no-repeat right -174px;
  padding: 0 15px 0 15px;
 }
 #container #content ul {margin: 10px;}
 #container #content li {margin: 5px; }
 #container #content li img {margin: 5px;display:block;}
 #container #content {
  height: 300px;
  padding: 10px;
 }
 .content1 {
  border-top-width: 3px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #3A81C8;
  border-right-color: #3A81C8;
  border-bottom-color: #3A81C8;
  border-left-color: #3A81C8;
  background-color: #DFEBF7;
 }
 .content2 {
  border-top-width: 3px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #ff950b;
  border-right-color: #ff950b;
  border-bottom-color: #ff950b;
  border-left-color: #ff950b;
  background-color: #FFECD2;
 }
 .content3 {
  height: 300px;
  padding: 10px;
  border-top-width: 3px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #FE74B8;
  border-right-color: #FE74B8;
  border-bottom-color: #FE74B8;
  border-left-color: #FE74B8;
  background-color: #FFECF5;
 }
 .content4 {
  height: 300px;
  padding: 10px;
  border-top-width: 3px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #00988B;
  border-right-color: #00988B;
  border-bottom-color: #00988B;
  border-left-color: #00988B;
  background-color: #E8FFFD;
 }
 .content5 {
  height: 300px;
  padding: 10px;
  border-top-width: 3px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #A8BC1F;
  border-right-color: #A8BC1F;
  border-bottom-color: #A8BC1F;
  border-left-color: #A8BC1F;
  background-color: #F7FAE2;
 }
 .hidecontent {display:none;}
 -->
 </style>
 <script language="javascript">
 function switchTag(tag,content)
 {
 // alert(tag);
 // alert(content);
  for(i=1; i <6; i++)
  {
  if ("tag"+i==tag)
  {
  document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
  document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
  }else{
  document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
  document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
  }
  if ("content"+i==content)
  {
  document.getElementById(content).className="";
  }else{
  document.getElementById("content"+i).className="hidecontent";
  }
  document.getElementById("content").className=content;
  }
 }
 </script>
 </head>
 <body>
 <div id="container">
  <div id="title">
  <ul>
  <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
  <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
  <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
  <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
  <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
  </ul>
  </div>
 <div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片：
  <table width="58%" border="1" cellspacing="2" cellpadding="0">
  <tr>
  <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
  <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
  </tr>
  </table>
  </div>
 </div>
 </div>
 </body>
 </html>
beichen_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css实现选项卡
beichenxiansen的博客
05-18 1343
纯css实现选项卡 效果如下： 其实用css实现选项卡是非常简单的 css中 .box{width: 302px;height: 302px;border-top: 1px solid gainsboro;text-align: center;margin: 0 auto;} .box nav{width: 300px;height: 30px;border-bottom: 2px solid gainsboro;} .box nav a{display: block;width: 100px;flex-
css tab选项卡
gdjlc的专栏
03-27 1053
CSS tab 选项卡 *{ padding:0px; margin:0px;} body{ text-align:center;font-size:12px;} .page{ width:600px; margin:10px auto; text-align:left; } /*内容模块 */ .tab_mo{ border:1px solid #ccc; border-top:
jQuery应用-淘宝服饰精品选项卡功能设计
LMY的博客
01-26 440
jQuery应用-淘宝服饰精品案例设计 1.案例功能描述 本案例旨在通过jQuery实现淘宝页面的选项卡功能，即当鼠标滑动到左侧某个列表项时，右侧内容区显示与描述有关的图片。 2.页面设计效果预览 3.设计核心 ①鼠标经过左侧盒子某个列表项时，就让内容区盒子（即右侧盒子）相对应的图片显示。其余的图片隐藏。 ②需要得到当前列表项的索引号，就可以显示对应索引号的图片。 ③用jQuery得到当前元素索引号:$(this).index() ④中间对应的图片，可以通过eq(index)方法去选择 ⑤显示元素s
CSS tab 选项卡(兼容好)
山鹰的专栏
03-21 812
CSS tab 选项卡 *{ padding:0px; margin:0px;} body{ text-align:center;font-size:12px;} .page{  width:600px;  margin:10px auto;   text-align:left;  } /*内容模块 */ .tab_mo{  border:1px solid #ccc; 
精品选项卡
03-11
2. **CSS样式**：为了美观和布局，需要使用CSS来定义选项卡的基本样式，包括颜色、字体、边框、位置等。同时，要确保未选中的选项卡和选中的选项卡有不同的样式以区分状态。 3. **jQuery选择器和事件**：利用jQuery...
css精品收藏
02-24
利用CSS，我们可以实现选项卡切换的效果，即用户点击某个选项时，对应的面板内容会被显示，其他内容则隐藏。CSS伪类选择器如`:hover`, `:active` 和 `:target` 可以在不同状态间切换样式，同时使用JavaScript可以...
2021-2022年收藏的精品资料软件工程师强烈推荐40个优秀的免费CSS工具.docx
09-17
31. **CSS Tab Designer** - 用于创建美观的CSS下拉菜单和选项卡的工具。 这些工具覆盖了CSS开发的各个方面，无论是初学者还是经验丰富的开发者，都能从中找到适用的工具来提高生产力。它们不仅简化了工作流程，...
web前端技术精品菜单展示
07-29
例如，"仿126选项卡"和"下拉菜单"这两个项目很可能就是利用jQuery实现的动态菜单效果，使得用户能够轻松地导航和互动。 多级菜单在Web设计中是常见的元素，尤其是在大型网站中。"多级menu_js version"可能是一个用...
黑色漂亮点击滑动的CSS模板-黑色 漂亮 Jquery 滑动 质感 精品 图标 整体色 web20.rar
02-20
3. **滑动效果**：在网页设计中，滑动效果通常指通过JavaScript或jQuery实现的动画效果，比如图片轮播、内容滚动、选项卡切换等。这些效果可以提升用户体验，使网站看起来更生动、专业。 4. **质感设计**：质感设计...
【CSS】了解grid-auto-columns和grid-auto-rows属性
读心悦
07-07 362
和是 CSS Grid Layout（网格布局）中的两个重要属性，它们用于定义在显式网格（即那些通过或明确指定的网格区域）之外的隐式网格（即自动创建的网格线之间的空间）中的列和行的尺寸。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
最新发布
uuplay0216的博客
07-10 750
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
scss概念及使用
m0_74293254的博客
07-10 760
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
【CSS】缩写属性place-items
读心悦
07-07 221
是一个强大的简写属性，它允许你通过单个声明同时设置 Grid 或 Flexbox 布局中元素的对齐方式。通过合理地使用这个属性，你可以轻松地实现各种复杂的布局效果。
CSS关于居中的问题
热爱WebGIS的博客
07-10 502
由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。我们可以用百分比来表示，子元素相对父元素移动 50%的距离后，再根据子元素的外边距进行调整。值是写死的，如果 son 的宽度发生改变，子元素也无法水平居中。是写死的，如果父元素的宽度发生改变，子元素就无法水平居中了。子绝父相，子元素设置以下属性，也能进行水平垂直居中。子元素 y 轴移动的距离是父子元素高度差的一半，子元素 x 轴移动的距离是父子元素宽度差的一半。子元素相对父元素移动 50%的距离后，使用。
Tailwind CSS是什么？
学以致用 知行合一
07-04 412
定义：Tailwind CSS是一个高度可定制的低级CSS实用程序类集合，用PostCSS编写，旨在通过JavaScript进行定制。它提供了一系列基础工具类，允许开发者通过组合这些工具类来快速构建页面和UI。起源：Tailwind CSS最初由Adam Wathan等人于2017年11月1日在GitHub上作为开源项目发布。随着时间的推移，它逐渐成长为一个成熟且流行的CSS框架。
CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline
朝阳39的博客
07-10 820
template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {
纯CSS瀑布流
u014206461的博客
07-10 79
* 项之间的垂直间距 *//* 每个瀑布流项 *//* 瀑布流容器 */
深入理解CSS中的透明效果实现
jingsi1991的博客
07-10 369
在前端开发中，透明效果是一种常见且有效的视觉设计手段，它可以增加页面的层次感和美观度。透明效果可以通过多种方式实现，包括CSS的opacity属性、RGBA颜色模式、背景透明等。本文将探讨这些方法的使用场景和优缺点，帮助开发者更好地在项目中应用透明效果。
css 选项卡滚动条
08-12
回答: 在CSS中实现选项卡滚动条样式的关键是了解滚动条的结构和使用相关属性进行样式自定义。滚动条由滑块和轨道组成，滑块是可以滑动的部分，轨道是滑块的轨道。一般情况下，为了美观，滑块的颜色会比轨道的颜色深...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值