让图片横向布局且间距为16px,左右两端边距为0
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*
所有图片横向布局 10'
图片之间的间隔为16px 10'
第一张图片的左边距为0 10'
最后一张图片的右边距为0 10'
*/
body {
background-color: cornsilk;
width: 1200px;
margin: 0 auto;
/* margin: 0; */
padding: 0;
}
body>img {
width: 100%;
}
.content {
border: 1px solid red;
height: 174px;
}
.content ul li{
list-style: none;
float: left;
margin-right: 15.7px;
}
.content ul li:last-child{
margin: 0;
}
.content ul li img{
display: block;
padding-top: 19.35px;
}
.content .img8{
padding-left: 0;
}
/* 在这里填写css代码 */
</style>
</head>
HTML代码
<body>
<img src="img/res.png">
<div class="content">
<ul class="imgs">
<li><img src="img/toplist_a01.jpg" ></li>
<li><img src="img/toplist_a02.jpg" ></li>
<li><img src="img/toplist_a03.jpg" ></li>
<li><img src="img/toplist_a04.jpg" ></li>
<li><img src="img/toplist_a05.jpg" ></li>
<li><img src="img/toplist_a06.jpg" ></li>
<li><img src="img/toplist_a07.jpg" ></li>
<li class="img8"><img src="img/toplist_a08.jpg" ></li>
</ul>
</div>
</body>
当鼠标移入页面小图时，在鼠标右侧展示对应大图
jQuery代码
window.onload=function(){
var img=document.querySelectorAll(".small");
var big=document.querySelector(".big");
for (var i = 0; i < img.length; i++) {
img[i].onmousemove=function(e){
big.style.top=e.y+10+"px";
big.style.left=e.x+10+"px";
big.src=this.src;
}
img[i].onmouseout=function(){
big.style.display="none";
}
img[i].onmouseenter=function(){
big.style.display="block";
}
}
}
第三题
// 删除当前行（要有提示）
$(function(){
$("button").click(function(){
alert("您确定要删除编号为1001的商品?");
$("tbody>tr:first").remove();
})
})
// 全选/全不选
$(function(){
$("#chkAll").change(function(){
var chk1=$(this).prop("checked")
$(":checkbox").prop("checked",chk1)
})
})
// 数据行复选框
$(function(){
$(":checkbox").change(function(){
var i= 0
var y= 0
$(":checkbox:not([id])").each(function(index,item){
var ck =$(item).prop("checked");
if(ck){
i++;
y += parseInt($(item).closest("tr").children().eq(3).text())
}
})
$(".money").text(y);
$(".count").text(i);
})
})
浙公网安备 33010602011771号