首页 > 代码库 > 学习PHP课程的第四天
学习PHP课程的第四天
2016年11月10日，星期四。
今天利用了新的指令<!--网站超链接-->制作出更加完善的网页导航条。
网站超链接：<a href="http://www.mamicode.com/输入超链接网址">-输入内容-</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课程的第四天