html换页代码（html切换）[20240423更新]

本篇文章给大家谈谈html换页代码，以及html切换对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、html 底部换页怎么写
• 2、HTML怎么分页，index.html#home为第一个页面，以此类推？
• 3、html5上下滑动“翻页”实现，是真正的翻页

html 底部换页怎么写

1、打开html开发软件，新建一个html页面。

2、在html页面找到body标签，在body标签里新建一个div标签，然后在div标签中新建a标签，并在a标签中输入页数。

3、保存html页面，使用浏览器打开查看分页效果。

4、新建style标签回到html代码页面，找到title标签，在title标签下新建一个。

HTML怎么分页，index.html#home为第一个页面，以此类推？

类似#home这种链接是在一个页面内的跳转，跳转到的位置我们称之为“锚点”。

下面的代码存到index.html即可查看效果

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleTitle/title

/head

body

div style="position: fixed;top: 0;left: 0;background-color: #fff"

a href="#home"首页/a

a href="#page2"page2/a

a href="#page3"page3/a

/div

div style="height: 800px;border: 1px solid #ddd;padding-top: 35px;"

a id="home"/a

brbr

这里是首页部分

/div

div style="height: 800px;border: 1px solid #ddd;padding-top: 35px;"

a id="page2"/a

brbr

这里是page2部分

/div

div style="height: 1000px;border: 1px solid #ddd;padding-top: 35px;"

a id="page3"/a

brbr

这里是page3部分

/div

/body

/html

html5上下滑动“翻页”实现，是真正的翻页

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

!DOCTYPE html

htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"

titleHTML5手机页面触屏滑动上下翻页特效/title

meta charset="utf-8"

meta name="apple-touch-fullscreen" content="YES"

meta name="format-detection" content="telephone=no"

meta name="apple-mobile-web-app-capable" content="yes"

meta name="apple-mobile-web-app-status-bar-style" content="black"

meta http-equiv="Expires" content="-1"

meta http-equiv="pragram" content="no-cache"

link rel="stylesheet" type="text/css" href="./hamer_files/main.css"

link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"

script type="text/javascript" src="./hamer_files/offline.js"/script

meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"

/head

body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"

  section class="u-alert"

      img style="display:none;" src="./hamer_files/loading_large.gif"

      div class="alert-loading z-move"

          div class="cycleWrap" span class="cycle cycle-1"/span

              span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span

          /div

          div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span

          /div

      /div

  /section

  section class="u-arrow"

      p class="css_sprite01"/p

  /section

  section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"

      div class="translate-back" style="height: 918px;"

          div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"

              div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

          div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"

              div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div

          /div

      /div

  /section

  section class="u-pageLoading"

      img src="./hamer_files/load.gif" alt="loading"

  /section

  script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script

  script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script

  script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script

/body/html

2、css代码：

@charset "utf-8";

.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}

.ad_foot li a {display:block;}

.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}

.ad_foot li .l img {width:75px; width:75px;}

.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}

.ad_foot li .r p {color:#999; font-size:1.2em; }

.ad_foot li .r span {font-size:0.8em;}

.ad_foot li .r i {font-style:normal;}

.lazy-img, .lazy-finish{background-color:#f0eded;}

.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}

.ad_foot{padding:15px 15px 0 15px;}

/*声音播放按钮*/

#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}

/*底部推荐*/

.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}

.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}

.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}

.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}

.ad_foot h3 a.active {color:#FFF; background:#FF9240;}

.magazine_1 li {

width:100%;

margin-bottom: 1em;

font-size: 1.8em;

padding: 15px;

background: #FFF;}

.magazine_1 li a {display:block;}

.magazine_1 li .l {width: 75px;

height: 75px;

float: left;

overflow: hidden;}

.magazine_1 li .l img {width:75px; height:75px;}

.magazine_1 li .r {width: 78%;

float: left;

margin-left: 30px;

color: #666;

overflow: hidden;}

.magazine_1 li .r p {

color: #999;

font-size: 1.2em;

.magazine_1 li .r span {font-size:0.8em;}

.ad_foot li .r i {font-style:normal;}

3、运行效果如下：

关于html换页代码和html切换的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。