百度经验:简洁图片交替导航的JavaScript实现
本资源是一份关于在百度经验中实现简洁图片交替导航效果的HTML和CSS代码示例。该文档由"晓博JavaScript特效测试"提供,标题表明了主题是关于JavaScript在网页设计中的应用,特别是用于创建动态图片切换的交互式导航功能。 首先,HTML部分展示了如何构建基础结构,包括图像元素和带有类名的容器。`<head>`标签包含了页面的标题和样式定义。图片元素使用`img`标签,并设置了边框为0px以获得更简洁的外观。`.chinaz`类定义了导航栏的宽度和高度,以及两个主要的导航单元`#page_left_1`和`#page_left_2`,它们分别占据378px和380px宽度。 `#page_left_2`下的两个子元素`#page_left_2_1`和`#page_left_2_2`通过`FLOAT`属性实现左右布局,分别设置了背景图片和文本。`#page_left_2_1_1`和`#page_left_2_1_2`则是两个链接,一个具有可点击的手型鼠标指针,另一个设置为白色文字,以便于区分。 `sty20`和`sty21`类则进一步定义了两个不同样式的导航按钮,每个按钮都包含一个图片和20像素的行高。`#page_left_2_1_1`类还设置了背景定位为居中顶部,这可能是为了实现图片与文本的对齐。 CSS部分主要定义了这些元素的样式,如字体大小、颜色、浮动和间距等,以确保图片交替显示时导航的美观性和用户体验。通过JavaScript,开发者可以利用这些HTML结构和CSS样式,编写脚本来控制图片的切换,例如通过添加事件监听器,当用户点击不同的导航按钮时,动态改变图片的显示状态。 这份文件提供了创建一个具有交互性且设计简洁的图片导航栏的HTML和CSS基础知识,适合那些想要学习如何在百度经验或其他网站上运用JavaScript实现类似效果的开发者参考。通过理解和实践这个示例,开发者能够提升自己的前端开发技能,并将动态效果应用于实际项目中。
<head>
<title>晓博JavaScript特效测试</title>
<style>
img{border:0px}
.chinaz{width:380px;height:60px}
#page_left_1 {WIDTH: 378px; }
#page_left_2 {WIDTH: 380px}
#page_left_2_1 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(p_12_02.jpg); WIDTH: 74px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
#page_left_2_1_1 {FONT-WEIGHT: normal; WIDTH: 100%; CURSOR: hand; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_1_2 {FONT-WEIGHT: normal; WIDTH: 74px; COLOR: #ffffff; PADDING-TOP: 5px; TEXT-ALIGN: center}
#page_left_2_2 {FONT-WEIGHT: normal; FLOAT: left; BACKGROUND-IMAGE: url(p_12_04.jpg); WIDTH: 74px; COLOR: #ffffff; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty20 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(p_12_02.jpg); WIDTH: 74px;LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 {FONT-WEIGHT: normal; FONT-SIZE: 12px; FLOAT: left; BACKGROUND-IMAGE: url(p_12_05.jpg); WIDTH: 74px; COLOR: #ffffff; LINE-HEIGHT: 20px; MARGIN-RIGHT: 2px; TEXT-ALIGN: center}
.sty21 #page_left_2_1_1 {BACKGROUND-POSITION: center top; BACKGROUND-IMAGE: url(p_12_03.gif); BACKGROUND-REPEAT: no-repeat}
</style>
</head>
<body bgcolor="#fef4d9" >
<div id="zy">
<div id="login"></div>
<div id="daohang">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="jianjie.html">七夕简介</a></li>
<li><a href="#">七夕节传说</a></li>
<li><a href="#">七夕节习俗</a></li>
<li><a href="#">诗词歌谣</a></li>
<li><a href="#">七夕节寄语</a></li>
</ul>
</div>
</div>
<DIV align="center" ><br /><br />
<SCRIPT language=javascript>
<!--
var imgUrl=new Array();
var imgLink=new Array();
var label = new Array();
imgUrl[1]="01.jpg";
imgLink[1]="/";
label[1] = "图片一";
imgUrl[2]="02.jpg";
imgLink[2]="/";
label[2] = "图片二";
imgUrl[3]="03.jpg";
imgLink[3]="//";
label[3] = "图片三";
imgUrl[4]="04.jpg";
imgLink[4]="/";
label[4] = "图片四";
imgUrl[5]="02.jpg";
imgLink[5]="/";
label[5] = "图片五";
var num_pic =5;
var label_width = 380/num_pic-2;
剩余5页未读,继续阅读
- 粉丝: 14
- 资源: 151
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦