宁夏龙网

  1. 首页 > 生活百科 > >

选项卡怎么写

生活百科选项卡

1. 用CSS怎么做选项卡 <meta ; charset=gb2312" />选项卡 <style type="text/css"> .city_ser_show{display:none;width:490px;height:200px;border:1px solid #CCCCCC;}#con_two_1{display:block;}#menubox{width:500px;height:24px;margin-bottom:7px;}#menubox ul{margin:0;padding:0;}#menubox ul li{float:left;list-style:none;display:inline;padding-top:7px;border:1px solid #D1D1D1;border-bottom:0px;margin:0 10px;white-space:nowrap; text- overflow:ellipsis;cursor:pointer;width:60px;height:24px;text-align:center;font-size:14px;overflow:visible;}#menubox ul li.hover{border-top:2px solid #D1D1D1;border-right:2px solid #D1D1D1;border-left:2px solid #D1D1D1;color: #000000;font-weight:bold;border-bottom:0px solid #D1D1D1;} </style><body><！--样式1 滑动选项卡--><！--

  • 选项卡1
  • 选项卡2
  • 选项卡3
  • 选项卡4
  • 选项卡5
  • 选项卡6--><！--样式2 -->
  • 选项卡1
  • 选项卡2
  • 选项卡3
  • 选项卡4
  • 选项卡5
  • 选项卡6 选项卡1选项卡1的值 选项卡2选项卡2的值 选项卡3选项卡3的值 选项卡4选项卡4的值 选项卡5选项卡5的值！ 选项卡6选项卡6的值！ 界面你要稍微优化一下！！！根据自己的需求改动一下就可以了，希望能帮到你！！ 。
    2. css html求做一个选项卡 纯CSS写的选项卡效果代码，没有使用js，供学习参考 。
    现在很多都是使用jQuery的，动态效果非常好 。站长之家、懒人之家有好多样例可供选择下载 。
    代码说明这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容 。具体请看下面代码 。
    关于兼容性，因为是用CSS3来制作的，所以如果不支持CSS3的浏览将会出现不兼容的情况 。HTML代码
      选项卡内容 1选项卡内容 2CSS代码* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}body { padding: 20px; text-align: left; font-family: Lato; color: #fff; background: #9b59b6;}.tabs { width: 650px; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; text-align: left;}.tabs li { float: left; display: block;}.tabs input[type="radio"] { position: absolute; top: -9999px; left: -9999px;}.tabs label { display: block; padding: 14px 21px; border-radius: 2px 2px 0 0; font-size: 20px; font-weight: normal; text-transform: uppercase; background: #8e44ad; cursor: pointer; position: relative; top: 4px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}.tabs label:hover { background: #703688;}.tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: #612e76;}.tabs [id^="tab"]:checked + label { top: 0; padding-top: 17px; background: #612e76;}.tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block;} 。
      3. js写一个选项卡 第一步，当然是先写html代码和css样式<！DOCTYPE html><meta charset="gb2312" />无标题文档<style>body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}ul,li{list-style:none;}.wrap{width:500px; margin:20px auto;}.hide{display:none;}#tab_t{height:25px;border-bottom:1px solid #ccc;}#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}</style><body>


    • 上一篇：天草体怎么写

    下一篇：红叶石楠的种植和养护管理技巧