Rumah > Artikel > hujung hadapan web > Aplikasi pemprosesan limpahan tag HTML_HTML/Xhtml_Pengeluaran halaman web

Aplikasi pemprosesan limpahan tag HTML_HTML/Xhtml_Pengeluaran halaman web

WBOYasal: 2016-05-16 16:41:242288semak imbas

Gunakan CSS untuk menghias bar skrol
1. Tetapan Limpahan apabila kandungan melimpah

limpahan-x Tetapan apabila kandungan mendatar melimpah
limpahan-y Tetapan apabila kandungan menegak melimpah
Nilai yang ditetapkan oleh tiga atribut di atas kelihatan (nilai lalai ), tatal, tersembunyi, auto.

2． scrollbar-3d-light-color Warna tepi terang bar skrol tiga dimensi
warna anak panah-scrollbarWarna anak panah segi tiga pada butang atas dan bawah
warna asas bar skrolWarna asas bar skrol
scrollbar-dark-shadow -color Warna bayang-bayang kuat bar skrol tiga dimensi
warna muka bar skrol Warna bahagian menonjol bar skrol tiga dimensi
scrollbar-highlight-color Warna bahagian kosong bar skrol
scrollbar-shadow-color Bar skrol tiga dimensi Warna bayang
Nilai yang ditetapkan oleh tujuh atribut di atas adalah semua nilai warna, dan pelbagai ungkapan yang ditakrifkan oleh helaian gaya boleh digunakan.

Menggunakan kandungan definisi gaya di atas, kami boleh menentukan sama ada bar skrol tetingkap penyemak imbas dan kotak teks berbilang baris dipaparkan dan gaya warna Set atribut gaya pertama digunakan untuk menetapkan sama ada set objek dipaparkan. Bar skrol, set atribut gaya kedua digunakan untuk menetapkan warna bar skrol Perlu diingatkan bahawa atribut gaya yang terlibat dalam artikel ini hanya disokong oleh IE set kedua disokong oleh versi IE5.5, jadi sila Beri perhatian semasa menyahpepijat.

Kami menerangkan atribut gaya di atas melalui beberapa contoh:

1 Biarkan tetingkap penyemak imbas tidak pernah mempunyai bar skrol
Tiada bar skrol mendatar

Tiada bar skrol menegak

No scroll bar
or

2. Tetapkan bar skrol kotak teks berbilang baris
Tiada bar skrol mendatar

Salin kod

Kod adalah seperti berikut:

Tiada bar skrol menegak

Salin kod

The kod adalah seperti berikut:

Tiada bar skrol

Salin kod

Kod adalah seperti berikut:

3. Tetapkan warna bar skrol tetingkap
Tetapkan warna bar skrol tetingkap kepada merah< style= "scrollbar-base-color:red ">
scrollbar-base-color menetapkan warna asas Secara amnya, anda hanya perlu menetapkan atribut ini untuk menukar warna bar skrol.
Tambahkan sedikit kesan istimewa:

Salin kod

Kodnya adalah seperti berikut:

< body style= "scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon "> lebih baik tetapkannya dalam helaian gaya Tentukan kelas dalam fail supaya anda boleh menggunakannya semula.

Salin kod

Kod tersebut adalah seperti berikut:

.coolscrollbar

{

scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon; dalam gaya pengepala html> dan kemudian gunakan

</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Kenyataan：</span><div>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</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="meta viewport membolehkan kawalan paparan skrin penuh halaman web dalam pengeluaran halaman web iPhone_HTML/Xhtml_web" href="http://m.php.cn/ms/faq/11882.html">meta viewport membolehkan kawalan paparan skrin penuh halaman web dalam pengeluaran halaman web iPhone_HTML/Xhtml_web</a></span><span>Artikel seterusnya：<a class="dBlack" title="meta viewport membolehkan kawalan paparan skrin penuh halaman web dalam pengeluaran halaman web iPhone_HTML/Xhtml_web" href="http://m.php.cn/ms/faq/11884.html">meta viewport membolehkan kawalan paparan skrin penuh halaman web dalam pengeluaran halaman web iPhone_HTML/Xhtml_web</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="http://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ms/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ms/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="http://m.php.cn/ms/about/us.html">Tentang kita</a><a href="http://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="http://m.php.cn/ms/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p>                © php.cn All rights reserved
            </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>