HTML與CSS中的,鏈接與圖像個人分享

cocopeak 發布于2019-08-29 16:34 / 1446人閱讀

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉到指定頁面屬性設置指定跳轉頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也

鏈接與圖像 鏈接元素

< a >元素 - 表示鏈接元素

作用 - 從當前html頁面跳轉到指定html頁面

屬性

href - 設置指定跳轉html頁面的路徑

路徑分類

相對路徑 - 相對于當前html頁面的路徑

絕對路徑 - 訪問的路徑地址不變化

示例代碼:



他是鏈接



他也是鏈接



百度

效果顯示圖:

鏈接元素樣式

通過CSS可以改變鏈接元素樣式

示例代碼:




我是誰?你是鏈接!

鏈接元素的屬性

鏈接元素也可以實現Email鏈接效果 - 前提是必須配合當前電腦中的郵箱軟件共同使用

示例代碼:

    



點開有驚喜
點開嚇死你

email

效果顯示圖:

錨點

所謂錨點就是點擊指定鏈接回到之前設置的元素那里

< a >元素實現錨點功能

設置href屬性值為 "#id屬性值" 格式就行

示例代碼:

效果顯示圖:

下載功能

注意: 下載功能是HTML5新增的download屬性可以實現a元素的下載功能

< a >元素實現下載功能

如果默認使用href屬性指定下載文件路徑的話 -> 實現跳轉到指定文件

如果瀏覽器能識別該文件類型的話 -> 直接打開該文件

需要使用HTML5新增的download屬性實現< a >元素的下載功能

download屬性的值 - 表示下載文件的名稱(不一定是原文件名稱)

示例代碼:



下載圖片

動態偽類選擇器

注意: 設置input時需要先去除瀏覽器默認的邊框樣式才能重新設置

示例代碼:




進去瞅瞅

效果顯示圖:

圖片元素

元素 - 空元素

屬性

src - 設置引入指定圖片的路徑

alt - 設置如果圖片沒有正確顯示時的文本提示內容

改變圖片顯示的大小 - 保持原圖片寬度和高度的比例(只設置寬度或高度)

元素的屬性 - width和height(不常使用)

CSS的屬性 - width和height(建議使用這種方式)

示例代碼:

背景圖片

引入背景圖像的情況:

如果引入圖片大于當前HT如果引入圖片小于當前HTML頁面 - 重復出現(鋪滿整個頁面)ML頁面 - 圖片會顯示不完整

如果引入圖片小于當前HTML頁面 - 重復出現(鋪滿整個頁面)

示例代碼:

效果顯示圖:

平鋪方式

注意: 瀏覽器默認是平鋪整個瀏覽器的

示例代碼:

效果顯示圖:

背景關聯

備注: 瀏覽器默認背景圖片跟隨頁面滾動

示例代碼:

一花一世界,一葉一孤城,我是誰?我在哪?我在干什么?

效果顯示圖:

精靈圖

精靈圖又叫雪碧圖

由于頁面中需要引入多個背景圖像 -> 將HTML頁面加載變慢

所以將多個背景圖像整合成一張圖片 -> 只需要引入一次

利用background-position屬性 - 設置背景圖像的定位位置 - 實現現實背景圖像哪個部分

精靈圖分析圖:

絕對路徑與相對路徑

相對路徑 - 相對于當前html頁面的路徑

絕對路徑 - 訪問的路徑地址不變化

分析圖:

GPU云服務器云服務器 css與html html與css html與css區別 css與html的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113834.html

HTML與CSS中的,鏈接與圖像個人分享

摘要：鏈接與圖像鏈接元素元素表示鏈接元素作用從當前頁面跳轉到指定頁面屬性設置指定跳轉頁面的路徑路徑分類相對路徑相對于當前頁面的路徑絕對路徑訪問的路徑地址不變化示例代碼相對路徑的鏈接文本陰影案例他是鏈接絕對路徑的鏈接他也鏈接與圖像鏈接元素 < a >元素 - 表示鏈接元素作用 - 從當前html頁面跳轉到指定html頁面屬性 href - 設置指定跳轉html頁面的路徑 ...

elisa.yang 2019-08-02 11:21 評論0 收藏0
css基礎系列

摘要：盒子模型邊框，外邊距，內部距，內容，寬度。盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。高度： height: 長度值|百分比|auto 最大高度: m...

SexySix 2019-04-22 16:12 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
css基礎系列

摘要：盒子模型和標準盒子模型行內塊元素，元素呈現為具有相依特性元素不會被顯示。文字基線屬性設置元素中文本行高語法長度值百分比瀏覽器有默認的行高，不同瀏覽器默認行高不一樣。盒子模型盒子模型的概念高和寬的設置邊框的設置內邊距的設置外邊距的設置盒子的計算元素顯示的方式盒子模型： border邊框，margin外邊距，padding內部距，content內容，width寬度。 ...

shiina 2019-04-23 11:40 評論0 收藏0