仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 830|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:CSS+JS完成的选项卡效果

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:13:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
<!doctypehtmlpublic"-//w3c//dtdxhtml1.0transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<htmllang="us-en">
<head>
<title>CSS选项卡(html组件)</title>
<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon"/>
<metahttp-equiv="content-type"content="text/html;charset=gb2312"/>
<metaname="keywords"content=""/>
<metaname="description"content=""/>
<styletype="text/css">
div.carddiv{background-color:#FF8000;float:left;padding:1px;padding-bottom:0;clear:both;width:405px;}
div.carda{color:black;font-size:14px;text-decoration:none;float:left;width:100px;text-align:center;background-color:white;margin-right:1px;}
div.carddiv.homea.home{font:normalnormalbold14px/1.5宋体;}
div.carddiv.internationala.international{font:normalnormalbold14px/1.5宋体;}
div.carddiv.sporta.sport{font:normalnormalbold14px/1.5宋体;}
div.carddiv.financea.finance{font:normalnormalbold14px/1.5宋体;}
div.carddiv.content{background-color:white;border:1pxsolid#ff8000;height:100px;}
</style>
<scripttype="text/javascript">
varshq={}
shq.cmenu=function(e)
{
vare=window.event?window.event.srcElement:e.target;
if(/a/i.test(e.tagName)){
e.parentNode.className=e.className;
e.parentNode.nextSibling.innerHTML=e.innerHTML;
e.parentNode.nextSibling.style.cssText=border-top:none;
e.blur();
}
}
</script>
</head>
<body>
<divclass="card">
<div>
<ahref="#"class="home">国际</a>
<ahref="#"class="international">国际</a>
<ahref="#"class="sport">体育</a>
<ahref="#"class="finance">财经</a>
</div><divclass="content"></div>
</div>
<divclass="card">
<div>
<ahref="#"class="home">国际</a>
<ahref="#"class="international">国际</a>
<ahref="#"class="sport">体育</a>
<ahref="#"class="finance">财经</a>
</div><divclass="content"></div>
</div>
<divclass="card">
<div>
<ahref="#"class="home">国际</a>
<ahref="#"class="international">国际</a>
<ahref="#"class="sport">体育</a>
<ahref="#"class="finance">财经</a>
</div><divclass="content"></div>
</div>
</body>
</html><scriptlanguage="Javascript">
varnow=newDate();
document.write("
</noscript>
</p>
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
简单生活 该用户已被删除
沙发
发表于 2015-1-18 05:33:07 | 只看该作者
可以使用CSS检查工具进行设计。
再现理想 该用户已被删除
板凳
发表于 2015-2-4 13:24:13 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
分手快乐 该用户已被删除
地板
发表于 2015-2-9 23:51:21 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
因胸联盟 该用户已被删除
5#
发表于 2015-2-28 10:03:46 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
莫相离 该用户已被删除
6#
发表于 2015-3-9 22:26:24 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
柔情似水 该用户已被删除
7#
发表于 2015-3-17 03:07:53 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
爱飞 该用户已被删除
8#
发表于 2015-3-23 18:02:20 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 20:40

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表