interface Web
tutoriel HTML
Exemple montrant l'implémentation DIV+CSS de la liste des stations de radio
Exemple montrant l'implémentation DIV+CSS de la liste des stations de radio
Cet article présente principalement l'exemple de code de p+CSS pour implémenter la conception de listes de stations de radio. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour jeter un œil à la
Technologie CSS Spite : c'est-à-dire la technologie des sprites CSS. En fait, les sprites CSS sont des éléments d'icônes dans les images. Ces icônes peuvent créer des boutons, des étiquettes, des logos, etc. Cette technologie a été appliquée à de nombreux sites Web, ce qui peut réduire efficacement le nombre de demandes de transmission. Les icônes requises sont résumées dans une seule image et peuvent être appliquées à la page entière une fois téléchargées
Les exemples suivants sont principalement les suivants. application de la technologie CSS Wizard :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>酷狗电台列表设计</title>
<style>
#frm{
margin:0;
padding:0;
list-style-type: none;
width: 500px;
border:1px solid #000;
overflow: hidden;
}
#frm *{
margin:0;
padding: 0;
font-size: 12px;
}
#frm li{
padding:4px 0;
width: 47%;
float: left;
margin:5px 15px 5px 0;
cursor: pointer;
}
#frm li span{
color:#999;
position: relative;
}
#frm li .d{
width: 38px;
height: 38px;
float: left;
margin:0px 12px 6px 0;
background-image: url(img/spite2.jpg);
position: relative;
}
#frm li .cont{
position: relative;
height: 37px;
overflow: hidden;
}
.cont p{
margin:5px 0 5px 0;
}
.d p{
position: absolute;
width: 100%;
height: 100%;
}
.d .img,.d .play{
background-image: url(img/spite2.jpg);
}
.l1 .d .img{
background-position: 38px 0;
}
.l2 .d .img{
background-position: 76px 0;
}
.l3 .d .img{
background-position: 114px 0;
}
.l4 .d .img{
background-position: 152px 0;
}
.l5 .d .img{
background-position: 190px 0;
}
.l6 .d .img{
background-position: 228px 0;
}
.l7 .d .img{
background-position: 266px 0;
}
.l8 .d .img{
background-position: 304px 0;
}
.l9 .d .img{
background-position: 342px 0;
}
.ll .d .img{
background-position: 380px 0;
}
.d .mask,.d .play{
visibility: hidden;
}
.choose .d{
background-position: 38px 0;
outline: 1px solid rgb(233,243,250);
}
.choose .d .mask{
background-color: #000;
filter:alpha(Opacity=50);
opacity: 0.5;
height: 32px;
width: 32px;
top:3px;
left: 3px;
visibility: visible;
}
.choose .d .play{
background-position: 418px 0;
visibility: visible;
}
.choose .cont p{
font-weight: bold;
color:rgb(0,155,250);
}
</style>
<script>
function mouseoverhandle(obj){
obj.className += ' choose';
}
function mouseouthandle(obj){
obj.className = obj.className.substring(0,2);
}
</script>
</head>
<body>
<ul id="frm">
<li class="l1" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>酷狗热歌</p>
<span href="#">徐朗 - 小夜曲</span>
</p>
</li>
<li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>DJ热碟</p>
<span href="#">曾春年 - 最幸福的人</span>
</p>
</li>
<li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>网络红歌</p>
<span href="#">徐志强 - 想你的时候</span>
</p>
</li>
<li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>新歌</p>
<span href="#">孙俪 - 美丽信号</span>
</p>
</li>
<li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>经典</p>
<span href="#">游鸿明 - 寻你</span>
</p>
</li>
<li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>怀旧粤语</p>
<span href="#">陈慧娴 - 人生何处不相逢</span>
</p>
</li>
<li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>钢琴</p>
<span href="#">July - My Soul</span>
</p>
</li>
<li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>KTV必点</p>
<span href="#">蔡健雅 - 无底洞</span>
</p>
</li>
<li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>思念</p>
<span href="#">张杰 - 这就是爱</span>
</p>
</li>
<li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
<p class="d">
<p class="img"></p>
<p class="mask"></p>
<p class="play"></p>
</p>
<p class="cont">
<p>DJ外文舞曲</p>
<span href="#">Jean Cloud Ades</span>
</p>
</li>
</ul>
<script>
var ul = document.getElementById('frm');
var li = document.getElementsByTagName('li');
var spans;
for(var i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var index = -1;
function showup(){
if(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}else{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
setTimeout('showup()',100);
}
}
function shownext(){
index++;
index = index%li.length;
showup();
}
setTimeout(shownext,1000);
</script>
</body>
</html>Effet de génération :
Code. analyse :
La balise 1.ul contient 10 balises li à l'intérieur. Étant donné que l'icône de chaque balise li est une sous-image différente, différents attributs de classe sont ajoutés à chaque balise li.
2. La balise p dont l'attribut de classe est d pour chaque balise li contient trois balises p. Leurs attributs de classe sont img, mask et play. Ces trois balises sont tour à tour l'icône du thème, l'icône du masque et l'icône de lecture. , et leur nœud parent p (l'attribut de classe est d) a une image d'arrière-plan comme bordure.
3. Chaque balise li a ajouté des lettres de réponse aux événements onmouseover et onmouseout.
4. Le dernier morceau de code js consiste à simuler l'effet de l'augmentation du nom de la chanson lors du changement de chanson dans la boîte à musique.
Tout d'abord, le programme récupère la balise avec l'identifiant frm et récupère toutes les sous-balises li de la balise. Il obtient également toutes les balises span de li et lie la première balise span à span_obj du li. objet de balise.
Deux fonctions de délai d'attente : Showext() et showup(). La fonction showup() est responsable de la production de l'effet d'augmentation du titre de la chanson, tandis que la fonction Showext() est responsable du passage à la lecture de la chanson. la prochaine station musicale.
Les méthodes objets ne peuvent pas se définir comme fonctions de délai d'attente
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
