本帖最后由 小脑斧 于 2020-4-28 15:35 编辑
打卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C工作室-悬浮回顶小三角</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-weight: 300;
}
body{
background:#c8ece3;
font-family: "华文中宋 ";
}
h1{
text-align: center;
font-size: 88px;
color: #ff76c8;
font-family: "PMingLiU";
margin: 66px auto 33px;/*上66 左右自动 下33*/
border-bottom: 3px solid rgba(0,0,0,.6);
text-transform: uppercase;/*全部大写*/
font-weight: 600;
}
#content{
padding: 11px 16px;
}
h2{
font-size: 43px;
color: rgba(195,9,87,.8);
}
p{
font-size: 22px;
line-height: 1.3;
margin-bottom: 33px;
}
img{
float: left;
margin-right: 22px;
padding: 22px;
border: 2px dotted rgba(0,0,0,.6);
background: rgba(0,0,0,.3);
}
img.right{/*区别设置<img class="right">*/
margin-left: 22px;
margin-right: 0;
float: right;
}
#top{
position: fixed;/*固定位置*/
z-index: 5555;/*悬浮在其他元素之上*/
right: 55px;
bottom: 55px;
padding-top: 33px;
text-align: center;
box-sizing: border-box;
width: 155px;
height: 77px;
background: rgba(133,105,172,.6);
border: 1px solid rgba(0,0,0,.6);
cursor: help;
opacity: 0;
transition: all 1.1s;
}
#top.show{
opacity: 1;
}
#top:after{
content: '';
width: 0;
height: 0;
position: absolute;
border-width: 16px;
border-style: solid;
border-color: transparent transparent aqua transparent;
top: 1px;
left: 60px;/*剧中*/
}
#nav{
height: 66px;
margin-bottom: 33px;
}
#page-nav{
text-align: center;
background: #E02562;
box-shadow: 1px 2px 5px rgba(0,0,0,.3);
}
#page-nav li{
list-style: none;
display: inline-block;
line-height: 66px;
width: 211px;
}
#page-nav li a{
color: #FFFFFF;
text-decoration: none;/*去除下划线*/
font-size: 22px;
}
#page-nav.fix{
width: 100%;;/*防止固定后，不能充满屏幕*/
position: fixed;
top: 0;/*top为0，固定在页面顶部。*/
}
</style>
</head>
<body>
<section id="content">
<article>
<h1>鱼C - 10周年盛典</h1>
<nav id="nav">
<ul id="page-nav">
<li><a href="">邀请函主页</a> </li>
<li><a href="">鱼C里程碑</a> </li>
<li><a href="">庆典计划</a> </li>
<li><a href="">小甲鱼的一封信</a> </li>
<li><a href=""> 未来计划</a> </li>
</ul>
</nav>
<img src="1.jpg">
<p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
</article>
<article>
<h2>让</h2>
<img src="2.jpg" class="right">
<p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
</article>
<article>
<h2>编程</h2>
<img src="3.jpg">
<p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
</article>
<article>
<h2>改变</h2>
<img src="4.jpg" class="right"><!--区别设置<img class="right">-->
<p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
</article>
<article>
<h2>世界</h2>
<img src="5.jpg">
<p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
</article>
<article>
<h2>Change the World By Program</h2>
<img src="6.jpg" class="right">
<p>破窗效应，是1982年，由美国政治学家威尔森和犯罪学家凯琳提出的。<br><br>它是指，如果有人打坏了一幢建筑的窗户玻璃，却没有人维修，经过的路人，就会像受到了暗示一样，被诱发打破更多的窗户。然后，这个街区其他建筑的窗户，也可能被打破。然后是其他街区。
其实这很好理解。<br><br>在干净的墙角，扔几张碎纸。过几个小时后你再去看，那个地方多半就有了一小堆垃圾。十几个行人在等红灯，只要有一两个人旁若无人地闯红灯过马路，后面很多人就会跟上，这就是所谓的中国式过马路：凑够一撮人就可以走了，和红绿灯无关。
无序，会邀请无序。混乱，会引发混乱。<br><br>“凭什么他可以，我就不行啊？”，“大家都这样，总不会有事吧？”在占便宜、做坏事上，寻求公平，这种心理，就是“畸形公平”的心理。所以，在第一扇破窗出现时，就必须立即修复。否则，当整个街区都出现混乱时，就积重难返了。</p>
</article>
</section>
<div id="top">我要上天！</div>
<!--JS位置：body-->
<script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>
<script type="text/javascript">
var pagenav = document.getElementById("page-nav") ;
var pagenav_top= pagenav.offsetTop;//??
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop;
//<=> var scrollTop = window.pageYOffset;
if (scrollTop < pagenav_top){
pagenav.className = "";
}else {
pagenav.className = "fix";
}
}
$(document).ready(function(){
$(window).scroll(function(){
nav = $(window).scrollTop();
if(nav > 666){
$('#top').addClass('show');
}
else{
$('#top').removeClass('show');
}
});
$('#top').click(function(){
$('body,html').animate({scrollTop:0},1000);
});
});
</script>
</body>
</html>
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-3-27 15:47:14
置顶卡
千斤顶
显身卡
发表于 2017-3-28 13:36:00
楼主
发表于 2017-4-1 16:53:52
百度了一下好像是dtd问题(不懂
)，不过改成document.documentelement.scroll就好了。