Maison > Article > interface Web > Application de traitement de débordement de balises HTML_HTML/Xhtml_Production de pages Web

Application de traitement de débordement de balises HTML_HTML/Xhtml_Production de pages Web

WBOYoriginal: 2016-05-16 16:41:242288parcourir

Utilisez CSS pour décorer les barres de défilement
1. Paramètres de débordement lorsque le contenu déborde

overflow-x Paramètres lorsque le contenu horizontal déborde
overflow-y Paramètres lorsque le contenu vertical déborde
Les valeurs définies par les trois attributs ci-dessus sont visibles (valeur par défaut), défilement, caché, automatique.

2． scrollbar-3d-light-color La couleur du bord lumineux de la barre de défilement tridimensionnelle
scrollbar-arrow-colorLa couleur des flèches triangulaires sur les boutons haut et bas
scrollbar-base-colorLa couleur de base de la barre de défilement
scrollbar-dark-shadow -color La couleur de l'ombre forte de la barre de défilement tridimensionnelle
scrollbar-face-color La couleur de la partie saillante de la barre de défilement tridimensionnelle
scrollbar-highlight-color La couleur de la partie vide de la barre de défilement
scrollbar-shadow-color La barre de défilement tridimensionnelle Couleur de l'ombre
Les valeurs définies par les sept attributs ci-dessus sont toutes des valeurs de couleur, et diverses expressions définies par la feuille de style peuvent être utilisées.

En utilisant le contenu de définition de style ci-dessus, nous pouvons spécifier si la barre de défilement de la fenêtre du navigateur et la zone de texte multiligne sont affichées et le style de couleur. Le premier ensemble d'attributs de style est utilisé pour définir si l'ensemble. L'objet est affiché. Barre de défilement, le deuxième ensemble d'attributs de style est utilisé pour définir la couleur de la barre de défilement. Il convient de noter que les attributs de style impliqués dans cet article ne sont pris en charge que par IE. être pris en charge par la version IE5.5, veuillez donc faire attention lors du débogage.

Nous expliquons les attributs de style ci-dessus à travers plusieurs exemples :

1. Laissez la fenêtre du navigateur ne jamais avoir de barres de défilement
Aucune barre de défilement horizontale

Pas de barre de défilement verticale

Pas de barre de défilement
ou

2. Définissez la barre de défilement de la zone de texte multiligne
Il n'y a pas de barre de défilement horizontale

Copier le code

Le code est le suivant :

Aucune barre de défilement verticale

Copier le code

Le le code est le suivant :

Pas de barre de défilement

Copier le code

Le code est le suivant :

3. Définissez la couleur de la barre de défilement de la fenêtre
Définissez la couleur de la barre de défilement de la fenêtre sur rouge
scrollbar-base-color définit la couleur de base. Généralement, il vous suffit de définir cet attribut pour changer la couleur de la barre de défilement.
Ajoutez un petit effet spécial :

Copiez le code

Le code est le suivant :

< body style= "scrollbar-arrow-color:blue;scrollbar-base-color:lightsalmon ">

4. mieux vaut le définir dans la feuille de style. Définissez une classe dans le fichier afin de pouvoir la réutiliser.

Copier le code

Le code est le suivant :

.coolscrollbar
{
scrollbar-arrow-color:blue;
scrollbar-base-color:lightsalmon
}

Ajoutez l'instruction ci-dessus au fichier de feuille de style ou au , puis utilisez

</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="la méta-fenêtre permet le contrôle de l'affichage plein écran des pages Web dans la production de pages iPhone_HTML/Xhtml_web" href="http://m.php.cn/fr/faq/11882.html">la méta-fenêtre permet le contrôle de l'affichage plein écran des pages Web dans la production de pages iPhone_HTML/Xhtml_web</a></span><span>Article suivant：<a class="dBlack" title="la méta-fenêtre permet le contrôle de l'affichage plein écran des pages Web dans la production de pages iPhone_HTML/Xhtml_web" href="http://m.php.cn/fr/faq/11884.html">la méta-fenêtre permet le contrôle de l'affichage plein écran des pages Web dans la production de pages iPhone_HTML/Xhtml_web</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</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/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/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>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="http://m.php.cn/fr/about/us.html">À propos de nous</a><a href="http://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="http://m.php.cn/fr/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>