今天为大家分享一下刚刚总结好的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. Codeforces Zip-line 650D 345Div1D(LIS)

    传送门 大意:给出一个序列,求修改一个数过后的最长上升子序列. 思路:可以用主席树在线搞,也可以用树状数组离线搞,明显后者好写得多.我们首先读取所有的询问,然后就把询问绑在给出的位置,然后我们正向做一 ...

  2. oracle高阶知识点

    ------------------------------------------------- varchar2(4000)字符型,最大长度不能超过4000,与char的区别是不用空格补足 num ...

  3. Python学习之路—Day1

    第1章 Python语言简介 1.1 Python是什么 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn)是什么呢?简单的说,它是一种计算机编程语言及一组配套的软件工具和库. ...

  4. alfresco install in linux, and integrated with tesseract ocr

    本文描述在Linux系统上安装Alfresco的步骤: 1. 下载安装文件:alfresco-community-5.0.d-installer-linux-x64.bin 2. 增加执行权限并执行: ...

  5. 更改Android Studio的主题背景

    看到别人炫酷的主题,好奇心使然,想要选择一个自己喜欢的炫酷背景,于是乎百度,动手尝试更换各种主题. 保存下来,留着以后想换主题的时候看. 1.Android Studio自带主题 File -> ...

  6. python 之初体验

    python 关开python的介绍我这里就不解释了,这里贴出一个官方的介绍,供大家阅读 http://baike.baidu.com/link?url=U6LdVR-5RCI2TNsXzeALCcG ...

  7. Java对象表示方式2：XStream实现对对象的XML化

    上一篇文章讲到了使用Java原生的序列化的方式来表示一个对象.总结一下这种对象表示方式的优缺点: 1.纯粹的Java环境下这种方式可以很好地工作,因为它是Java自带的,也不需要第三方的Jar包的支持 ...

  8. 上网调查一下目前流行的源程序版本管理软件和项目管理软件都有哪些？各有什么优缺点？并在Github注册账户，写一篇博客记录注册的过程。

    问题一:上网调查一下目前流行的源程序版本管理软件和项目管理软件都有哪些?各有什么优缺点?(以下内容为网上查询所得) Microsoft TFS(Team Foundation Server): 优点: ...

  9. JVM内存回收机制简述

    JVM内存回收机制涉及的知识点太多了,了解越多越迷糊,汗一个,这里仅简单做个笔记,主要参考<深入理解Java虚拟机:JVM高级特性与最佳实践(第二版)> 目前java的jdk默认虚拟机为H ...

  10. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...