今天的內容有點意思,學習瞭如何在網頁上添加圖片,以及如何賦予圖片或文字連接。
首先接觸一下編輯命令:<img>圖片標籤、src標記圖片位置,alt標記圖片屬性,這兩個命令都是<img>的屬性,<a></a>超鏈接,其屬性href添加鏈接地址,這個命令有三個作用:1、作爲本地文件的超鏈接 2、連接到網站網址 3、標記連接的錨點 target可以打開新的網頁保留原來網頁,在製作文字鏈接時,會出現下劃線標識,可以用text-decoration編輯除去樣式。
下以製作百度、宜搜、搜狐等鏈接爲例:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2{
width: 100%;
height: 50px;
background-color: pink;
}
ul{
width: 660px;
height: 50px;
background-color: yellow;
margin: 0px auto;
}
li{
color: white;
background-color: grey;
width: 100px;
height: 50px;
float: left;
/*列表樣式*/
list-style: none;
/*文本水平居中*/
text-align: center;
/*行高*/
line-height: 50px;
/*右外邊框*/
margin-right: 10px;
/*鏈接樣式*/
text-decoration: none;
}
li:hover{
background-color: red;
}
</style>
</head>
<body>
<h2>
<ul>
<!-- target打開新網頁保留原網頁 -->
<a target="blank" href="http://www.baidu.com"><li>百度</li></a>
<!-- href超鏈接 -->
<a target="blank" href="http://www.easou.com"><li>宜搜</li></a>
<a target="blank" href="http://www.souhu.com"><li>搜狐</li></a>
<a target="blank" href="http://www.3g.qq.com"><li>QQ</li></a>
<a target="blank" href="http://www.taobao.com"><li>淘寶</li></a>
<a target="blank" href="http://www.jd.com"><li>京東</li></a>
</ul>
</h2>
<!-- src添加圖片地址,.代表當前文件所在文件夾,..表示當前文件所在文件夾的 上層文件夾 -->
<img src="./a/1.jpg" alt="圖片描述">
<!-- alt表示對圖片的描述,這裏有佔位的作用,也利於SEO(搜索引擎) -->
<img src="./a/1.jpg" alt="圖片描述">
</body>
</html>
這樣便可編輯出網頁標頭,其實只要條理清晰便不會很繁瑣,只需注意區分樣式中要編輯的對象,以及<body>中命令父子關係的羅列表達即可。到今天的學習便可製作簡單的網頁了。