在HTML裡用CSS隱藏div的方法

php中世界最好的语言
發布: 2017-11-28 10:19:54
原創
3518 人瀏覽過

我們知道,在製作網頁的過程中常常會想隱藏一些內容,例如網站加入第三方統計顯示的圖示等,如何透過CSS隱藏,怎麼讓圖片作為背景,但文字又不顯示呢?這篇文章來給大家解讀一下。

一、普通隱藏網頁內容

CSS樣式單字:display:none
假如我們想要隱藏一段統計程式碼,但又不想顯示統計程式碼圖標,又不影響統計功能,我們即可使用此CSS樣式單字display:none(這單字意思不顯示物件及物件內容)。

CSS程式碼:
.tongji{display:none}

HTML片段:

隱藏內容

說明:此DIV CSS隱藏,將隱藏物件DIV及物件內容,但功能不受影響。對於搜尋引擎來說,無論你此樣式是標籤內使用還是向這個實例一般分開CSS與HTML,搜索引#擎都會不讀取並索引你隱藏內容,對於隱藏關鍵字的朋友來說,千萬不要使用此CSS隱藏方式來隱藏關鍵字或錨文本鏈接,不然只是個徒勞無功。

二、圖片做背景,隱藏圖片上文字,又不影響A超連結 錨文本

我們平常會遇到,我們想以圖片作為物件背景,內容以文字+超連結來做優化,同時又想隱藏文字,超連結不受影響,這樣來優化網頁,即不影響美觀又達到了搜尋引擎優化的效果。

所用關鍵CSS樣式:text-indent:-9999px


相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!


相關閱讀:

怎麼製作公司的資料大畫面

怎麼樣用Jest 測試JavaScript 應用程式

#手機video影片播放的問題案例總結

以上是在HTML裡用CSS隱藏div的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!