div+css制作Tab选项卡-.pdf
《div+css制作Tab选项卡-.pdf》由会员分享,可在线阅读,更多相关《div+css制作Tab选项卡-.pdf(13页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、小篇小篇开始发布PHP 网站建设教程啦!有兴趣可以在百度文档看到发布的文章。打开 hao123 网址我们常常都能发现像这样的选项卡我们都取名叫Tab 选项卡。那这是怎么做出来的呢?我们不妨试试制作的方法。首先,我们要借助网页设计软件Dreamweaver,如果是Dreamweaver cs6还说的过去,但是现在最新的版本是Dreeamweaver CC了,当然如果你对代码熟悉的话你可以用记事本写,不过在此不提倡。好了,废话少说,学习开始了。从上面的选项卡图片我们不难发现是用一个div 包装起来的内容。此文发表过早,不懂div可以百度,下次也会一一讲解。先设计这个选项卡的模型。代码如下:无标题文
2、档#Tab width:400px;height:300px;margin:0;padding:0;这样我们就设计出了id 为 Tab 的 div,style 样式表里的#Tab 代码表示长400px,高 300px,外边距为0,内边距为0.(style 是样式表存放代码,body 里的是图形界面设计代码。后面将只写style 和 body 代码,其他代码不变)。然后 Tab 里我们设计一个ul 和 div。在里加上:热播 插播 重播 不播 这段代码,我们发现设计视图是这样的,为什么呢?原因很简单,就像是一个人只有心没有外表也是不行的啊,至少我们要给个外表他吧?代码也是一样的,光有内容没有外表
3、的网页你会去看吗?这就需要你对代码的理解和熟练了。我们在 style 里加上如下代码:#Tab ul widtH:100%;height:30px;margin:0;padding:0;#Tab ul li width:100px;height:30px;text-align:center;padding:0;line-height:30px;float:left;display:block;list-style-type:none;这样,设计界面我们看到界面是,我们分析下样式表的代码吧,相信你会懂的。#Tab ul 表示在 Tab 里的 ul 属性,#Tab ul 的长是 100%,表示长等
4、于Tab 的长即 400px;在这里最好不要用400px 表示,百分比更准确,只是我个人的理解了。#Tab ul li 的长 100px;表示一个列表项目的长是100px;高是 30px;内容文字居中对齐;内边距是0;垂直居中为30px;左浮动;设计列表为块状(设置列表每一项为整体,方便控制和修改),列表样式没有。在 下面加上;在样式表代码加上:#content widtH:100%;height:270px;margin:0;padding:0;border:1px solid#099;/div 边框为 1px 的实线,颜色十六进制是099 border-top:0;/上边框为0 即没有。这
5、样写,能看的懂没亲们?下面我们先设计出效果,美工是后续。在里加上下面代码:aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd 这四个 div 各自表示相对应列表值的内容。即是我们鼠标放在热播列表里显示全部a,放在插播里显示b,以此类推。为这四个div 加以包装:#content div display:none;#content.conts display:block;相信你们知道把这些代码放在哪里了吧?display 表示当单纯的打开网页时,只显示热播里的内容即 a,其
6、他三个div 的内容为none 表示不显示(隐藏)。我们找到 id 是 Tab 里 ul 的 li 代码,修改为:热播 插播 重播 不播 onmouseover是动作,等下在 javascript代码里要用的,class 是 css 控制器(子控制器),在 style 加上:#Tab ul.lis border-bottom:5px solid#093;/下边框为 5px 实线height:25px;我们先微微的美工下,在 360 浏览器上我们先看看我们的效果图吧到这,感觉怎样呢?好了,我们开始写javascript 代码了,不理解不要紧,以后有 javascript 学习文档的发布!。代码不
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- div css 制作 Tab 选项
限制150内