会员可以在此提问,百战未来老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 135128个问题

老师,我这个京东的图标和搜索框的图标,运行完和视频里的不一样,我这个完全置右侧和左侧了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css"  href="css/jd.css" />

<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />

</head>

<body>

<!--导航开始-->

<div  class="nav">

<div class="warp">

<!--ul>li*2>a--> 

<ul class="nav_ul1">

<li><a href=""><i class="iconfont">&#xe6d3;</i>京东首页</a></li>

<li><a href="">配送到:北京</a></li>

</ul>

<!--ul>li*9>a-->

<ul>

<ul class="nav_ul2">

<li><a href="">洋洋宝贝</a><span>|</span></li>

<li><a href="">我的订单</a><span>|</span></li>

<li><a href="">我的京东</a><span>|</span></li>

<li><a href="">京东会员</a><span>|</span></li>

<li><a href="">企业采购</a><span>|</span></li>

<li><a href="">京东手机</a><span>|</span></li>

<li><a href="">关注京东</a><span>|</span></li>

<li><a href="">客户服务</a><span>|</span></li>

<li><a href="">网站导航</a></li>

</ul>

</ul>

</div>

</div>

<!--导航结束-->

<!--搜索框开始-->

<div class="search">

<div  class="wrap">

<img src="img/logo.jpg"/>

<div class="search_div">

<input  type="text"/>

<input type="button" value="搜索"/>

</div>

<!--搜索框结束-->

</body>

</html>


jd文件

.nav{

height: 30px;

background-color:#f1f1f1;

}



.warp{

width:1000px;

margin:0px  auto;

/*border:1px  solid red;*/

}

.nav_ul1,.nav_ul2 li{

float:left;

}

.nav_ul1 li{

float:left;

line-height: 30px;

margin-right: 20px;

}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{

font-size:12px;

color: gray;

}

.nav_ul2{

float:right;

}

.nav_ul2 li{

line-height:30px;

margin-left: 10px;

}

.nav a:hover{

color:red;

}

/*搜索框开始*/

.search{

margin-top: 20px;

}


.search img{

/*清除之前的样式*/

clear: both;

float:left;

}

/*搜索框结束*/

.search_div{

float: right;

}

image.png

JAVA 全系列/第五阶段:Web全栈开发基础与Vue/CSS3(旧) 361楼

老师,我这代码运行了 动画效果显示不出来



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.cen{

width:200px;

height:200px;

background-color:#d5093c ;

/*阴影   水平方向偏移  垂直方向偏移  模糊度   阴影的颜色*/

box-shadow: 0px 0px  70px #D5093C;

/*执行动画的调用*/

animation:1s aj ;

}

.lef{

/*倒圆角指令*/

border-radius:100px ;

/*左上右下  右上左下*/

/*border-radius:10px  60px ;*/

/*border-radius:10px 20px 30px 40px ;*/

position:absolute;

top:200px;

left:200px;

}

.rig{

border-radius: 100px;

position:absolute;

top:200px;

left:341px;

}

.c{

/*旋转角度*/

transform: rotate(45deg);

position:absolute;

top:269px;

left:271px;

}

/*div:hover{

/*放大的倍数*/

/*transform: scale(1.3);*/

/*X:水平的位移    Y:垂直的位移      负数:上*/

/* transfrom:translate(0px,-5px);*/

/*2D角度的旋转*/

/*transform:skew(40deg,45deg);*/

/*CSS3中的动画*/

@keyframes aj{

0%{transform: scale(1) rotate(45deg);}

50%{transform: scale(1.1) rotate(45deg);}

100%{transform: scale(1) rotate(45deg);}

</style>

</head>

<body>

<div   class="cen lef"></div>

<div   class="cen c"></div>

<div   class="cen rig"></div>

</body>

</html>

<!--

CSS3中常用的属性

/*倒圆角指令*/

border-radius:100px ;

/*左上右下  右上左下*/

/*border-radius:10px  60px ;*/

/*border-radius:10px 20px 30px 40px ;*/

/*旋转角度*/

transform: rotate(45deg);

/*放大的倍数*/

/*transform: scale(1.3);*/

/*X:水平的位移    Y:垂直的位移      负数:上*/

/* transfrom:translate(0px,-5px);*/

/*2D角度的旋转*/

/*阴影   水平方向偏移  垂直方向偏移  模糊度   阴影的颜色*/

box-shadow: 0px 0px  70px #D5093C;

-->


JAVA 全系列/第五阶段:Web全栈开发基础与Vue/CSS3(旧) 362楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/CSS3(旧) 363楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/HTML5(旧) 364楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/Jquery(旧) 365楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/HTML5(旧) 366楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/HTML5(旧) 368楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/Javascript 语言(旧) 370楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/HTML5(旧) 373楼
JAVA 全系列/第五阶段:Web全栈开发基础与Vue/HTML5(旧) 374楼

老师,请问为什么新增的行取消勾选后,全选项无法自动取消勾选?我自己写的和老师的案例也是这样,请问是哪里有问题?

$(function(){
	/*************全选***********************/
	$("#chks").click(function(){
		var flag = $("#chks").prop("checked");
		$("input[name='chk']").prop("checked",flag);
	})
	/*************判断是否全选*****************/
	$("input[name='chk']").click(function(){
		var flag = true;
		
		var ck = $("input[name='chk']");
		
		ck.each(function(){
			if(!$(this).prop("checked")){
				flag = false;
			}
		})
		$("#chks").prop("checked",flag);
	})
	/************反选*******************/
	$("#fx").click(function(){
		var chk = $("input[name='chk']");
		
		chk.each(function(){
			var flag = $(this).prop("checked");
			$(this).prop("checked",!flag);
			
		})
		flag1 = true;
		chk.each(function(){
			if(!$(this).prop("checked")){
				flag1 = false;
			}
		})
		$("#chks").prop("checked",flag1);
	})
	
	/************新增一行*********************/
	$("#addRow").click(function(){
		var tb = $("#ta");
		tb.append('<tr id="">'+
				'<td><input type="checkbox" name="chk" id="" value="2"/></td>'+
				'<td>《Java编程之道》</td>'+
				'<td>wollo</td>'+
				'<td>10</td>'+
			'</tr>')
	})
	
	/************删除行**********************/
	$("#delRow").click(function(){
		var ck = $("input[name=chk]:checked");
		if(ck.length==0){
			alert("请至少选择一行");
		}else{
			ck.parent().parent().remove();
		}
	})
	
	
	
	/***************复制行********************/
	$("#copyRow").click(function(){
		var ck = $("input[name='chk']:checked");
		var tb = $("#ta");
		if(ck.length==0){
			alert("请选择至少一行");
		}else{
			tb.append(ck.parent().parent().clone());
		}
		
	})
	
})


JAVA 全系列/第五阶段:Web全栈开发基础与Vue/Jquery(旧) 375楼

课程分类

百战未来微信公众号

百战未来微信小程序

©2014-2026百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637