鏈接的使用
編碼如下
<!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>
如圖所示
點擊新聞圖標後
依次點擊會跳轉到相應的界面。