|
发表于 2020-4-28 15:32:33
|
显示全部楼层
本帖最后由 小脑斧 于 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>
复制代码
|
|