Maison > Article > interface Web > Présentation d'un exemple de code pour créer des onglets en utilisant du CSS pur
Présentation d'un exemple de code pour créer des onglets en utilisant du CSS pur
- 零下一度original
- 2017-05-05 15:42:051337parcourir
Utilisez le bouton radio pour créer un effet d'onglet. S'il y a plusieurs pages à onglet, vous devez ajouter plusieurs entrées en même temps, le nom de chaque entrée doit être défini pour être cohérent, ainsi que le frère CSS3. l’éditeur de liens d’éléments est utilisé pour changer le style. La navigation de navigation dans l'onglet doit être entourée d'une étiquette et ajouter le for correspondant.
ps : l'onglet ne prend pas en charge IE8 et versions antérieures, et la disposition de la boîte IE 6.0-11.0 ne prend pas en charge le remplacement des flotteurs
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>DEMO3</title>
<style type="text/css">
/*
tab头区域
*/
.ui-tab input {
display: none
}
/*
内容区域
*/
.ui-tab .ui-content ul {
display: none;
min-height: 200px;
}
/*
头部区域选中
*/
#new:checked ~ .ui-nav .new,
#hot:checked ~ .ui-nav .hot,
#video:checked ~ .ui-nav .video {
background: #F4BD00;
}
/*
内容区域选中
*/
#new:checked ~ .ui-content .new-list,
#hot:checked ~ .ui-content .hot-list,
#video:checked ~ .ui-content .video-list {
display: block;
background: #f6f6f6;
}
/*
tab头部布局
*/
.ui-nav ul {
display: -webkit-box;
display: box;
height: 45px;
line-height: 45px;
background: #fff;
}
.ui-nav ul > li {
-webkit-box-flex: 1;
box-flex: 1;
text-align: center;
}
.ui-nav ul > li label {
width: 100%;
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<!-- -->
<p class="ui-tab">
<input type="radio" name="ui-tab" id="new" checked="checked" />
<input type="radio" name="ui-tab" id="hot" />
<input type="radio" name="ui-tab" id="video" />
<p class="ui-nav">
<ul>
<li class="new"><label for="new">最新新闻</label></li>
<li class="hot"><label for="hot">社会焦点</label></li>
<li class="video"><label for="video">最新视频</label></li>
</ul>
</p>
<p class="ui-content">
<ul class="new-list">
<li>tab内容新1</li>
</ul>
<ul class="hot-list">
<li>tab内容新2…</li>
</ul>
<ul class="video-list">
<li>tab内容新3…</li>
</ul>
</p>
</p>
<!-- -->
</body>
</html>Effet :
[Recommandations associées]
1 Tutoriel vidéo CSS en ligne gratuit
2. 3php.cn Dugu Jiujian (2) - tutoriel vidéo CSS.
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!