imitations records第一天

最新推荐文章于 2024-07-24 21:48:20 发布
最新推荐文章于 2024-07-24 21:48:20 发布
阅读量740 收藏
点赞数 3
分类专栏： 前端学习记录 文章标签： jquery css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51082388/article/details/121774180
版权

CSS高亮 hover效果 jQuery find CSS选择器 DOM操作
关键词由CSDN通过智能技术生成

OPACITY,高亮
.header .register li:hover{ opacity: 1; }

.header .register li:hover{
	opacity: 1;
}

：这里不要有空格

.content_in .content_left {
	float: left;
	width: 800px;
	height: 100%;
	background: pink;
}

.之前需要有空格
css:no-repeat不需要平铺

find(expr|obj|ele)
概述
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数
exprStringV1.0
用于查找的表达式

jQuery object  objectV1.6
一个用于匹配元素的jQuery对象

elementDOMElementV1.6
一个DOM元素

查找资源

http://hemin.cn/jq/find.html

在这里插入图片描述

css

* {
	margin: 0;
	padding: 0;
}

.header {
	width: 100%;
	height: 45px;
	background-color: red;
}

.header .logo {
	float: left;
	margin-top: 5px;
	margin-left: 20px;
	opacity: 0.5;
}

.header .logo:hover {
	opacity: 1;

}

.header .logo a {
	display: inline-block;
	width: 78px;
	height: 21px;
	background: url(../img/images/player_logo.png) no-repeat 0 0;
}

.header .register {
	float: right;
	line-height: 45px;
}

.header .register li {
	list-style: none;
	float: left;
	margin-right: 20px;
	color: #fff;
	opacity: 0.5;
}

.header .register li:hover {
	opacity: 1;
}

.content {
	width: 100%;
	height: 460px;
	background: blue;
}

.content .content_in {
	width: 1200px;
	height: 100%;
	background: deeppink;
	margin: 0 auto;
}

.content_in .content_left {
	float: left;
	width: 800px;
	height: 100%;
	background: pink;
}

.content_left .content_toolbar {
	width: 100%;
	height: 40px;
	background: #000;
	/*color: wheat;也可以*/

}

.content_toolbar span {
	display: inline-block;
	width: 122px;
	height: 100%;
	line-height: 40px;
	text-align: center;
	border: 1px solid #FFFFFF;
	box-sizing: border-box;
	border-radius: 5px;
	color: white;
	opacity: 0.5;
}

.content_toolbar span:hover {
	opacity: 1;
}

.content_toolbar span i {
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url(../img/images/icon_sprite.png) no-repeat 0 0;
	margin-right: 10px;
	vertical-align: -5px;

}

.content_toolbar span:nth-child(1) i {
	background-position: -60px -20px;
}

.content_toolbar span:nth-child(2) i {
	background-position: -20px -20px;
}

.content_toolbar span:nth-child(3) i {
	background-position: -40px -220px;
}

.content_toolbar span:nth-child(4) i {
	background-position: -100px -20px;
}

.content_toolbar span:nth-child(5) i {
	background-position: -40px -300px;
}

.content_in .content_right {
	float: right;
	width: 400px;
	height: 100%;
	background: #ccc;
}

.content_left .content_list {
	width: 100%;
	height: 420px;
	background: purple;
}

.content_list li{
	list-style: none;
	width: 100%;
	height: 50px;
	background: orangered;
	/*opacity: 0.5;这样也可以*/
	border-bottom: 1px solid rgba(255,255,255,0.5);
	box-sizing: border-box;
	user-select:none;
}
.content_list li div{
	float: left;
	color: #fff;
	line-height: 50px;
	opacity: 0.5;
}
.content_list .list_check{
	width: 50px;
	height: 100%;
	background: #000000;
	text-align: center;
}
.content_list .list_check i{
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 1px solid #fff;
}
.content_list .list_checked i{
	background: url(../img/images/icon_sprite.png) no-repeat -60px -80px;
}
.content_list .list_number{
	width: 20px;
	height: 100%;
	/*background: green;*/
}
.content_list .list_name{
	width: 50%;
	height: 100%;
	/*background: #CCCCCC;*/
}
.list_name .list_menu{
	margin-top: 5px;
	float: right;
	margin-right: 20px;
	display: none;
}
.list_menu a{
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(../img/images/icon_list_menu.png) no-repeat 0 0;
}
.list_menu a:nth-child(1){
	background-position: -120px 0;
}
.list_menu a:nth-child(2){
	background-position: -120px -80px;
}
.list_menu a:nth-child(3){
	background-position: -120px -120px;
}
.list_menu a:nth-child(4){
	background-position: -120px -40px;
}
.content_list .list_singer{
	width: 20%;
	height: 100%;
	background:pink;
}
.content_list .list_time a{
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(../img/images/icon_list_menu.png) no-repeat -120px -160px;
	float: left;
	margin-top: 5px;
	display: none;
}
.footer {
	width: 100%;
	height: 60px;
	background: green;
	position: absolute;
	left: 0;
	bottom: 0;
}

.footer .footer_in {
	width: 1200px;
	height: 100%;
	background: plum;
	margin: 0 auto;
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ音乐播放器</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery-3.4.1.min.js">

		</script>
		<script src="js/js/index.js">

		</script>
	</head>
	<body>
		<div class="header">
			<h1 class="logo"><a href="#"></a></h1>
			<ul class="register">
				<li>登录</li>
				<li>设置</li>
			</ul>
		</div>
		<div class="content">
			<div class="content_in">
				<div class="content_left">
					<div class="content_toolbar">
						<span><i></i>收藏</span>
						<span><i></i>添加到</span>
						<span><i></i>下载</span>
						<span><i></i>删除</span>
						<span><i></i>清空列表</span>
					</div>
					<div class="content_list">
						<ul>
							<li class="list_title">
								<div class="list_check">
									<i></i>
								</div>
								<div class="list_number">

								</div>
								<div class="list_name">
									歌曲
								</div>
								<div class="list_singer">
									歌手
								</div>
								<div class="list_time">
									时长
								</div>

							</li>
							<li class="list_music">
								<div class="list_check"><!--list_checked-->
									<i></i>
								</div>
								<div class="list_number">
									1
								</div>
								<div class="list_name">
									模仿名字
									<div class="list_menu">
										<a href="javascript:" title="播放"></a>
										<a href="javascript:" title="添加"></a>
										<a href="javascript:" title="下载"></a>
										<a href="javascript:" title="分享"></a>

									</div>
								</div>
								<div class="list_singer">
									歌手小崔
								</div>
								<div class="list_time">
									<span>66:66</span>
									<a href="javascript:" title="删除"></a>
								</div>

							</li>
							<li class="list_music">
								<div class="list_check">
									<i></i>
								</div>
								<div class="list_number">
									1
								</div>
								<div class="list_name">
									模仿名字
									<div class="list_menu">
										<a href="javascript:" title="播放"></a>
										<a href="javascript:" title="添加"></a>
										<a href="javascript:" title="下载"></a>
										<a href="javascript:" title="分享"></a>

									</div>
								</div>
								<div class="list_singer">
									歌手小崔
								</div>
								<div class="list_time">
									<span>66:66</span>
									<a href="javascript:" title="删除"></a>
								</div>

							</li>
							<li class="list_music">
								<div class="list_check">
									<i></i>
								</div>
								<div class="list_number">
									1
								</div>
								<div class="list_name">
									模仿名字
									<div class="list_menu">
										<a href="javascript:" title="播放"></a>
										<a href="javascript:" title="添加"></a>
										<a href="javascript:" title="下载"></a>
										<a href="javascript:" title="分享"></a>

									</div>
								</div>
								<div class="list_singer">
									歌手小崔
								</div>
								<div class="list_time">
									<span>66:66</span>
									<a href="javascript:" title="删除"></a>
								</div>

							</li>

						</ul>
					</div>
				</div>
				<div class="content_right">

				</div>
			</div>
			<div class="footer">
				<div class="footer_in">

				</div>
			</div>
		</div>
	</body>
</html>

js

$(function() {
	//1.监听歌曲的移入移出事件
	$(".list_music").hover(function() {
		//显示子菜单
		$(this).find(".list_menu").stop().fadeIn(100);
		$(this).find(".list_time a").stop().fadeIn(100);
		//隐藏时长
		$(this).find(".list_time span").stop().fadeOut(100);
	}, function() {
		//隐藏子菜单
		$(this).find(".list_menu").stop().fadeOut(100);
		$(this).find(".list_time a").stop().fadeOut(100);
		//显示时长
		$(this).find(".list_time span").stop().fadeIn(100);
	});
	//2监听复选框的点击事件
	$(".list_check").click(function(){
		$(this).toggleClass("list_checked");
	});
});

结束语

今天马上结束，这是今天敲的，话不多说，赶紧发表

是数学系的小孩儿
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
QQmusic imitations record 第二天
qq_51082388的博客
12-09 593
16天记住7000考研单词的文本（第七天）
firefox0123的专栏
02-24 2799
300. I overtake the undertaker who takes my stake by mistake.我追上那个误拿我赌注的承办人.16天记住7000考研单词的文本（第七天）301. The crying boy tries to fry the dry crystal.哭喊的男孩试图用油炸干晶体.302. In the chimney the donkey and monke
16天记住7000考研单词
热门推荐
幸福街--linux技术分享
03-08 1万+
16天记住7000考研单词(第一天) 1. With my own ears I clearly heard the heart beat of the nuclear bomb. 我亲耳清楚地听到原子弹的心脏的跳动。 2. Next year the bearded bear will bear a dear baby in the rear. 明年,长胡子的熊将在后方产一头可爱的小崽.
耗子叔ARTS：第七周
csdn_subaodong的博客
05-21 388
Algorithm: /** * 142. Linked List Cycle II * Medium * <p> * 1376 * <p> * 99 * <p> * Favorite * <p> * Share * Given a linked list, return the node whe...
第十四周课程学习
qq_51082388的博客
06-06 6062
今天实现效果 乱七八糟的代码，重新建的文件夹，然后写了改，改了写， <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度一下,你就知道</title> <style type="text/css"> .submit{ background-color:#3385ff; height:38px; font-siz
2021-11-13
qq_51082388的博客
11-13 812
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>入口函数</title> <script src="./jquery-3.4.1.min.js"> </script> <script > //第一这个写法 $(document).ready(function() { alert("你好").
网页开发记录
qq_51082388的博客
01-24 525
我想要他居中并且是楷体 在这里插入代码片 <h1 align="center"><font color="deeppink" face="楷体"size="7">创建浮动框架</font></h1> 换行： </br> 下划线： 加粗，下划线，斜体字也是常用的文字效果，它们分别用<b>,<u>,<i>表示： <b>Bold</b> <i>italic</i>
qqmusic record，布局完成
qq_51082388的博客
12-19 480
1.高斯模糊图片 值越小越不模糊，值越大越模糊 filter:blur(100px); 这个像素加px 2.让图片填满整个屏幕 background-size: cover; 3.让照片在最后边显示（注意：不要加px加习惯了，这个不需要加px） z-index: -2; 4淡灰色的遮罩 <div class="mask"> </div> .mask{ position: absolute; left: 0; top: 0; z-index: -1; widt
2021-11-16
qq_51082388的博客
11-16 374
jQuery对象是伪数组 静态方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>入口函数</title> <script src="./jquery-3.4.1.min.js"> </script> <script > //第一这个写法 $(document).ready(function()
前端学习第一次作业——by 小贾
qq_51082388的博客
05-08 332
今天做出来的效果耶耶耶，希望一直能有这种心境以及时间来这样学习。即使是菜，那又怎么样，做出来的菜好吃就行了呗 ，绿色健康，绿色营养，好符合bgcolor <!DOCTYPE html> <html> <head> <!--1给网页加一个标题。--> <meta charset="utf-8"> <title>《敲代码比算三重积分好玩》</title> </head> <body bg
2021-07-31前端学习放假两个星期总结（复习）
qq_51082388的博客
08-01 247
注：对于前端的学习进程有一段时间搁置了，再回过头去看发现好多自己都需要再温习，放假从泰安回来菏泽的感悟就是：学习就要去学习的场所，所以之后的假期能待在学校就不要回来。 JAVA SE 是C/S结构 是Client Server客户端 B/S 是浏览器Brower Server  客户端就是浏览器 服务器web (标注一下空格代码) 前端开发流程： 美术实现（网页设计师根据需求设计网页PS）——》前端工程师（前端工程师将设计做成静态网页HTML）——》java程序员（后台工程师将静态网页修改为动态网页JSP
第三次作业：仿造百度网页
qq_51082388的博客
06-05 244
<!DOCTYPR html> <html> <head> <title>百度一下，你就知道</title> <link rel="stylesheet" href="main.css" type="text/css"/> </head> <body> <div style="text-align:left"> <div class="menu"> <a h.
前端学习（第十三周课程）
qq_51082388的博客
05-30 193
这个星期是第十三周了，进入大一下学期之后不知道为啥没参加什么活动却天天感觉需要做很多的事情，生活真丰富，其实也没啥，不是在教室就是图书馆，回宿舍就是休息，可能对于学习投入的多了吧，不清楚。也可能是学习内容以及任务加重了。 这个星期对于前端的学习： 1.在哔哩哔哩上看网课，了解了解css,然而自己还需要加强对于CSS的动手能力，只是看看视频，理解理解原理是不够的，我认为这样也是学不会的，最后学明白之后还得定时定量的去进行复习。 2.小趣事：还和计算机一学长（此人并不深究前端）交流交流发现他们用Java写的
赶集网仿造2
qq_51082388的博客
09-04 172
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>赶集网，寻你所想</title> <link rel="stylesheet" href="../css/index.css"> <link rel="icon" href="/favicon.ico"> <base href="http://w
前端学习：HTML表格标签
qq_51082388的博客
05-18 153
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>just study</title> </head> <body bgcolor="darkgoldenrod"> <img src="../20210517Monday\default (1).jpeg" width="250" border="3" height="3
HTML超文本标记语言
qq_51082388的博客
05-01 148
#html html全称：Hyper Text Markup Language 超文本标记语言，感觉这个来源是根据特德功能以及应用来命名的，HTML本来就是一种文本，可是这种文本是需要经过特殊编译的，也就是说这一种文本是文本中特殊的一员，hyper text markup language。 它包括一系列标签，通过这些标签可以将分散的网络资源连接为一个逻辑整体，HTML命令包括图画、声音、表格、链接等，超文本对于我来说最早是在初中接触的，当时在学习PPT，word的时候，老师要求我们通过超级链接将别的地方的
面向对象1
qq_51082388的博客
10-31 143
面向对象： Date gerFullYear 不了解内部原理，会使用功能，知道操作 Array sort() 使用对象时，只关注对象提供的功能，不关注其内部细节， 面向对象编程OOP的特点 抽象：抓住核心问题 封装：不考虑内部实现，只考虑功能使用 继承：从已有对象上，继承出新的对象 多重继承（遗传） 多态 对象的组成： 方法：函数：过程、动态的 属性：变量：状态、静态的 1用对象 2写对象 this函数属于谁 object：没有功能 Date日期 Array存东西 RegExp正则 <!DOCTYPE
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 868
【代码】[css3] 如何设置边框颜色渐变。
CSS3 scale 适配
最新发布
m0_54007573的博客
07-24 539
CSS3 scale 适配
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是数学系的小孩儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值