<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 1000px;
margin: 10px auto;
}
ul li{
list-style: none;
margin-left: 5px;
margin-right: 5px;
padding: 10px;
line-height: 40px;
}
ul{
display: inline-block;
margin: 10;
}
ul li:nth-of-type{
font-size: 18px;
}
ul li:nth-of-type{
color: black;
}
ul li:nth-of-type{
color: black;
}
ul img{
border-radius:10px ;
}
ul:hover{
border: 1px solid grey;
border-radius:10px ;
box-shadow: 0 0 15px grey;
}
</style>
</head>
<body>
<div>
<h1>热播</h1>
<ul>
<li><img src="img/img1.png"/>
<li>神武赵子龙</li>
<li>怒，林更新不抱网红抱女神</li>
<li>点击次数：242445次</li>
</ul>
<ul>
<li><img src="img/img2.png"/>
<li>旋风十一人</li>
<li>胡歌变教练在撩前女友</li>
<li>点击次数：242445次</li>
</ul>
<ul>
<li><img src="img/img3.png"/>
<li>太阳的后裔</li>
<li>宋慧乔吃嫩草</li>
<li>点击次数：242445次</li>
</ul>
<ul>
<li><img src="img/img4.png"/>
<li>山海经之赤影传说</li>
<li>娜扎张翰再次联手</li>
<li>点击次数：242445次</li>
</ul>
</div>
</body>
<ml>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书简介</title>
body,h1,h2,h3,p,ul,li,dl,dt,dd,div,section{margin: 0;
padding: 0;}
body{
font-family: "微软雅黑";
font-size: 12px;
line-height: 28px;
}
#book{
margin: 5px auto 0 auto;
width: 650px;
overflow: hidden;
}
.imgLeft{
float:left;
width: 210px;
}
.imgLeft img{width: 200px;}
.textRight{
float: right;
width: 440px;
}
#book h1{font-size: 16px;
line-height: 50px;}
.textRight dl{padding-left: 5em;}
.textRight dl dd{display: none;}
#jdPrice p{ display:inline;}
</head>
<body>
<section id="book">
<div class="imgLeft"><img src="img/store.jpg" alt="岛上书店"></div>
<div class="textRight">
<h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
<p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
<p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
<div class="price">
<div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
<p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
<dl>
<dt>以下促销可在购物车任选其一</dt>
<dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
<dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
</dl>
<p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p>
</div>
</div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/book.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
#txt_show {display:none; color:#00C;}
#txt_hide {display:block; color:#F30;}
</style>
</head>
<body>
<p id="txt_hide">点击按钮，我会被隐藏哦~</p>
<p id="txt_show">隐藏的我，被显示了，嘿嘿^^</p>
<input name="show" type="button" value="显示隐藏的P元素" id="show"/>
<input name="hide" type="button" value="隐藏显示的P元素" id="hide" />
<script src="js/js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("p:hidden").show();
})
$("#hide").click(function(){
$("p:visible").hide();
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main{text-align:center; width: 1014px; margin: 0 auto;}
#adver{
position:absolute;
left:10px;
top:30px;
z-index:2;
}
</style>
</head>
<body>
<div id="adver"><img src="img/adv.jpg"/></div>
<div id="main"><img src="img/main1.JPG"/><img src="img/main2.JPG"/><img src="img/main3.JPG"/></div>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
var adverTop=parseInt($("#adver").css("top"));
var adverLeft=parseInt($("#adver").css("left"));
$(window).scroll(function(){
var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离
$("#adver").offset({top:scrollTop+adverTop});
$("#adver").offset({left:scrollLeft+adverLeft});
});
})
</script>
</body>
</html>
扫一扫
3240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
