16-11-10

  今天的內容有點意思,學習瞭如何在網頁上添加圖片,以及如何賦予圖片或文字連接。

  首先接觸一下編輯命令:<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>中命令父子關係的羅列表達即可。到今天的學習便可製作簡單的網頁了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章