仓酷云

标题: PHP教程之纯CSS完成Tab的两种计划 [打印本页]

作者: 不帅 时间: 2015-2-16 00:23
标题: PHP教程之纯CSS完成Tab的两种计划
另外要叮嘱各位的是，抵御诱惑，ASP/PHP/JSP/.NET的对比也许会让你无所适从，你也许学了一半PHP，又开始打C#的主意，或者有人说JAVA很强，这个时候的你绝对不能动摇，哪怕你真想学。　　Tab在以后的Web使用中长短经常见的，最大的优点在于可以充实的使用无限的空间来展现更多的内容。罕见的的Tab普通都是经由过程Javascript来完成，它的优点是天真和功效壮大。然而在某些情形下，假如仅仅需求一个复杂的内容切换时是可以思索利用纯CSS来完成的。本文次要引见两种纯CSS的完成计划：
　　1. 锚点 + :target;
　　2. 纯锚点;
　　这两种各有各长处，也有各自的局限性。
　　详细的Demo请检查这里
　　计划一: 锚点 + :target
　　CSS3中引入了一个新的伪类:target，当用户和页面停止某些交互时会触发，例若有以下的代码，当用户点击链接时，便会触发p元素的:target伪类。 <a href="#dest">Link to Dest</a>
<p id="dest">This is a new paragraph.</p>
　　计划一即是使用:target伪类来完成Tab切换。完成道理为：在页面加载的时分经由过程CSS埋没Tab绝对应的内容，同时在:target伪类中将Tab内容设置为可见。
　　HTML布局以下： <dl>
   <dt class="tab-a first"><a href="#a">Tab A</a></dt>
   <dd id="a" class="content-a">
   Content A
   </dd>
   <dt class="tab-b"><a href="#b">Tab B</a></dt>
   <dd id="b" class="content-b">
   Content B
   </dd>
   <dt class="tab-c"><a href="#c">Tab C</a></dt>
   <dd id="c" class="content-c">
   Content C
   </dd>
   <dt class="tab-d"><a href="#d">Tab D</a></dt>
   <dd id="d" class="content-d">
   Content D
   </dd>
</dl>
利用该布局的一个优点在于短少CSS时仍然可以明晰的浏览内容。
关头的CSS代码以下
dd{
   padding: 5px;
   /*埋没Tab的内容*/
   display:none;
   -moz-border-radius: 5px;
   margin-top:20px
}

dd:target{
   position: absolute;
   /*显示Tab的内容*/
   display:block;
}
/*给Tab和响应的内容设置不异的后台色*/
.tab-a,.content-a{
   background: #CCFF00;
}
.tab-b,.content-b{
   background: #CCFFFF;
}
.tab-c,.content-c{
   background: #FFFF00;
}
.tab-d,.content-d{
   background: #FFCCFF;
}

　　利用CSS计划的一个坏处在于不容易辨别哪一个Tab是以后选中的，一个复杂的体例是给响应的Tab和Tab内容设置不异的后台色，如许当Tab内容显示时，可以更明晰的分辨以后Tab。另外，因为是利用了CSS3中的选择符，因而今朝只能在Firefox、Safari、IE8等古代阅读器下利用。
　　计划二: 纯锚点
　　计划二的道理很复杂，在大多半阅读器下，当点击锚点链接时，锚点对应的内容会主动跳到可视局限之内。依据该道理，将Tab的一切内容放到一个固定高度的容器中，而且设置容器的overflow为hidden，另外每一个Tab内容的高度需求与容器坚持分歧。在该布局下，当点击锚点链接时对应的内容会主动跳转到可视局限之内容，即容器内。
　　详细的HTML布局以下： <ul id="tab_nv">
   <li class="tab-a"><a href="#a2">Tab A</a></li>
   <li class="tab-b"><a href="#b2">Tab B</a></li>
   <li class="tab-c"><a href="#c2">Tab C</a></li>
   <li class="tab-d"><a href="#d2">Tab D</a></li>
</ul>
<div id="tab_content">
   <div id="a2" class="content content-a">
   Content A
   </div>
   <div id="b2" class="content content-b">
   Content B
   </div>
   <div id="c2" class="content content-c">
   Content C
   </div>
   <div id="d2" class="content  content-d">
   Content D
   </div>
</div>
　　因为和计划一的道理纷歧样，此处的HTML布局也只能利用Tab和内容分别的布局，利用该布局的一个成绩在于当CSS缺掉的情形下没法明晰的浏览内容。
　　关头的CSS代码以下： /*给Tab Content容器设置高度*/
#tab_content{
   height: 190px;
   overflow: hidden;
}
/*给每一个Tab Content定高度，需求与容器坚持分歧*/
#tab_content .content{
   padding: 5px;
   -moz-border-radius: 5px;
   height: 190px;
   overflow: hidden;
}
　　与计划逐一样，这里也经由过程给Tab和对应内容设置不异后台色来处理选中辨认成绩。
　　总结
　　1. 纯CSS完成的Tab受限良多，好比计划二中需求给每一个Tab Content设置不异的高度。
　　2. 没法无效的标识以后选中的Tab，本文是经由过程设置不异后台色做辨别，在良多情形下纷歧定合用。
　　3. 两个计划都存在兼容性成绩，计划一利用了CSS3的选择符，受限于CSS的完成;而计划二听说在Opera下不灵。
　　4. 计划一中，当点击其他会触发:target的锚点(或产生相似交互)时，Tab Content会埋没。
<P style="TEXT-INDENT: 2em">
刚开始因为习惯于ASP格式的写法，总是在这些方面出现问题，自己还总是找不到问题所在，这就提醒了自己，在写代码的时候一定要认真，不能粗心地老是少个“；”或者字母大小写不分，要不然很可能找半天都找不到错误。

作者: 分手快乐 时间: 2015-2-16 00:38
说点我烦的低级错误吧，曾经有次插入mysql的时间弄了300年结果老报错，其实mysql的时间是有限制的，大概是到203X年具体的记不清啦，囧。

作者: 老尸 时间: 2015-3-4 10:45
再就是混迹于论坛啦，咱们的phpchina的论坛就很强大，提出的问题一般都是有达人去解答的，以前的帖子也要多看看也能学到不少前辈们的经验。别的不错的论坛例如php100，javaeye也是很不错的。

作者: 深爱那片海 时间: 2015-3-9 20:33
php是动态网站开发的优秀语言，在学习的时候万万不能冒进。在系统的学习前，我认为不应该只是追求实现某种效果，因为即使你复制他人的代码调试成功，实现了你所期望的效果，你也不了解其中的原理。

作者: 飘灵儿 时间: 2015-3-16 21:11
当留言板完成的时候，下步可以把做1个单人的blog程序，做为目标，

作者: 简单生活 时间: 2015-3-18 12:03
我要在声明一下：我是个菜鸟！！我对php这门优秀的语言也是知之甚少。但是我要在这里说一下php在网站开发中最常用的几个功能：

作者: 金色的骷髅 时间: 2015-3-25 02:55
我学习了一段时间后，我发现效果并不好（估计是我自身的问题）。因为一个人的精力总是有限的，同时学习这么多，会导致每个的学习时间都得不到保证。

作者: 蒙在股里 时间: 2015-4-12 01:52
有时候汉字的空格也能导致页面出错，所以在写代码的时候，要输入空格最好用引文模式。

作者: 精灵巫婆 时间: 2015-4-12 14:57
最后祝愿，php会给你带来快乐的同时你也会给他带来快乐。

作者: 灵魂腐蚀 时间: 2015-4-26 17:10
因为blog这样的可以让你接触更多要学的知识，可以接触用到类，模板，js ，ajax

作者: 飘飘悠悠 时间: 2015-4-27 08:34
为了以后维护的方便最好是代码上都加上注释，“予人方便，自己方便”。此外开发文档什么的最好都弄齐全。我觉得这是程序员必备的素质。虽然会消耗点很多的时间。但是确实是非常有必要的。

作者: 透明 时间: 2015-5-1 17:12
再就是混迹于论坛啦，咱们的phpchina的论坛就很强大，提出的问题一般都是有达人去解答的，以前的帖子也要多看看也能学到不少前辈们的经验。别的不错的论坛例如php100，javaeye也是很不错的。

作者: 海妖 时间: 2015-6-19 01:07
我还是推荐用firefox ，配上firebug 插件调试js能省下不受时间。谷歌的浏览器最好也不少用，因为谷歌的大侠们实在是太天才啦，把一些原来的js代码加了一些特效。

作者: 爱飞 时间: 2015-6-19 18:34
没接触过框架的人，也不用害怕，其实框架就是一种命名规范及插件，学会一个框架其余的框架都很好上手的。

作者: 活着的死人 时间: 2015-7-6 00:44
本文当是我的笔记啦，遇到的问题随时填充

作者: 变相怪杰 时间: 2015-7-7 10:27
使用 jquery 等js框架的时候，要随时注意浏览器的更新情况，不然很容易发生框架不能使用。

作者: 不帅 时间: 2015-7-7 16:46
不禁又想起那些说php是草根语言的人，为什么认得差距这么大呢。

作者: 冷月葬花魂 时间: 2015-7-8 03:24
学习php的目的往往是为了开发动态网站，phper就业的要求也涵盖了很多。我大致总结为：精通php和mysql

作者: 若天明 时间: 2015-7-16 08:47
Apache不是非得用80或者8080端口的，我刚开始安得时候就是80端口老占用，就用了个 81端口，结果照常，就是输localhost的时候，应该输入为 localhost:81

作者: 仓酷云 时间: 2015-7-26 06:21
至于模板嘛，各位高人一直以来就是争论不休，我一只小菜鸟就不加入战团啦，咱们新手还是多学点东西的好。

欢迎光临仓酷云 (http://ckuyun.com/)