码迷,mamicode.com
首页 > Web开发 > 详细

学习PHP课程的第四天

时间:2016-11-11 15:38:26      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:zhiye   课程   超链接   网页   魔兽   

2016年11月10日,星期四。


    

    今天利用了新的指令<!--网站超链接-->制作出更加完善的网页导航条。

    网站超链接:<a href="输入超链接网址">-输入内容-</a>

    编码如下:


<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">


<title>魔兽职业预览</title>

</head>

<style type="text/css">

body,ul{

margin: 0px;

padding: 0px;

}


#baohan{

width: 100%

height:60px;

background-color: red;

}




#zhiye{

height: 50px;

width: 1500px;

margin: 0 auto;

background-color: red;}


li{

width: 70px;

height: 50px;

background-color: red;

float: left;

list-style: none;

text-align: center;

line-height: 50px;

margin-right: 2px;}


li:hover{background-color: orange;}


a{text-decoration: none;}


</style>





<body>

<div id="baohan">

<ol id="zhiye">

<li><a href="https://www.wowchina.com/zh-cn/game/classes/demon-hunter">战士</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/paladin">圣骑士</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/hunter">法师</li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/hunter">猎人</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/hunter">牧师</li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/hunter">萨满</li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/death-knight">死亡骑士</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/druid">德鲁伊</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/demon-hunter">恶魔猎手</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/warlock">术士</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/monk">武僧</a></li>

<li><a href="https://www.wowchina.com/zh-cn/game/classes/rogue">潜行者</a></li>

</ol>

</div>




</body>

</html>


    完成图,如下:

技术分享

    实现了链接功能:

    技术分享

    利用target="blank"锚点功能实现<打开全新网页保留原网页>的功能。

    注:target(目标)默认值self

blank:打开全新网页保留原网页

<body>

<div id="baohan">

<ol id="zhiye">

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/demon-hunter">战士</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/paladin">圣骑士</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/hunter">法师</li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/hunter">猎人</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/hunter">牧师</li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/hunter">萨满</li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/death-knight">死亡骑士</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/druid">德鲁伊</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/demon-hunter">恶魔猎手</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/warlock">术士</a></li>

<li><a target="blank"href="https://www.wowchina.com/zh-cn/game/classes/monk">武僧</a></li>

<li><a target="blank" href="https://www.wowchina.com/zh-cn/game/classes/rogue">潜行者</a></li>

</ol>

</div>


    效果图(可看到打开链接后原网页未关闭),如下:

技术分享


本文出自 “12244251” 博客,谢绝转载!

学习PHP课程的第四天

标签:zhiye   课程   超链接   网页   魔兽   

原文地址:http://12254251.blog.51cto.com/12244251/1871664

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!