仓酷云

标题: 来谈谈：CSS仿淘宝首页导航条按钮结构效果 [打印本页]

作者: 爱飞 时间: 2015-1-16 06:39
标题: 来谈谈：CSS仿淘宝首页导航条按钮结构效果
强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了。
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>网页殊效代码---CSS仿<ahref="http://com.chinabyte.com/taobao/"class="bluekey"target="_blank">淘宝</a>首页导航条按钮结构效果</title><style>/*子鼠*/body{font-size:12px;text-align:center;margin-top:30px;font-family:Verdana;}div,img{margin:0;padding:0;border:0;}ul,li{list-style-type:none;margin:0;padding:0;float:left;}#info{margin-left:auto;margin-right:auto;width:760px;text-align:left;}#new{margin-top:-12px;position:absolute;margin-left:-12px;}#nav{height:30px;width:610px;margin-left:auto;margin-right:auto;}#navli{margin-left:1px;height:30px;}#navlia{display:block;float:left;text-decoration:none;background-image:url(http://www.jscode.cn/Uploadfile/200661115718239.GIF);background-repeat:no-repeat;display:block;background-position:lefttop;}#navaspan{cursor:hand;color:#000;background-image:url(http://www.jscode.cn/Uploadfile/200661115735753.GIF);background-repeat:no-repeat;display:block;background-position:righttop;padding:7px10px6px10px;float:left;}#navlia:active,#navlia:hover{margin-top:0px;}#navlia:activespan,#navlia:hoverspan{padding:10px10px6px10px;margin-top:0px;display:block;color:#FFF;}#zishu01a:link,#zishu01a:visited{background-position:0px-27px;}#zishu01a:linkspan,#zishu01a:visitedspan{background-position:right-27px;padding:10px10px6px10px;margin-top:0;color:#FFF;font-weight:bold;}#zishu02a,#zishu03a,#zishu04a,#zishu05a,#zishu06a,#zishu07a,#zishu08a,#zishu09a,#zishu10a,#zishu11a{margin-top:3px;}#zishu02a:active,#zishu02a:hover{background-position:0px-57px;}#zishu02a:activespan,#zishu02a:hoverspan{background-position:right-57px;}#zishu03a:active,#zishu03a:hover{background-position:0px-87px;}#zishu03a:activespan,#zishu03a:hoverspan{background-position:right-87px;}#zishu04a:active,#zishu04a:hover{background-position:0px-117px;}#zishu04a:activespan,#zishu04a:hoverspan{background-position:right-117px;}#zishu05a:active,#zishu05a:hover{background-position:0px-147px;}#zishu05a:activespan,#zishu05a:hoverspan{background-position:right-147px;}#zishu06a:active,#zishu06a:hover{background-position:0px-177px;}#zishu06a:activespan,#zishu06a:hoverspan{background-position:right-177px;}#zishu07a:active,#zishu07a:hover{background-position:0px-207px;}#zishu07a:activespan,#zishu07a:hoverspan{background-position:right-207px;}#zishu08a:active,#zishu08a:hover{background-position:0px-237px;}#zishu08a:activespan,#zishu08a:hoverspan{background-position:right-237px;}#zishu09a:active,#zishu09a:hover{background-position:0px-267px;}#zishu09a:activespan,#zishu09a:hoverspan{background-position:right-267px;}#zishu10a:active,#zishu10a:hover{background-position:0px-297px;}#zishu10a:activespan,#zishu10a:hoverspan{background-position:right-297px;}#zishu11a:linkspan,#zishu11a:visitedspan{color:#FF6600;}#zishu11a:active,#zishu11a:hover{background-position:0px-327px;}#zishu11a:activespan,#zishu11a:hoverspan{background-position:right-327px;}#menu{width:760px;height:26px;background:#FF9900;}#r1{border-top:0px;border-bottom:0px;border-left:3pxsolid#fff;border-right:3pxsolid#fff;height:1px;overflow:hidden;}#r2{border-top:0px;border-bottom:0px;border-left:2pxsolid#fff;border-right:2pxsolid#fff;height:1px;overflow:hidden;}#r3{border-top:0px;border-bottom:0px;border-left:1pxsolid#fff;border-right:1pxsolid#fff;height:1px;overflow:hidden;}</style></head><body><divid="info"><divid="nav"><ul><liid="zishu01"><ahref="http://homepage.yesky.com/"><span>首页</span></a></li><liid="zishu02"><ahref="http://homepage.yesky.com/"><span>数码通信</span></a></li><liid="zishu03"><ahref="http://homepage.yesky.com/"><span>女人</span></a></li><liid="zishu04"><ahref="http://homepage.yesky.com/"><span>汉子</span></a></li><liid="zishu05"><ahref="http://homepage.yesky.com/"><span>家居</span></a></li><liid="zishu06"><ahref="http://homepage.yesky.com/"><span>书本音像</span></a></li><liid="zishu07"><ahref="http://homepage.yesky.com/"><span>活动</span></a></li><liid="zishu08"><ahref="http://homepage.yesky.com/"><span>游戏</span></a></li><liid="zishu09">&</p>

12下一页

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

作者: 爱飞 时间: 2015-1-16 07:52
标题: 来谈谈：CSS仿淘宝首页导航条按钮结构效果
那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
lt;ahref="http://homepage.yesky.com/"><span>宠物</span></a></li><liid="zishu10"><ahref="http://homepage.yesky.com/"><span>喷鼻港街</span></a></li><liid="zishu11"><ahref="http://homepage.yesky.com/"><span>淘宝商城</span></a></li><li><divid="new"><imgsrc="http://www.jscode.cn/Uploadfile/200661115947970.GIF"alt="新加栏目"/></div></li></ul></div><divid="menu"><divid="r1"></div><divid="r2"></div><divid="r3"></div><div></div></div></div><p>仿淘宝网首页导航条效果转载请说明出处子鼠</p></body></html>
</p>

上一页12

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等

作者: 小妖女 时间: 2015-1-18 09:02
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 飘灵儿 时间: 2015-1-27 05:36
可以使用 CSS 检查工具进行设计。

作者: 蒙在股里 时间: 2015-2-5 10:03
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 冷月葬花魂 时间: 2015-3-2 10:21
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 再见西城 时间: 2015-3-11 05:13
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 因胸联盟 时间: 2015-3-17 22:11
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 小女巫 时间: 2015-3-25 07:19
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

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