ASP编程：CSS制造标签卡TAB效果
缺点：安全性不是太差了，还行，只要你充分利用系统自带的工具；唯一缺点就是执行效率慢，如何进行网站优化以后，效果会比较好。cssamazon.com这类体例得导航引发了相称多人的效仿。那末，它是怎样做到的呢？有过网页计划履历的人应当不难懂白，假如不晓得细节的话，经由过程观察源代码就可以晓得，它实践上是经由过程在表格中拔出事前制造好的作为标签卡的图片来制造的，标签卡的效果经由过程色彩来把持，好比上图中的“YOURSTORE”这张图片和底下子栏目标色彩分歧，背景都为深蓝色，如许看上就向一张卡片了。不外，如今网页计划的趋向是XHTML+CSS来完成。那末，假如不必图片加表格的办法，有无举措仅仅使用CSS来制造呢？有的，能够经由过程项目列表的CSS设定来做到。
这张图，就是使用这类办法来制造的。
上面，我们就分离来进修CSS的标签卡制造。
使用列表元素制造标签卡
一般情形下，项目列表的分列体例是垂直的，并在前头带有特定的项目标记，以下：
项目列表一
项目列表二
项目列表三
项目列表四
它所对应的HTML代码是这个模样：
<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
<li>项目列表四</li>
</ul>
那是不是你曾想到过，项目列表也能够不垂直分列，而是程度散布呢？在Html中不管怎样是做不到这点的。但是CSS却供应了这类办法。
起首，我们把项目列表放进到div标志中，以下：
<divid="horizonlist">
<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
<li>项目列表四</li>
</ul>
</div>
然后，我们为这个id为horizonlist的Div设定以下款式：
#horizonlist{//*设定div的Box属性*//
border:1pxsolid#000;
margin:2em;
width:80%;
padding:5px;
font-family:Verdana,sans-serif;
}
#horizonlistul,#horizonlistli{//*设定限定于horizonlist的div内的ul和li的属性*//
display:inline;
margin:0;
padding:0;
color:#339;
font-weight:bold;
}
此款式感化于所给项目列表的了局以下：
项目列表一
项目列表二
项目列表三
项目列表四
能够看到，此时的项目列表成了程度安排，并且列表前的标记主动消散。之以是如许，关头在于属性display的设置值inline的感化。display用来改动元素的显现值，能够将元素范例线上，块和清单项目互相变更，个中取值inline的感化是“删除元素前后的分行符，使其并进别的元素流中”。在这里，inline作废了每一个列表项目后的换行，而成为一行显现。
顺着这个思绪下往，假如我们给每一个列表项目设定Box属性，那不就有了相似标签卡的效果出来了么：
项目列表一
项目列表二
项目列表三
项目列表四
我们来看看这个例子的代码：
<divid="tabdemo">
<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<liclass="selected">项目列表三</li>
<li>项目列表四</li>
</ul>
</div>
和下面的例子分歧，这里的项目列表三多了类名“selected”，用来暗示以后被选中的标签卡。
响应的CSS属性设定以下：
#tabdemoulli{
margin-left:0;
margin-bottom:0;
padding:2px15px5px;
border:1pxsolid#000;
list-style:none;//*不显现列表标记*//
display:inline;//*作废项目之间的分行*//
background-color:#ffc;
}
#tabdemoulli.selected{//*设定被选中的列表的效果*//
border-bottom:1pxsolid#fff;
background-color:#fff;
list-style:none;
display:inline;
}
假如你但愿每一个标签卡之间有必定的间隔，能够修正#tabdemoulli此设定中的margin-left属性值，好比改成2，就能够看到相似新近给出的那张蓝色标签卡的模样。
接上去我们来进一步润色下面这个标签卡，先来看效果果。
标签卡一
标签卡二
标签卡三
标签卡四
能够看到，每一个标签卡之间不再紧贴一同，底下呈现了一条一连的横线，当鼠标挪动到每一个标签卡的时分，呈现了浮动的效果。
一同来剖析一下代码：
<divid="container">
<ulid="beautytab">
<li><ahref="#"class="selectedtab">标签卡一</a></li>
<li><ahref="#">标签卡二</a></li>
<li><ahref="#">标签卡三</a></li>
<li><ahref="#">标签卡四</a></li>
</ul>
</div>
这个标签卡放在id为container的块div中。列表的id为beautytab，个中的列表项方针签卡一设定了一个类“selectedtab”，暗示以后被选的标签卡类。
对应的CSS设定以下：
#container
{//*设定包括列表的div的Box属性*//
width:500px;
padding:30px;
border:1pxsolid#ccc;
background:#fff;
}
#beautytab
{//*设定项目列表Ul元素的属性，个中background用来设定联贯于各个列表项面前目今的横线，不然它们会相互分别，用了一张事前筹办好的图片，让它安排在底部，程度反复*//
height:20px;
margin:0;
padding-left:10px;
background:url(bottom.gif)repeat-xbottom;
}
#beautytabli
{//*设定各个列表项目标属性，display属性设定作废项目间的分行，list-style-type设定作废列表项今朝的标记*//
margin:0;
padding:0;
display:inline;
list-style-type:none;
}
#beautytaba:link,#beautytaba:visited
{//*设定标签卡中超链接的笔墨的属性*//
float:left;
background:#f3f3f3;
font-size:12px;
line-height:14px;
font-weight:bold;
padding:2px10px2px10px;
margin-right:4px;
border:1pxsolid#ccc;
text-decoration:none;
color:#666;
}
#beautytaba:link.selectedtab,#beautytaba:visited.selectedtab
{//*设定以后被选中的标签卡中超链接的属性*//
border-bottom:1pxsolid#fff;
background:#fff;
color:#000;
}
#beautytaba:hover
{//*设定超链接鼠标浮动效果*//
ba</p>优点：简单易学、开发速度快、有很多年“历史”，能找到非常多别人做好的程序来用、配合activeX功能强大，很多php做不到的asp+activeX能做到，例如银行安全控件 不能只是将它停留在纸上谈兵的程度上。 你可以通过继承已有的对象最大限度保护你以前的投资。并且C#和C++、Java一样提供了完善的调试/纠错体系。 ASP主要是用好六个对象，其实最主要的是用好其中两个：response和request，就可以随心所欲地控制网页变换和响应用户动作了。 Session:这个存储跟客户端会话过程的数据，默认20分钟失效 我认为比较好的方法是找一些比较经典的例子，每个例子比较集中一种编程思想而设计的。 封装性使得代码逻辑清晰，易于管理，并且应用到ASP.Net上就可以使业务逻辑和Html页面分离，这样无论页面原型如何改变，业务逻辑代码都不必做任何改动；继承性和多态性使得代码的可重用性大大提高。 我想问如何掌握学习节奏(先学什么再学什么)最好详细点? 我可以结合自己的经验大致给你说一说，希望对你有所帮助，少走些弯路。 学习是为了用的，是为了让你的程序产生价值，把握住这个原则会比较轻松点。除此之外，课外时间一定要多参加一些社会实践活动，来锻炼自己的能力。
页:
[1]