成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

elisa.yang / 746人閱讀

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

鏈接與圖像 鏈接元素

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

作用 - 從當前html頁面跳轉(zhuǎn)到指定html頁面

屬性

href - 設(shè)置指定跳轉(zhuǎn)html頁面的路徑

路徑分類

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

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

示例代碼:



他是鏈接



他也是鏈接



百度

效果顯示圖:

鏈接元素樣式

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

示例代碼:




我是誰?你是鏈接!
鏈接元素的屬性

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

示例代碼:

    



點開有驚喜
點開嚇死你

email

效果顯示圖:

錨點

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

< a >元素實現(xiàn)錨點功能

設(shè)置href屬性值為 "#id屬性值" 格式就行

示例代碼:


往下看






































































































看完回去吧

效果顯示圖:

下載功能

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

< a >元素實現(xiàn)下載功能

如果默認使用href屬性指定下載文件路徑的話 -> 實現(xiàn)跳轉(zhuǎn)到指定文件

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

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

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

示例代碼:



下載圖片
動態(tài)偽類選擇器

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

示例代碼:




進去瞅瞅

效果顯示圖:

圖片元素

元素 - 空元素

屬性

src - 設(shè)置引入指定圖片的路徑

alt - 設(shè)置如果圖片沒有正確顯示時的文本提示內(nèi)容

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

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

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

示例代碼:

    



嚇死你
背景圖片

引入背景圖像的情況:

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

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

示例代碼:

效果顯示圖:

平鋪方式

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

示例代碼:

效果顯示圖:

背景關(guān)聯(lián)

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

示例代碼:

    



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

效果顯示圖:

精靈圖

精靈圖又叫雪碧圖

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

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

利用background-position屬性 - 設(shè)置背景圖像的定位位置 - 實現(xiàn)現(xiàn)實背景圖像哪個部分

精靈圖分析圖:

絕對路徑與相對路徑

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

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

分析圖:

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52927.html

相關(guān)文章

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

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

    cocopeak 評論0 收藏0

  • css基礎(chǔ)系列

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

    SexySix 評論0 收藏0

  • HTML-CSS

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

    xiaokai 評論0 收藏0

  • HTML-CSS

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

    CHENGKANG 評論0 收藏0

  • css基礎(chǔ)系列

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

    shiina 評論0 收藏0

發(fā)表評論

0條評論

elisa.yang

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<