今天为大家分享一下刚刚总结好的html经验，以备不时之需。

　　首先介绍一下frameset标签，此标签用于同一页面内切换网页，在大多数网页中都可以看到，因为项目的需要，故而研究一二。

　　frameset标签不能放置在body标签之中，它的具体实现如下：

工程项目结构：

　　

主页面代码（index.jsp）：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!--

    同一页面内相互切换

    cols:左右分割框架

    frameborder:设置分割线的宽度

    noresize:设置分割线不可拖动

 -->

<frameset cols="10%,*" frameborder="no">

    <frame src="title01.jsp" noresize/>

    <frame src="content01.jsp" name="content"/><!-- name的值用来唯一标示该框架 -->

</frameset>

左侧链接页面（title01.jsp）：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <body style="background-color: red;">

    <a href="content01.jsp" target="content">标题1</a><br/><!-- target:用来指定跳转后显示的框架 -->

    <a href="content02.jsp" target="content">标题2</a><br/>

    <a href="content03.jsp" target="content">标题3</a><br/>

    <a href="content04.jsp" target="content">标题4</a><br/>

  </body>

</html>

　　右侧内容显示界面（为普通的jsp界面），最后附一张效果图供大家研究。

　　下面为大家介绍一种最简单的Html中图片切换方法：

项目工程结构：

　　

页面代码（index.jsp）：

<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>图片切换</title>

    <meta http-equiv="pragma" content="no-cache">

    <meta http-equiv="cache-control" content="no-cache">

    <meta http-equiv="expires" content="0">

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="This is my page">

    <link rel="stylesheet" type="text/css" href="css/common.css">

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" language="javascript">

        $(function(){

            $(".thumbs a").click(function(){

                var largePath = $(this).attr("href");

                var largeAlt = $(this).attr("title");

                $("#largeImg").attr({

                    src : largePath,

                    alt : largeAlt

                });

                return false;

            });

        });

    </script>

  </head>

  <body>

      <h2>图片切换</h2>

      <p><img id="largeImg" src="data:images/img1-lg.jpg" alt="Large Image"/></p>

      <p class="thumbs">

        <a href="images/img2-lg.jpg" title="Image2"><img src="data:images/img2-thumb.jpg"></a>

        <a href="images/img3-lg.jpg" title="Image3"><img src="data:images/img3-thumb.jpg"></a>

        <a href="images/img4-lg.jpg" title="Image4"><img src="data:images/img4-thumb.jpg"></a>

        <a href="images/img5-lg.jpg" title="Image5"><img src="data:images/img5-thumb.jpg"></a>

        <a href="images/img6-lg.jpg" title="Image6"><img src="data:images/img6-thumb.jpg"></a>

    </p>

  </body>

</html>

效果图：

　　具体的工程源码，如需请留下邮箱，如果哪位有更好的效果还望指点。谢谢

Html标签之frameset&图片切换的更多相关文章

  1. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. zoeDylan.ImgChange 图片切换插件

    墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...

  3. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  4. 移动web：图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

  5. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  6. 教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上 DEMO 和 源码.图片区域是可以点击的,动画会从点击的位置开始发生. 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动.最近 ...

  7. iOS开发基础-图片切换(2)之懒加载

    延续:iOS开发基础-图片切换(1),对(1)里面的代码进行改善. 在 ViewController 类中添加新的数组属性:  @property (nonatomic, strong) NSArra ...

  8. 推荐几款jquery图片切换插件

    一.前言 毕业季到了,大家都在匆匆忙忙的记录大学里最美好的时光,照片中各种花式.各种姿势都涌现出来了.这么多的照片怎么展示出来给自己的好友看呢?有人选择做成视频,有人选择ps之后做成图片集,而我选择利 ...

  9. Android中使用ImageViewSwitcher实现图片切换轮播导航效果

    前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(ViewPager未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用V ...

随机推荐

  1. oracle中的函数及其应用

    --..............常用的单行函数......................   -------------------  常用的字符函数  ---------------------- ...

  2. NSIS（001）检测和结束进程是否运行？

    配合插件:killer.dll 导入DLL:ReserveFile "${NSISDIR}\Plugins\killer.dll" 使用方法: ;可以检测和结束32位程序进程和64 ...

  3. js二级导航下拉菜单

    <!DOCTYPE html> <html> <head> <title>导航列表</title> <meta http-equiv= ...

  4. code review

    代码审核,开发者代码完工,就可以下一个环节,即代码审核,通过代码审核,可以看到多个开发者的代码规范,隐藏的BUG,一些注释等规范. 通过代码审核,我们开发者可以互相学习,使得代码逻辑正确,重用

  5. CCNA第三章子网划分,变长子网掩码(VLSM)和TCP/IP排错考试要点学习笔记

    1. 子网划分的好处      缩减网络流量; 优化网络性能; 简化管理; 可以更为灵活地形成大覆盖范围的网络.    2. 如何创建子网的步骤 首先,确认所需要的网络ID数; 其次,确认每个子网中所 ...

  6. Linux网卡bounding详解

    多块网卡绑在一起,作为一个网卡用,实现负载均衡和提高带宽   linux双网卡绑定一个IP地址,实质工作就是使用两块网卡虚拟为一块,使用同一个IP地址,是我们能够得到更好的更快的服务.其实这项技术在 ...

  7. 简单的OkHttp使用介绍

    Android系统提供了两种HTTP通信类,HttpURLConnection和HttpClient.关于HttpURLConnection和HttpClient的选择>>官方博客尽管Go ...

  8. 用canvas制作酷炫射击游戏--part3

    今天介绍下 游戏中的sprite模块,也就是构建玩家及怪物的模块.有了这个模块,就可以在咱们的游戏里加入人物了. 想必用过css的朋友都知道sprite,一种将需要加载的图片拼接在一张图里以减少请求的 ...

  9. 【IOS】异步调用--- 简单使用记录

    /×× ×实现功能:店铺被删除后,先显示提示toast.然后,页面休眠5秒后,再返回到店铺列表页面.×/ - (void)processDeleteShopError { _isLoadingData ...

  10. Canny边缘检测及图像缩放之图像处理算法-OpenCV应用学习笔记四

    在边缘检测算法中Canny颇为经典,我们就来做一下测试,并且顺便实现图像的尺寸放缩. 实现功能: 直接执行程序得到结果如下:将载入图像显示在窗口in内,同时进行图像两次缩小一半操作将结果显示到i1,i ...