您現在的位置是:電腦技術吧?>? 組裝維修 ??>??橫向滾動條怎么去掉,怎么去掉滾動條??>??正文詳情

橫向滾動條怎么去掉,怎么去掉滾動條

蓬鴻云2019-11-17 08:30:38 人圍觀
簡介如何去掉網頁左右的滾動條一。在原始的HTML中,我們可以定義整個頁面的滾動條如下:body{scroll-3dlight-color:?d4d0c8;/*-最左邊-*/scroll hcss去掉滾動條

1.xhtml下滾動條的顏色問題 在原來的html的時候,我們可以這樣定義整個頁面的滾動條: 代碼如下:body{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭頭 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ } 但是同樣的代碼,我們應用在 xhtml下就不起作用了,我相信好多好朋友也遇到過同樣的問題。

那么怎么才能在xhtml下應用滾動條樣式呢?

看下列代碼:代碼如下:html{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭頭 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ } 這段代碼和上一段唯一的不同就是在css定義的元素上,一個是body一個是html。

我們再測試一下,把html頁面的body修改成html測試一下,發現依然可以實現效果。

那到底是為什么呢?

我們來看一下下面的圖: 這就是html最基本的dom樹結構。

我們再看看html和xhtml的定義: HTML (Hyper Text Markup Language,超文件標記語言),超文件標記語言廣泛應用于國際互聯網上.HTML描述了文本基準如何進行呈現,以及超級連接如何連接到另外的頁面。

XHTML (Extensible Hypertext Markup Language,可擴展的超文件標記語言),是一種標記語言,表現方式與 HTML類似, 不過語法上更加嚴格。

從繼承關系上講,HTML是一種基于SGML的應用,非常靈活,而XHTML則基于XML,XML是SGML的一個子集。

XHTML 1.0 在2000年1月26日成為 W3C 的推薦標準。

從字面上來看,xhtml比html多一個x,那么這個x其實也就是xml,為什么要加一個xml在里面?

其實最根本的原因就是要讓html更加結構化標準化(因為html實在是太爛)。

OK,我們回來看上面的結構樹,我們在html里面定義的是body,因為html不是很標準所以這樣可以生效,而在xhtml里面這樣就不行了,我看看那個圖很明顯,body標簽本身不是根元素,只有html才是根元素,而頁面的滾動條也是屬于根元素的,所以這就是我們為什么定義body沒有效果的原因,因為我們定義的只是一個子原素。

OK,我們知道了原理,來做一個試驗如果把定義body或xhtml換成*:代碼如下:*{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左二 -*/ scrollbar-face-color:#E4E4E4; /*- 面子 -*/ scrollbar-arrow-color:#666; /*- 箭頭 -*/ scrollbar-shadow-color:#808080; /*- 右二 -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/ scrollbar-base-color:#D7DCE0; /*- 基色 -*/ scrollbar-track-color:#;/*- 滑道 -*/ } 在html和xhtml都通過,因為*就是定義頁面上的任何標簽當然也包括了html這個標簽。

(ps:其實與其說是html與xhtml的區別到不如說是有無XHTML 1.0 transitional doctype的區別,但是如果你把頁面的XHTML 1.0 transitional doctype去掉的話,那么這個頁面就沒有doctype,默認的顯示方式就是html4.01,不過你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同樣頁面定義body也不會有效果的,雖然這個頁面的標準是html 4.01) 2、xhtml下frame頁面橫向滾動條的問題 在用ie6瀏覽有框架的xhtml頁面的時候,默認會水平和垂直滾動條會一起出現,這是ie6的一個bug,在firefox上是正常的,出現的原因是其對XHTML 1.0 transitional doctype的解釋缺陷。

對于這個bug一般有3種解決方案, 方法1: 代碼: html { overflow-y: scroll; } 原理:強制顯示ie的垂直滾動條,而忽略水平滾動條。

優點:完全解決了這個問題, 允許你保持完整的XHTML doctype 。

缺點:即使頁面不需要垂直滾動條的時候也會出現垂直滾動條。

方法2: 代碼: html { overflow-x: hidden; overflow-y: auto; } 原理:隱藏橫向滾動,垂直滾動根據內容自適應。

優點:在視覺上解決了這個問題。

在不必要的時候,未強制垂直滾動條出現。

缺點:只是隱藏了水平滾動條,如果頁面真正需要水平滾動條的時候,屏幕以外的內容會因為用戶無法水平滾動,而看不到。

方法3: 代碼: body { margin-right: -15px; margin-bottom: -15px; } 原理:這會在margin的水平和垂直方向上添加一個負值,IE添加了該精確數值后,便會去除對滾動條的需求假象。

優點:在視覺上解決了這個問題,垂直滾動根據內容自適應。

缺點:由于人為創建了15px的外邊距(margin),所以無法使用該填充過的屏幕區域。

body scroll=no 去掉水平滾動條: body style=overflow-x: hidden 去掉豎直滾動條: body style=overflow-y: hidden 隱藏橫向滾動條,顯示縱向滾動條: body style=overflow-x:hidden;overflow-y:scroll 全部隱藏 body style=overflow:hidden 或者是 body scroll=no 這里先說一下滾動條的屬性代碼: overflow-y : visible | auto | hidden | scroll visible :  不剪切內容也不添加滾動條。

auto :  在需要時剪切內容并添加滾動條 hidden :  不顯示超過對象高度的內容,這里不對這個屬性作介紹,大家喜歡的話可以自己嘗試 scroll :  總是顯示縱向滾動條 首先我現說一下去掉滾動條的方法: 如果用百度風格模版的話,滾動條只可能有一個,那就是整個空間右邊最大的瀏覽器窗口滾動條,也就是我美化過的那個滾動條,現在告訴大家,我們可以把這個滾動條去掉,但是卻不影響瀏覽的方法: 在body {}中加入overflow-y : visible就可以了,這樣滾動條就不會顯示出來了。

大家可能會問,這樣怎么往下拉?

呵呵,既然我說了不影響瀏覽,那當然是有方法的,瀏覽的方法就是用 鼠標的滾輪,雖然滾動條沒了,可是鼠標滾輪還是能夠讓網頁上下滾動的。

我相信大家一般瀏覽網頁的時候用滾輪下拉網頁的次數應該比直接用鼠標拖動滾動條的次 數多吧?

提示下,如果碰到沒有滾動條而鼠標又沒有滾輪的朋友,該怎么瀏覽網頁呢?

呵呵,大家可以用鍵盤上面的方向鍵上方的PageUp和PageDown 來上下翻頁,也可以用空格往下拉網頁和Shift 空格往上拉網頁,還有一個方法就是用上下方向鍵來拉動,另外還有按Home鍵回到網頁頂部,End鍵到 達網頁底部,呵呵,是不是方法很多呢?

不過這樣總會有那么一些些的不方便,所以大家可以根據自己的空間和喜好來考慮要不要取消這個滾動條。

哈哈,想不到?哩叭嗦地,一下說了這么多話 下面我們說添加滾動條的方法: overflow-y : auto;height:多少px auto 就是自動判斷要不要加入滾動條,當設定的對象內容超過了height設定的高度時,就自動添加滾動條,不然則不顯示,body{}中的默認值就是 overflow-y : auto;height:瀏覽器高度,所以當網頁內容超過瀏覽器高度的時候,瀏覽器右邊就會自動顯現出滾動條來 大家如 果需要設置這個的話,本人建議設置在最新評論#m_comment{}、文章列表#m_blog{}等內容和高度都不固定的模版中,有的朋友找不到這些模 版的ID,可能只有例如#m_comment div.item{}或者#m_pro a{}等的ID,那么可以自己加上沒有的ID,這樣就可以設置了 這里還有另一個添加滾動條的方法: overflow-y :scroll 這個參數的作用上面解釋過了,不過如果只加這個參數的話,雖然滾動欄會顯示,但是不會顯示滾動條,所以必須還要加上一個 height:多少px 高度屬性,跟上面的那個方法差不多,但是有根本的區別,這個無論對象內容的高度是否超過了height設定的高度,滾動欄永遠都會顯示在邊上的 下面我們說一下關于滾動條的美化,這個我朋友給我看了網上的一個說明,我覺得上面的圖很不錯,但是很小,所以我放大了一倍,看起來就清楚多了,我們先說一下美化的各個屬性: 代碼如下:SCROLLBAR-FACE-COLOR: 顏色代碼; SCROLLBAR-HIGHLIGHT-COLOR:顏色代碼; SCROLLBAR-SHADOW-COLOR: 顏色代碼; SCROLLBAR-3DLIGHT-COLOR: 顏色代碼; SCROLLBAR-ARROW-COLOR: 顏色代碼; SCROLLBAR-TRACK-COLOR: 顏色代碼; SCROLLBAR-DARKSHADOW-COLOR: 顏色代碼; 大家是不是看到這么多屬性有點點頭大了?

哈哈,放心,看一下我剛才提及的被我放大了一倍的圖解你們就會感覺好多了: 這里的圖片上還有一個scrollbar-base-color的屬性,其實這個屬性是個上面7個屬性的總合,怎么說呢?

就是當你設定了這個屬性的顏色后, 前面的7個屬性都可以不用設置了,滾動條會自動幫你設定的,只是這個設定都會基于你設定的scrollbar-base-color的顏色而自動設定 這個屬性的優點就是不用大家費盡心思的去研究各個地方的顏色,但是缺點就是不能夠融和五顏六色于一體。

注:設定了scrollbar-base-color就不要設定其他七個屬性了,設定了其他七個屬性就不要設定scrollbar-base-color,不然之間可能會有沖突,會有一些效果不起作用的 最后,還是考慮到大家可能會喜歡我的美化代碼[真臭美~],我把我的美化代碼貼出來: 代碼如下:SCROLLBAR-FACE-COLOR: #CCFFFF; SCROLLBAR-HIGHLIGHT-COLOR: white; SCROLLBAR-SHADOW-COLOR: #813533; SCROLLBAR-3DLIGHT-COLOR: #813533; SCROLLBAR-ARROW-COLOR: #813533; SCROLLBAR-TRACK-COLOR: white; SCROLLBAR-DARKSHADOW-COLOR: #813533; 以上代碼本人是加在body{}中的

版權聲明:本文由 蓬鴻云 整理編輯。

原標題:去掉橫向滾動條,去掉滾動條

轉載注明出處:http://www.dn9ww09s.icu/assemble/13109.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • assembly是什么文件夾,assembly路徑下只有文件夾

    assembly是什么文件夾,assembly路徑下只有文件夾 相關圖片branding文件夾可以刪除嗎我相信我的很多朋友在打開C盤后發現了一個名為assembly的文件夾。它占用了很多記憶。那么匯編文件夾有什么用呢?可以刪除程序集文件夾嗎?現在,超人軟件是...

  • 載入遠程圖像,vb載入圖像

    載入遠程圖像,vb載入圖像 相關圖片郵件載入遠程圖像是什么意思使用“預加載圖像”行為將頁面上暫時不顯示的圖像加載到瀏覽器緩存中。使用具有更多圖像的對象時,可以提前將使用過的圖像下載到瀏覽器緩存中,以...

  • 360網址收藏夾在什么位置,360收藏夾默認在什么位置

    360網址收藏夾在什么位置,360收藏夾默認在什么位置 相關圖片360收藏夾網頁版作為一款能夠為用戶提供強大保護服務的瀏覽器,360瀏覽器受到了大家的喜愛。你知道360最愛在哪里嗎?如果缺少360個收藏夾,您該怎么辦?現在,超人軟件將為您帶來...

  • workstation密鑰,workstation10密鑰

    workstation密鑰,workstation10密鑰 相關圖片vmware 15 密鑰VMware工作站是最常用、最經典的虛擬機軟件。使用vmware工作站,我們可以在主機上運行單獨的操作系統,而不會影響vm15密鑰...

  • 給黑白照片上色,黑白照片如何上色

    給黑白照片上色,黑白照片如何上色 相關圖片黑白照片怎么上色ps事實上,煙火也可以給黑白照片上色你不相信嗎?一起試試吧!打開煙火中的黑白圖片,然后使用魔棒工具進行選擇。在Xtra/adjust color/hue saturps給黑白照片人物上色...

  • 怎么取消bitlocker,bitlocker取消不了

    怎么取消bitlocker,bitlocker取消不了 相關圖片u盤bitlocker怎么取消BitLocker是一個用于數據保護的平臺模塊,它可以幫助保護windows操作系統和用戶數據,并有助于確保計算機即使無人值守、丟失或被盜也不會被篡改。但對于普bitlocke...

  • media播放器,安卓ijkmedia播放器

    media播放器,安卓ijkmedia播放器 相關圖片A什么播放器代碼如下:!DOCTYPE htmlmllang=enheadmetachset=utf-8titlehtml音頻API/titlelinkrel=styles播放器...

  • 火螢視頻桌面,火螢視頻桌面怎么設置

    火螢視頻桌面,火螢視頻桌面怎么設置 相關圖片火螢桌面下載Firescreen視頻桌面的主要功能之一是用戶可以將視頻文件設置為自己的動態桌面,非常酷。您不僅可以在本地導入視頻文件以進行自己的設置,還可以將視頻發送到fi視頻桌...

  • 鼠標點電腦電腦沒反應,recent替換

    鼠標點電腦電腦沒反應,recent替換 相關圖片desktop最近,很多孩子報告說,當他們打開電腦時,他們發現了一個叫做recentplaces的圖標。那么什么是最近的地方?可以刪除最近的位置嗎?我不會說太多。下一個favorites...

  • 完美圖標,完美公司圖標

    完美圖標,完美公司圖標 相關圖片完美瑪麗艷圖標Favicon通常被稱為網頁的小圖標、網站的縮略圖圖標或收藏夾圖標,是瀏覽器中除了標題之外的網站和收藏夾的重要識別方法。今天的文章來自設計師Philippe B完美鋼琴用過...

熱評文章

  • 后綴ogg是什么格式,ogg文件怎么打開

    后綴ogg是什么格式,ogg文件怎么打開 相關圖片ogg格式前奏最近,許多合作伙伴說他們在電腦里發現了一個后綴為Ogg的文件。那么Ogg的格式是什么?怎么打開?我不需要說太多。接下來,超人軟件將為您介紹Ogg格式的內容。我希mp3轉...

  • 搖搖杯是啥,搖搖杯有什么用

    搖搖杯是啥,搖搖杯有什么用 相關圖片搖搖杯臭了還能用嗎首先,看效果圖。首先,在網上找到一張清晰干凈的玻璃杯圖片,在PS中減少對比度和亮度,剪出杯子的輪廓,去掉多余的用面膜工具清空杯子,創建一個新的層,并...

  • atikmpag.sys導致藍屏,sys藍屏

    atikmpag.sys導致藍屏,sys藍屏 相關圖片開機iastorasys藍屏最近,許多玩家和朋友報告說,他們的電腦總是由一個名為tessafe.sys的安全驅動程序驅動的藍屏。如何解決tessafe.sys引起的藍屏問題?什么是tessfltmgrsys藍屏修復...

  • 自由繪制貝塞爾曲線,怎么自由繪制貝塞爾曲線

    自由繪制貝塞爾曲線,怎么自由繪制貝塞爾曲線 相關圖片貝塞爾曲線怎么用一。二次曲線T(CPX,CPY,x,y)//CPX,CPY表示控制點的坐標,x,y表示終點的坐標;數學公式如下:二次Bezier曲線的路徑由給定點P0,P1,P貝塞爾曲線怎么畫...

  • windows defender,win7defender

    windows defender,win7defender 相關圖片windefender好用嗎Windows Defender是Microsoft的防病毒程序。Windows7及以上操作系統已經內置。雖然它的存在有利于系統的安全性,但是當有許多EXE文件win defender怎么打開...

  • 表單重復提交解決方案,如何解決表單重復提交

    表單重復提交解決方案,如何解決表單重復提交 相關圖片js防止表單重復提交一。當表單中只有一個輸入類型=文本名稱=名稱/時,按回車鍵自動提交表單。代碼如下:form id=form1 action=post。PHP method=po前端防止表單重復提交...

  • 如何調出360加速球,360加速球開啟

    如何調出360加速球,360加速球開啟 相關圖片如何關掉360加速球360加速球是360安全管家的一項功能,可以幫助用戶一鍵加速電腦。你知道怎么打開360加速器嗎?如何關閉360加速器?我不需要說太多。接下來,超人軟件將推出36手機...

  • 方框內打√,快捷怎么打對號√

    方框內打√,快捷怎么打對號√ 相關圖片表格中的對號怎么打我相信在工作和生活中有很多小伙伴需要進入正確的星座。你知道怎么輸入勾號嗎?我不需要說太多。接下來,跟隨超人軟件學習如何使用勾號。來看看如何輸入復...

  • 代碼冗余,雅奇冗余代碼

    代碼冗余,雅奇冗余代碼 相關圖片冗余代碼檢測工具有時,為了方便,我們用word來制作網頁,因為我們對word比較熟悉,排版也比較方便,或者我們只使用word中的圖片和單詞。然而,在word直接生成的網頁中會有什么是編...

  • 怎么去掉愛剪輯的片頭和片尾,愛剪輯怎么去掉它自帶的片頭

    怎么去掉愛剪輯的片頭和片尾,愛剪輯怎么去掉它自帶的片頭 相關圖片怎么減掉愛剪輯的片頭喜歡編輯這個視頻編輯軟件。以小白的操作方法,深受廣大用戶的喜愛。所以你知道如何刪除愛情短片的標題嗎?如何在愛情片段中添加水印?讓我們跟隨超人軟...

關注微信

变脸官网查询