0036 如何编写网页迁移跳转功能-手机凤凰网
最新评论| |
参与5人 发表5条
1.吉林长春CreditSuisse/04/10 16:36
怪不得，我打开三个网页就反应就跟不上原来是这样厉害了
2.吉林长春爱的越深越沉默 16:36
财经的网页滥得渣一样，打开慢的要死
3.山东济南徐久勇xjy 16:36
还以为我打开网页问题，换了几个浏览器一个叼样，吓死皮皮虾了
4.北京惯性失眠夏 16:36
我以为月底了，我们公司在更新网站呢，害得我给浏览网页的朋友解释！
5.吉林长春WY的薄荷草 16:36
怪不得一直修改默认网页为空修改不了，一打开浏览器就是hao123,缺德...
||||||||||0036 如何编写网页迁移跳转功能
来源:零基础学编程
上节课讲解了关于图片的相关知识，这节课来讲解关于如何使用超级链接实现网页之间的跳转功能。　　上节课的课后练习
准备做2个新的网页，设计好里面的文字内容和图片。　　学哥要来做2个新的网页，一个网页是显示关于“宝钢焦炉火落判定自动控制系统”的详细信息；另一个网页是显示关于项目“AES256位加密保存个人密码本”的相关信息。　　程序设计如下：　　第一个网页命名为project1.html，第二个网页命名为project2.html。　　网页打算使用index.css当中用到的式样，第一行放一个大标题bigtitle，然后下面是一个smallcontent，里面放多段文字或多个图片。　　首先准备好一些图片文件，存放到images目录下面。　　project1.html里面的代码如下：project1.html代码文件在浏览器中显示的效果：project2.html里面的代码如下：project2.html代码文件在浏览器中显示的效果：大家可以参照代码，设计和编写自己的网页，可以使用前面课程中说明过的各种标签元素。　　a标签和属性
前面做好了2个新的网页，可以通过浏览器直接打开这2个网页进行浏览查看。　　但是每次打开这个网页，都要去文件管理器里面寻找并打开，并不是太方便，有没有什么办法，在网页上点击一个链接，网页就可以跳转到新的网页呢？　　通过使用标签在HTML中创建链接。　　如果大家用过浏览器访问网站的，应该就会很熟悉什么是链接，当把鼠标指针移动到网页中的某个链接上时，箭头一般会变为一只小手，点击之后，网页就会跳转到新的文档或者当前文档中的某个部分。　　这种链接称之为超链接。　　超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。　　链接的HTML代码格式是这样的：　　　　href属性规定链接的目标。它可以是一个网络链接地址，也可以是一个相对目录和文件名，和上节课的img标签的src属性类似。　　开始标签和结束标签之间的文字被作为超级链接来显示。　　实例是这样的：　　　　或者：　　　　在创建链接之前，需要设计和准备好，将什么内容做为一个超链接，允许用户点击它跳转页面。　　学哥这里设计好了，点击“成果展示”里面的关于“宝钢焦炉火落判定自动控制系统”的图片的时候，页面跳转到project1.html；　　在“工作经验（部分）”里面增加一段文字，说明项目“AES256位加密保存个人密码本”的信息，点击文字“AES256位加密保存个人密码本”的时候，也看跳转到project2.html。　　在index.html当中增加关于项目“AES256位加密保存个人密码本”的内容。　　index.html代码修改如下：刷新页面：点击图片迁移页面
先来做第一个网页跳转功能，修改index.html，在“宝钢焦炉火落判定自动控制系统”的图片的前后加上标签，设置好属性。　　index.html代码修改如下：刷新页面：可以看到网页的这个图片显示效果好像没有什么变化，但是当鼠标移动到图片上时，鼠标光标变成了一个小手了，说明这是一个链接，可以点击了，点击一下，发现页面迁移到了新的网页：如何返回前页面
网页跳转完成之后，浏览器里面的内容就是显示新的网页的内容了，那么该如何返回原来的网页呢？　　一种办法是使用浏览器的返回按钮，就像导航一样，返回到前一个网页：点击这个返回按钮，可以看到网页回到了index.html网页了。　　使用浏览器的返回按钮呢，有些时候并不是太方便或者友好，这个以后在学习编写动态网页的时候就能体会到，这里不深入讲解。　　那么还有一种办法，可以通过修改新网页里面的代码，增加一个返回的超链接，用户点击这个超链接之后，链接返回到原来的网页。　　来修改project1.html网页程序，在大标题的前面，增加一个返回图片，去网上搜索一个“返回图片”，下载后存放到images目录下。　　project1.html代码修改如下：刷新页面：　　可以看到多了一个返回图片，点击后可以回到index.html网页了。　　这里，学哥为了简化起见，直接在project1.html里面编写了style样式，请大家将这里修改一下，将所有的CSS属性和值全部转移到index.css当中去。　　迁移时新打开一个窗口页面
网页跳转可以让浏览器显示新的网页，但是在有些情况下，用户希望同时看到原页面和新的页面，不希望网页来回跳转的形式，这种情况下，可以设置标签的属性target，让用户在点击链接的时候，打开一个新的窗口显示新的网页，这样对原页面没有影响， 相当于同时在浏览器打开了原网页呃和新网页，这种功能在某些时候非常有用。　　修改index.html程序的网页跳转的地方，增加target="_blank"属性。注意有一个下划线。　　index.html代码修改如下：　　点击链接之后，发现浏览器新打开了一个窗口：　　如果点击浏览器的Tab标题“学哥的个人简历”，回到index.html网页，再次点击那个图片链接，发现浏览器又打开了一个窗口，如果不停的点击链接，就会打开很多个窗口，在某些时候，可能并不希望这样，那么可以这样修改代码。　　index.html代码修改如下：　　关掉之前打开的所有的project1.html网页，重新点击链接试试看，可以看到打开一个窗口之后就无法打开第二个窗口了。　　所以要记住“_blank”属性值是告诉浏览器，每次都打开一个新的窗口，如果不是这个属性值，自己起一个名字，则浏览器会判断如果新窗口没有的名字不存在这个，则新打开一个窗口，如果已经打开过这个名字的窗口，则显示这个窗口并刷新网页。　　文字链接迁移页面
在前面增加的文字“AES256位加密保存个人密码本”前后加上标签，设置跳转到project2.html网页。　　index.html代码修改如下：刷新网页：鼠标移动到蓝色有下划线的文字链接上，发现鼠标光标变成了小手，点击这个链接后，发现新打开了一个窗口显示了新网页。　　修改文字链接CSS属性
如果觉得这个蓝色有下划线的文字不太好看，可以通过CSS属性来调整，来将蓝色去掉，下划线去掉，字体调整大一些，方便用户容易点击。　　index.css代码修改如下：index.html代码修改如下：刷新网页：可以看到字体变大了，颜色变化了，下划线没有了，点击的瞬间的效果也不一样。　　链接可以设置的样式的CSS属性有很多，例如 color、font-family、background或者font-size等等。　　链接的特殊之处在于可以设置不同的状态的样式。　　链接有四种状态：　　a:link - 普通的、未被访问的链接　　a:visited - 用户已访问的链接　　a:hover - 鼠标指针位于链接的上方　　a:active - 链接被点击的时刻　　例子如下：　　a:link {color:#FF0000;} /* 未被访问的链接 */　　a:visited {color:#00FF00;} /* 已被访问的链接 */　　a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */　　a:active {color:#0000FF;} /* 正在被点击的链接 */　　在a的后面加上.prolink表示针对a标签的样式，样式名字是prolink，在html里面使用class="prolink"来使用。　　大家可以自由修改这里的文字链接属性，找到自己喜欢的样式。　　使用文字做为链接，是经常使用的一种链接形式，也可以使用设置div的CSS属性来做出一个漂亮的按钮链接。　　将链接做成一个漂亮的按钮
来修改CSS样式，增加背景色，增加内边距，将链接做成一个流行的色块按钮。　　index.css代码修改如下：刷新网页：课后练习
网站编写的技巧基本上就讲解到这里，虽然还有很多知识和细节没有深入的讲解，但是做为网页编程的入门课程来说，掌握到这个程度已经差不多了，已经可以完成一个个人简历网站了。　　大家学习了这些知识点以后，要举一反三，把内容填写完整，编写出自己的个人简历网站。　　下节课开始，就开始讲解如何测试和部署个人简历网站了，可以让别人看到我们自己做的第一个网站啦。0036 如何编写网页迁移跳转功能
上节课讲解了关于图片的相关知识，这节课来讲解关于如何使用超级链接实现网页之间的跳转功能。
上节课的课后练习
准备做2个新的网页，设计好里面的文字内容和图片。
学哥要来做2个新的网页，一个网页是显示关于“宝钢焦炉火落判定自动控制系统”的详细信息；另一个网页是显示关于项目“AES256位加密保存个人密码本”的相关信息。
程序设计如下：
第一个网页命名为project1.html，第二个网页命名为project2.html。
网页打算使用index.css当中用到的式样，第一行放一个大标题bigtitle，然后下面是一个smallcontent，里面放多段文字或多个图片。
首先准备好一些图片文件，存放到images目录下面。
project1.html里面的代码如下：
project1.html代码文件在浏览器中显示的效果：
project2.html里面的代码如下：
project2.html代码文件在浏览器中显示的效果：
大家可以参照代码，设计和编写自己的网页，可以使用前面课程中说明过的各种标签元素。
a标签和属性
前面做好了2个新的网页，可以通过浏览器直接打开这2个网页进行浏览查看。
但是每次打开这个网页，都要去文件管理器里面寻找并打开，并不是太方便，有没有什么办法，在网页上点击一个链接，网页就可以跳转到新的网页呢？
通过使用&a&标签在HTML中创建链接。
如果大家用过浏览器访问网站的，应该就会很熟悉什么是链接，当把鼠标指针移动到网页中的某个链接上时，箭头一般会变为一只小手，点击之后，网页就会跳转到新的文档或者当前文档中的某个部分。
这种链接称之为超链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。
链接的HTML代码格式是这样的：
&a href="url"&Link text&/a&
href属性规定链接的目标。它可以是一个网络链接地址，也可以是一个相对目录和文件名，和上节课的img标签的src属性类似。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例是这样的：
&a href="http://www.baidu.com/"&访问百度&/a&
&a href="project2.html"&AES256位加密保存个人密码本&/a&
在创建链接之前，需要设计和准备好，将什么内容做为一个超链接，允许用户点击它跳转页面。
学哥这里设计好了，点击“成果展示”里面的关于“宝钢焦炉火落判定自动控制系统”的图片的时候，页面跳转到project1.html；
在“工作经验（部分）”里面增加一段文字，说明项目“AES256位加密保存个人密码本”的信息，点击文字“AES256位加密保存个人密码本”的时候，也看跳转到project2.html。
在index.html当中增加关于项目“AES256位加密保存个人密码本”的内容。
index.html代码修改如下：
刷新页面：
点击图片迁移页面
先来做第一个网页跳转功能，修改index.html，在“宝钢焦炉火落判定自动控制系统”的图片的前后加上&a&标签，设置好属性。
index.html代码修改如下：
刷新页面：
可以看到网页的这个图片显示效果好像没有什么变化，但是当鼠标移动到图片上时，鼠标光标变成了一个小手了，说明这是一个链接，可以点击了，点击一下，发现页面迁移到了新的网页：
如何返回前页面
网页跳转完成之后，浏览器里面的内容就是显示新的网页的内容了，那么该如何返回原来的网页呢？
一种办法是使用浏览器的返回按钮，就像导航一样，返回到前一个网页：
点击这个返回按钮，可以看到网页回到了index.html网页了。
使用浏览器的返回按钮呢，有些时候并不是太方便或者友好，这个以后在学习编写动态网页的时候就能体会到，这里不深入讲解。
那么还有一种办法，可以通过修改新网页里面的代码，增加一个返回的超链接，用户点击这个超链接之后，链接返回到原来的网页。
来修改project1.html网页程序，在大标题的前面，增加一个返回图片，去网上搜索一个“返回图片”，下载后存放到images目录下。
project1.html代码修改如下：
刷新页面：
可以看到多了一个返回图片，点击后可以回到index.html网页了。
这里，学哥为了简化起见，直接在project1.html里面编写了style样式，请大家将这里修改一下，将所有的CSS属性和值全部转移到index.css当中去。
迁移时新打开一个窗口页面
网页跳转可以让浏览器显示新的网页，但是在有些情况下，用户希望同时看到原页面和新的页面，不希望网页来回跳转的形式，这种情况下，可以设置&a&标签的属性target，让用户在点击链接的时候，打开一个新的窗口显示新的网页，这样对原页面没有影响， 相当于同时在浏览器打开了原网页呃和新网页，这种功能在某些时候非常有用。
修改index.html程序的网页跳转的地方，增加target="_blank"属性。注意有一个下划线。
index.html代码修改如下：
点击链接之后，发现浏览器新打开了一个窗口：
如果点击浏览器的Tab标题“学哥的个人简历”，回到index.html网页，再次点击那个图片链接，发现浏览器又打开了一个窗口，如果不停的点击链接，就会打开很多个窗口，在某些时候，可能并不希望这样，那么可以这样修改代码。
index.html代码修改如下：
关掉之前打开的所有的project1.html网页，重新点击链接试试看，可以看到打开一个窗口之后就无法打开第二个窗口了。
所以要记住“_blank”属性值是告诉浏览器，每次都打开一个新的窗口，如果不是这个属性值，自己起一个名字，则浏览器会判断如果新窗口没有的名字不存在这个，则新打开一个窗口，如果已经打开过这个名字的窗口，则显示这个窗口并刷新网页。
文字链接迁移页面
在前面增加的文字“AES256位加密保存个人密码本”前后加上&a&标签，设置跳转到project2.html网页。
index.html代码修改如下：
刷新网页：
鼠标移动到蓝色有下划线的文字链接上，发现鼠标光标变成了小手，点击这个链接后，发现新打开了一个窗口显示了新网页。
修改文字链接CSS属性
如果觉得这个蓝色有下划线的文字不太好看，可以通过CSS属性来调整，来将蓝色去掉，下划线去掉，字体调整大一些，方便用户容易点击。
index.css代码修改如下：
index.html代码修改如下：
刷新网页：
可以看到字体变大了，颜色变化了，下划线没有了，点击的瞬间的效果也不一样。
链接可以设置的样式的CSS属性有很多，例如 color、font-family、background或者font-size等等。
链接的特殊之处在于可以设置不同的状态的样式。
链接有四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
例子如下：
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
在a的后面加上.prolink表示针对a标签的样式，样式名字是prolink，在html里面使用class="prolink"来使用。
大家可以自由修改这里的文字链接属性，找到自己喜欢的样式。
使用文字做为链接，是经常使用的一种链接形式，也可以使用设置div的CSS属性来做出一个漂亮的按钮链接。
将链接做成一个漂亮的按钮
来修改CSS样式，增加背景色，增加内边距，将链接做成一个流行的色块按钮。
index.css代码修改如下：
刷新网页：
网站编写的技巧基本上就讲解到这里，虽然还有很多知识和细节没有深入的讲解，但是做为网页编程的入门课程来说，掌握到这个程度已经差不多了，已经可以完成一个个人简历网站了。
大家学习了这些知识点以后，要举一反三，把内容填写完整，编写出自己的个人简历网站。
下节课开始，就开始讲解如何测试和部署个人简历网站了，可以让别人看到我们自己做的第一个网站啦。
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
上千图片半小时完成，压缩、缩放、水印、裁剪、滤镜、旋转、翻转等功能。
上千图片半小时完成，压缩、缩放、水印、裁剪、滤镜、旋转、翻转等功能。
今日搜狐热点0036 如何编写网页迁移跳转功能
来源:零基础学编程
上节课讲解了关于图片的相关知识，这节课来讲解关于如何使用超级链接实现网页之间的跳转功能。　　上节课的课后练习
准备做2个新的网页，设计好里面的文字内容和图片。　　学哥要来做2个新的网页，一个网页是显示关于“宝钢焦炉火落判定自动控制系统”的详细信息；另一个网页是显示关于项目“AES256位加密保存个人密码本”的相关信息。　　程序设计如下：　　第一个网页命名为project1.html，第二个网页命名为project2.html。　　网页打算使用index.css当中用到的式样，第一行放一个大标题bigtitle，然后下面是一个smallcontent，里面放多段文字或多个图片。　　首先准备好一些图片文件，存放到images目录下面。　　project1.html里面的代码如下：project1.html代码文件在浏览器中显示的效果：project2.html里面的代码如下：project2.html代码文件在浏览器中显示的效果：
...分享至：读《爱和自由》有感 - 简书
读《爱和自由》有感
爱和自由：书中强调的是用足够的爱去给予他充分的自由。我觉得我以前我给小苗已经很自由了，但是还不够。依然给了他的限制，以前给的自由是以我自己的情绪不被影响为前提，比如在外面乱爬乱摸，我都允许。也可能是内心已经设定了这种自由，所以没有觉得不适。但有些突发情况会让我很来火，比如昨天骑电动车带他出去买东西，本来是买完就回家的，但是回来时他怎么也不愿意坐车了，他要吃我买的东西。一抱他上去就大哭，这让我很尴尬，旁边就是小吃点，很多人在看。试着几次他都一上车就哭，这很危险，我心里恼火，但想着给他自由，随他意愿吧。就把他放下来，找个地方给他吃东西了，他很高兴，手舞足蹈，路边的小鸟也指着给我看，吃了一部分，我说我们回家吧，这时候配合极了。在比如给他洗完屁股，水洒在地面上，我去倒水，还没来得及给他穿鞋呢，只见他穿着袜子直接去踩。我又想生气，但是控制了。孩子天性爱水，索性让他玩一会。然后他看着自己一步一个小脚印的大笑。我说这都是苗苗的小脚踩的。然后抱着他换了双袜子，说脚湿湿的是不是不舒服呀。回头想想，不发火是对的。对他制止，只会两败俱伤，他会嚎啕大哭感觉不被理解，而我依然得收拾残局。
书中强调有三个不允许。一是打扰别人，这也说明小孩不能被打扰的重要性。这是在培养小孩的专注力。专注力是一种特别重要的品质。我以前经常犯错，比如他在玩，我录视频，录一会我会叫他名字想让他看摄影头，不看就一直叫，这就是打扰。又或者有的小孩一个人在琢磨着玩，大人觉得他会不会孤单，然后强行加入，这也是打扰。高质量陪伴是在身边陪着但及时回应。二不允许是野蛮行为。打人骂人等，这个好理解。小苗以前有这打人习惯，后来一直跟他说要轻轻摸，已经能够理解做到了。不过我们以前也犯过一个错误，他打人是我们教的，在家里和他爸闹着玩，然后对苗苗说去打爸爸，然后他真打了我们哈哈大笑。后来发现状况不对，出门也打了，及时改了。所以在家在外都得一致，不能在家纵容在外严厉，小孩不能懂。第三不被允许的是的东西不归位，这个慢慢摸索体验中。
打着全职带娃标签的小妈子
码着随心干货文字的大青年。
公众号 微博号：树苗花开。
像阳光一样包围着你
人怎么这样,也飞走了。又到一个星球上,那个星球上是一个很贪婪的人,他不断计算哪个星球是他的,并记下来………他已经忙得没有机会抬起头来跟小王子说话。这本书写了很多种成人的状态,非常真实。 这些成人可能就在孩子们身边,正在为“教”孩子而尽力。我们想教给孩子,我们用我们的主见,“...
上节课讲解了关于图片的相关知识，这节课来讲解关于如何使用超级链接实现网页之间的跳转功能。 上节课的课后练习 准备做2个新的网页，设计好里面的文字内容和图片。学哥要来做2个新的网页，一个网页是显示关于“宝钢焦炉火落判定自动控制系统”的详细信息；另一个网页是显示关于项目“AES...
作者：墨菲，来源：粉红派对 今天推荐一部超水准的台剧《荼蘼》，很多人大概还不会读这两个字，墨菲先来个知识科普，跟我一起读：TU MI，如果还记不住，就联想下这部剧名的谐音：TWO ME（两个我），这两个字就剧透了本剧的故事主线：和男友十分恩爱的女主，在两人即将要离开台湾去上...
停下来 不去奢望 不去期望 就像沐浴露水的鲜花 不再期待阳光 忘掉前方 抹去夜晚的悲伤 找寻一些旧时光 埋藏在新鲜的泥土里 河边上 青草旁 谁还记得微风带来的微笑
性感不是暴露。性感是一种风度和魅力。性感的女人应该是优雅的、随意的，性感的男人则必须是成熟、幽默和干净的…… 姜培琳（模特）：性感应该是一个人做肢体和情绪的表达时所散发出来的魅力，并且往往是通过一些不经意的动作或表情透露出来的，而不是外观化、表面化的东西，更不是夏天暴露一点...