简单影院列表，运用了属性选择器和伪类选择器

最新推荐文章于 2024-07-25 11:52:08 发布

barkL

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量73

点赞数

分类专栏： HTML css 伪类选择器文章标签： html css

本文链接：https://blog.csdn.net/barkL/article/details/118700553

版权

HTML 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

伪类选择器

1 篇文章 0 订阅

订阅专栏

本例主要运用了一种属性选择器和两种伪类选择器：

/*  属性选择器：选择以.jpg结尾的img $指末尾 */
           img[src $='.jpg'] {
               width: 50px;
               height: 60px;
               vertical-align: middle;
           }

           img[src $='.png'] {
               width: 20px;

           }

/* 伪类选择器：first-child 和：nth-child(index) */

first-child:选择第一个元素
           ul li:first-child{
               height: 50px;
               line-height: 50px;
               background-color:rgba(0, 0, 255, 0.2);
               border-top-left-radius: 15px;
               border-top-right-radius: 15px;

           }

nth-child(index):按自然顺序选择第index个元素

ul li:first-child div:nth-child(2){
               margin-left: 10px;

           }

/* 伪类选择器：nth-of-type(index) 按类型选择同级兄弟元素 index为元素索引 */
           ul li div:nth-of-type(1){
               margin-right: 50px;

           }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;padding: 0px;list-style: none;
			}
			ul {
				width: 800px;
				text-align: center;
				
			}
			ul li {
				
				height: 80px;
				line-height: 80px;
				
			}
			
			ul li div {
				
				display: inline-block;		/* 使块元素具备行内元素的样式 */
				
			}
			
			ul li div span {
				display: inline-block;		/* 使行内元素具备块元素的样式 */
				
			}
			/* 
			属性选择器：选择以.jpg结尾的img $指末尾 */
			img[src $='.jpg'] {
				width: 50px;				
				height: 60px;
				vertical-align: middle;
			}
			
			img[src $='.png'] {
				width: 20px;
				
			}
			/* 伪类选择器：first-child 选择第一个li标签*/
			ul li:first-child{
				height: 50px;
				line-height: 50px;
				background-color:rgba(0, 0, 255, 0.2);
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				
			}
			
			ul li:first-child div:first-child{	
				margin-left: 10px;
			
			}
			
			ul li:first-child div:nth-child(2){
				margin-left: 10px;
				
			}
			
			ul li:first-child div:nth-child(3){
				margin-left: 0px;
				
			}
			
			ul li:first-child div:nth-child(4){
				margin-left: 50px;
				
			}
			/* 伪类选择器：nth-of-type(index) 选择同级兄弟元素 index为元素索引 */
			ul li div:nth-of-type(1){
				margin-right: 50px;
				
			}
			ul li div:nth-of-type(2){
				margin-right: 50px;
				width: 100px;
			}
			ul li div:nth-of-type(3){
				margin-right: 50px;
				width: 50px;
			}
			ul li div:nth-of-type(4){
				margin-left: 50px;
				width: 50px;
			}
			/* even指偶数，odd为奇数 */
			ul li:nth-of-type(even){
				background-color: gainsboro;
			}
			
			
			
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<div>海报</div>
					<div>电影排行</div>
					<div>评价</div>
					<div>年份</div>
				</li>
				<li>
					<div><img src="img/introduce1.jpg"></div>
					<div>NO.1《》</div>
					<div><span><img src="img/xingxing.png"></span>9.9</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce2.jpg"></div>
					<div>NO.2《》</div>
					<div><span><img src="img/xingxing.png"></span>9.8</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce3.jpg"></div>
					<div>NO.3《》</div>
					<div><span><img src="img/xingxing.png"></span>9.7</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce4.jpg"></div>
					<div>NO.4《》</div>
					<div><span><img src="img/xingxing.png"></span>9.6</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce5.jpg"></div>
					<div>NO.5《》</div>
					<div><span><img src="img/xingxing.png"></span>9.5</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce6.jpg"></div>
					<div>NO.6《》</div>
					<div><span><img src="img/xingxing.png"></span>9.4</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce7.jpg"></div>
					<div>NO.7《》</div>
					<div><span><img src="img/xingxing.png"></span>9.3</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce8.jpg"></div>
					<div>NO.8《》</div>
					<div><span><img src="img/xingxing.png"></span>9.2</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce9.jpg"></div>
					<div>NO.9《》</div>
					<div><span><img src="img/xingxing.png"></span>9.1</div>
					<div>2000</div>
				</li>
				<li>
					<div><img src="img/introduce10.jpg"></div>
					<div>NO.10《》</div>
					<div><span><img src="img/xingxing.png"></span>9.0</div>
					<div>2000</div>
				</li>
			</ul>
			
		</div>
	</body>
</html>

barkL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单影院列表，运用了属性选择器和伪类选择器

本例主要运用了一种属性选择器和两种伪类选择器：/*属性选择器：选择以.jpg结尾的img $指末尾 */ img[src $='.jpg'] { width: 50px; height: 60px; vertical-align: middle; } img[src $='...
复制链接

扫一扫