链接的使用

编码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title></title>

<style>

a{

/*去掉下划线*/

text-decoration:none;

}


</style>

</head>

<body>

<!-- img是加图片 src是来源

alt:当图片不存在时显示站位

利于SEO(搜索引擎优化) -->

<!-- . 当前所在目录 -->

<!-- .. 上一级目录 -->

<!-- <img src="../1.jpg"alt="美食"

width="500px"> -->

<!-- <a href="http://www.baidu.com">百度</a> -->

<!-- _blank打开一个新网页,并保留原有的网页 -->

<a target="_blank" href="./2.html#a">美食</a>

</body>

</html>

注意 “.”的使用 .是当前目录  ..是上一级目录

二;在原标题栏中加入链接练习

编码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title></title>

<style>

div{

width: 1500px;

margin: 0px auto;

/*background-color: #ff0000;*/

}

li{

/*去掉点*/

list-style: none;

/*这是字体的宽度*/

width: 90px;

height: 50px;

/*行高*/

line-height: 50px;

background-color: #be0000;

/*字体的外边框*/

margin: 0px 0px;

float: left;

/*字体与背景居中*/

text-align: center;

/*字体大小*/

font-size: 20px;

color: #ffffff;



}

a{

text-decoration:none;

color: #ffffff;

}

</style>

</head>

<body>

<div>

<ul>


<li><a target="_blank" href="http://www.baidu.com">新闻</a></li>

<li><a href="http://www.taobao.com">云计算</a></li>

<li><a href="http://www.tianmao.com">大数据</a></li>

<li><a href="http://www.souqiu8.com">移动</a></li>

<li><a href="http://www.51cto.com">网络</a></li>

<li><a href="http://www.youku.com">安全</a></li>

<li><a href="./11.jpg"            >系统</a></li>

<li><a href="http://www.qq.com">开发</a></li>

<li><a href="http://www.weixin.com">服务器</a></li>

<li><a href="http://www.baidu.com">存储</a></li>

<li><a href="http://www.baidu.com">数据库</a></li>

<li><a href="http://www.baidu.com">虚拟化</a></li>

<li><a href="http://www.baidu.com">商务办公</a></li>

<li><a href="http://www.baidu.com">CIOage</a></li>

<li><a href="http://www.baidu.com">读书</a></li>

</ul>

</div>

</body>

</html>

如图所示

wKioL1glEGmiR6kAAAATr2BBD_M744.png-wh_50

点击新闻图标后

wKiom1glEKLToLtjAABZwuBdF-Q929.png-wh_50

依次点击会跳转到相应的界面。