CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）
本文目标：
1、掌握CSS中结构性伪类选择器—nth-of-type的用法
问题：
1、实现以下自定义导航菜单，且使用纯DIV+CSS，必须使用结构性伪类选择器—nth-of-type
附加说明：
1、导航宽800px，高90px，居中显示
2、雪花背景图片宽高都是50px，酒瓶图片大小也是一样
现在来具体操作
1、准备素材：结合目标效果我们可以做一张酒瓶的图片，背景是透明的，这样背景颜色更改了，它里面透明的部分也可以随之变化，还有左右两片雪花，也是所需的素材
2、创建好index.html，写好架构，架构如何分析呢
思路分析：
1、目标导航分为6个子项，所以我们可以使用常用的li来实现它，li是水平排列，所以肯定需要浮动起来，所以最后一个li我们可以清除浮动，达到ul依然可以有效包裹住里面所有的浮动起来的li
2、1,3,5导航背景是蓝色，2,4,6的导航背景是黄色，所以li的颜色都是呈现规律性的变化，所以此时我们可使用nth-of-type
3、每个导航都是上下两部分，上部分是一张图片，下部分是文字
好，先按照分析，写好思路，暂时不管css的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
</head>
<body>
<div class="container">
<ul>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航一
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航二
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航三
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航四
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航五
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航六
</div>
</li>
<li class="clear"> </li>
</ul>
</div>
</body>
</html>3、写样式 ，创建css文件夹，里面新建index.css，里面的样式怎么写了，以下是分析思路
思路分析：
.container * 公共样式
1、写了这么多案例，这一步基本上是必不可少的，也是为了减少代码冗余性，所以在这里我们可以定义公共的样式
所以index.css中添加代码如下：
.container *{
padding:0;
margin:0;
}.container 外层容器
1、根据说明得知，宽600,高90，左右填充间隔为100，背景色土黄，带圆角，要居中，背景图片是多个，第一个背景图片水平居左，第二个背景图片水平居右，垂直方向上都是居中，背景图片大小为50px
所以index.css中添加代码如下：
.container{
width: 600px;
height: 90px;
background-color: burlywood;
color: white;
margin: 0 auto;
border-radius: 15px;
padding:0 100px;
background-image: url(../images/xh2.png),url(../images/xh2.png);
background-size: 50px 50px;
background-position-x: left,right;
background-repeat: no-repeat;
background-position-y: center;
}li 列
1、不带默认黑点，所以list-style:none,水平排列所以float:left,宽度都一样，所以width=600/6=100px,字体居中text-align: center;
所以index.css中添加代码如下：
li{
list-style: none;
float: left;
width:100px;
text-align: center;
}img图片
1、根据要求得知宽高都是50，且要居中，所以里面的图片的宽高正好等于图片容器的大小，所以宽100%，高100%
所以index.css中添加代码如下：
.img{
width: 50px;
height: 50px;
margin:0 auto;
}
.img img{
width:100%;
height: 100%;
}clear清除浮动列
1、因为该列的目的是清除浮动
所以index.css中添加代码如下：
li.clear{
width:0;
height: 0;
clear: both;
float: none;
}title文字
1、上下存有填充距离，所以index.css中添加代码如下：
.title{
padding:10px;
}li的单独设置：
1、1,3,5导航背景是蓝色，2,4,6的导航背景是黄色，所以说明奇数列背景是蓝色，偶数列背景是黄色，正好nth-of-type可以带表达式，所以index.css中添加代码如下：
li:nth-of-type(2n){
background-color:lightgoldenrodyellow;
color:peru;
}
li:nth-of-type(2n+1){
background-color:lightblue;
}到此为止，index.css代码如下：
.container *{
padding:0;
margin:0;
}
.container{
width: 600px;
height: 90px;
background-color: burlywood;
color: white;
margin: 0 auto;
border-radius: 15px;
padding:0 100px;
background-image: url(../images/xh2.png),url(../images/xh2.png);
background-size: 50px 50px;
background-position-x: left,right;
background-repeat: no-repeat;
background-position-y: center;
}
li{
list-style: none;
float: left;
width:100px;
text-align: center;
}
.img{
width: 50px;
height: 50px;
margin:0 auto;
}
.img img{
width:100%;
height: 100%;
}
li.clear{
width:0;
height: 0;
clear: both;
float: none;
}
.title{
padding:10px;
}
li:nth-of-type(2n){
background-color:lightgoldenrodyellow;
color:peru;
}
li:nth-of-type(2n+1){
background-color:lightblue;
}然后将index.css引入index.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<ul>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航一
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航二
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航三
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航四
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航五
</div>
</li>
<li>
<div class="img">
<img src="images/jptm.png" />
</div>
<div class="title">
导航六
</div>
</li>
<li class="clear"> </li>
</ul>
</div>
</body>
</html>最终运行效果如下：
总结：
1、学习了结构性伪类选择器—nth-of-type用法，这里的难点也是在于表达式，所以写代码的时候需要多花点耐心去总结规律
Atas ialah kandungan terperinci CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara Mengesahkan Tarikh Bootstrap
Apr 07, 2025 pm 03:06 PM
Untuk mengesahkan tarikh dalam bootstrap, ikuti langkah -langkah ini: memperkenalkan skrip dan gaya yang diperlukan; memulakan komponen pemilih tarikh; Tetapkan atribut data-BV-tarikh untuk membolehkan pengesahan; Konfigurasikan peraturan pengesahan (seperti format tarikh, mesej ralat, dll.); Mengintegrasikan rangka kerja pengesahan bootstrap dan mengesahkan input tarikh secara automatik apabila borang dikemukakan.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
