Rumah hujung hadapan web tutorial css 设置DIV滚动条属性与样式的方式介绍

设置DIV滚动条属性与样式的方式介绍

Nov 17, 2017 am 09:43 AM
harta benda Cara gaya

DIV滚动条就是利用DIV标签,在里面嵌入CSS样式表,当div所定义的区域的内容达到一定程度时,在div标签里面嵌入CSS样式表,定义overflow的属性值,设置DIV滚动条相关的属性。

这里向大家描述一下p滚动条属性及样式设置,所谓p滚动条,就是利用p标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当p所规范的区域内的内容达到一定程序时,滚动条就派上用场。

p滚动条属性及样式设置

所谓p滚动条,就是利用p标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当p所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能大约是为了节约页面空间,就是所谓的“缩地”了。

当p所定义的区域的内容达到一定程度时,在p标签里面嵌入css样式表,定义overflow的属性值,设置p滚动条相关的属性。

示例代码:

<styletylestyletyle="text/css"> 
.testDiv{  
border-style:solid;  
border-width:50px;  
border-color:pink;  
 
position:absolute;  
top:200px;  
left:300px;  
height:200px;  
width:300px;  
 
overFlow-x:scroll;  
overFlow-y:hidden;  
 
scrollBar-face-color:green;  
scrollBar-hightLight-color:red;  
scrollBar-3dLight-color:orange;  
scrollBar-darkshadow-color:blue;  
scrollBar-shadow-color:yellow;  
scrollBar-arrow-color:purple;  
scrollBar-track-color:black;  
scrollBar-base-color:pink;  
 
}  
 
</style>
Salin selepas log masuk

注:

1.overFlow:

visible却省值,没有p滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll总是显示滚动条

hidden没有滚动条,超出区域的内容不可见

auto根据内容自动判断是否添加滚动条

2.p滚动条颜色属性:

face-color:滑块颜色

hightlight-color:高亮颜色

3dlight-color:三维光线颜色

darkshadow-color:暗影颜色

shadow-color:阴影颜色

arrow-color:箭头颜色

track-color:滑道颜色

base-color:p滚动条的主要颜色,其中包含滚动按钮和滚动滑块

3.overFlow-xoverFlow-y

visible却省值,没有p滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll总是显示滚动条

hidden没有p滚动条,超出区域的内容不可见

auto根据内容自动判断是否添加滚动条

  1. 专家解惑 p是什么意思?

  2. JavaScript动态创建p属性和样式

  3. SPAN元素和p元素的区别

  4. CSS2.0中page-break-after属性用法

  5. 探究CSS中border:none;与border:0;的区别

总结:

本文向大家描述一下p滚动条属性及样式设置,所谓p滚动条,就是利用p标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当p所规范的区域内的内容达到一定程序时,滚动条就派上用场。

相关推荐:

CSS控制滚动条样式的解析


CSS3自定义滚动条样式的示例详解


CSS设置div滚动条样式的示例

Atas ialah kandungan terperinci 设置DIV滚动条属性与样式的方式介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

macOS: Cara menukar warna widget desktop macOS: Cara menukar warna widget desktop Oct 07, 2023 am 08:17 AM

Dalam macOS Sonoma, widget tidak perlu disembunyikan di luar skrin atau dilupakan dalam panel Pusat Pemberitahuan seperti yang dilakukan dalam versi sebelumnya macOS Apple. Sebaliknya, ia boleh diletakkan terus pada desktop Mac anda - ia juga interaktif. Apabila tidak digunakan, widget desktop macOS memudar ke latar belakang dalam gaya monokrom, mengurangkan gangguan dan membolehkan anda menumpukan pada tugas yang sedang dijalankan dalam aplikasi atau tetingkap aktif. Walau bagaimanapun, apabila anda mengklik pada desktop, ia kembali kepada warna penuh. Jika anda lebih suka rupa yang menjemukan dan ingin mengekalkan aspek keseragaman itu pada desktop anda, ada cara untuk menjadikannya kekal. Langkah-langkah berikut menunjukkan cara ia dilakukan. Buka apl Tetapan Sistem

Fungsi dir() Python: Lihat sifat dan kaedah objek Fungsi dir() Python: Lihat sifat dan kaedah objek Nov 18, 2023 pm 01:45 PM

Fungsi dir() Python: Lihat sifat dan kaedah objek, contoh kod khusus diperlukan. Salah satu fungsi yang sangat berguna ialah fungsi dir(), yang membolehkan kita melihat sifat dan kaedah sesuatu objek. Artikel ini akan memperkenalkan penggunaan fungsi dir() dan menunjukkan fungsi serta penggunaannya melalui contoh kod tertentu. Teks: Fungsi dir() Python ialah fungsi terbina dalam.

Panduan untuk menyelesaikan salah jajaran halaman web WordPress Panduan untuk menyelesaikan salah jajaran halaman web WordPress Mar 05, 2024 pm 01:12 PM

Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan

Reka bentuk imej latar belakang web CSS: mencipta pelbagai gaya dan kesan imej latar belakang Reka bentuk imej latar belakang web CSS: mencipta pelbagai gaya dan kesan imej latar belakang Nov 18, 2023 am 08:38 AM

Reka bentuk imej latar belakang halaman web CSS: Cipta pelbagai gaya dan kesan imej latar belakang, contoh kod khusus diperlukan Ringkasan: Dalam reka bentuk web, imej latar belakang ialah elemen visual yang penting, yang boleh meningkatkan daya tarikan dan kebolehbacaan halaman dengan berkesan. Artikel ini akan memperkenalkan beberapa gaya reka bentuk imej latar belakang CSS biasa dan kesan, dan memberikan contoh kod yang sepadan. Pembaca boleh memilih dan menggunakan gaya dan kesan imej latar belakang ini mengikut keperluan dan keutamaan mereka sendiri untuk mencapai kesan visual dan pengalaman pengguna yang lebih baik. Kata kunci: CSS, imej latar belakang, gaya reka bentuk, kesan, perwakilan kod

sintaks atribut bawah dalam CSS sintaks atribut bawah dalam CSS Feb 21, 2024 pm 03:30 PM

Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel

Pengenalan kepada sifat-sifat Benang Keputusasaan Hearthstone Pengenalan kepada sifat-sifat Benang Keputusasaan Hearthstone Mar 20, 2024 pm 10:36 PM

Thread of Despair ialah kad yang jarang ditemui dalam karya agung Blizzard Entertainment "Hearthstone" dan berpeluang untuk diperolehi dalam pek kad "Wizbane's Workshop". Boleh menggunakan 100/400 mata habuk misteri untuk mensintesis versi biasa/emas. Pengenalan kepada sifat-sifat Thread of Despair Hearthstone: Ia boleh diperolehi dalam pek kad bengkel Wizbane dengan peluang, atau ia juga boleh disintesis melalui habuk misteri. Jarang: Jenis Jarang: Kelas Ejaan: Death Knight Mana: 1 Kesan: Memberi semua minion Deathrattle: Menawarkan 1 kerosakan kepada semua minion

Apakah peranan atribut pageXOffset dalam JavaScript? Apakah peranan atribut pageXOffset dalam JavaScript? Sep 16, 2023 am 09:17 AM

Jika anda ingin mendapatkan piksel yang mana dokumen itu ditatal dari sudut kiri atas tetingkap, gunakan sifat pageXoffset dan pageYoffset. Gunakan pageXoffset untuk piksel mendatar. Contoh Anda boleh cuba menjalankan kod berikut untuk mengetahui cara menggunakan atribut pageXOffset dalam JavaScript - Demonstrasi Langsung<!DOCTYPEhtml><html> <head> <style> &amp

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Feb 29, 2024 am 09:03 AM

Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu

See all articles