关于学习
自上次写博客已过了1个月左右时间。当时刚看完html继续学习css中。
而现在也接触到了jquery的一些东西（虽然大佬们都说jquery已过时，不过拿来入手应该不错）。于是这一个月在学这些的同时跟着编写了一个漫威主题的静态网页，便于此拿出来分享。
PS：静态网页还没完善且很多不足之处，请各位大佬指出。写此篇博只为记录学习之程。
关于静态网页
这里就不多做赘述，先上一些页面的图（理工男审美）：
接下来是代码：
html中：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"><link rel="stylesheet" href="/releases/v5.3.1/css/all.css"><link rel="stylesheet" href="myBlog.css" type="text/css"><title>myBlog</title></head><body><!-- header start --><header class="header clearfix fixed-top myheader pt-0" id="header"><div class="container"><div class="row"><div class="col-md-auto d-none d-lg-block"><!-- header-first start --><div class="header-first clearfix"><!-- logo --><div class="logo" id="logo"><a href="myBlog.html"><img id="logo_img" src="logo.png" alt="myBlog" width="150px" height="auto"></a></div><!-- name-and-slogan --><div class="site-slogan" style="color:rgba(255, 255, 255, 0.5)">Some effort,Some gain!</div></div><!-- header-first end --></div><!-- header-second start --><div class="col-lg-7 ml-lg-auto"><div class="header-second clearfix"><nav class="navbar navbar-expand-lg navbar-dark pt-4"><div class="navbar-brand clearfix d-lg-none"><!-- logo --><div class="logo" id="logo-mobile"><a href="myBlog.html"><img id="logo_img-mobile" src="logo.png" alt="myBlog" width="150px"height="auto"></a></div><!-- name-and-slogan --><div class="site-slogan" style="color:rgba(255, 255, 255, 0.5)">Some effort,Some gain!</div></div><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myBlogNavbar"aria-controls="myBlogNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="sr-only">手机导航栏</span><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse " id="myBlogNavbar"><ul class="navbar-nav"><li class="nav-item active mynavli"><a href="#" class="nav-link mynavlia"aria-expanded="false">主页</a></li><li class="nav-item mynavli"><a href="#" class="nav-link mynavlia" aria-expanded="false">其他</a></li><li class="nav-item mynavli"><a href="#" class="nav-link mynavlia" aria-expanded="false">其他</a></li><li class="nav-item mynavli"><a href="#" class="nav-link mynavlia" aria-expanded="false">其他</a></li><li class="nav-item mynavli"><a href="#" class="nav-link mynavlia" aria-expanded="false">其他</a></li></ul></div></nav></div></div></div></div></header><!-- header's background --><div class="banner clearfix"><div class="divbgimg"><div class="mynullplace"></div><div class="d-none d-lg-block"><img src="img/0.jpg" class="img-responsive" width="100%" height="auto"></div><div class="d-lg-none"><img src="img/1).jpg" class="img-responsive" width="100%" height="auto"></div></div></div><!-- 中间展示框 --><section class="midsection"><div class="container"><div class="row"><div class="col-12"><div class="mymidcontain"><h1 class="text-center pt-5 text-light">This's is a marvel themed blog</h1><div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1px; margin: 40px;"></div><h3 class="text-center text-light">Do you konw any marvel's superheroes? Since I don't knowwhat to put here,I will introduce some characters first!</h3><div class="d-flex flex-wrap m-3"><div class="card mr-auto ml-auto mb-3" style="width:330px;"><img src="img/deadpool.jpg" alt="Deadpool" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">死侍</h4><p class="card-text blockquote-footer">当你的生活变成一堆屎的时候，通常都是因为你当时做的傻逼决定。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3" style="width:330px;"><img src="img/Wolverine.jpg" alt="Wolverine" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">狼叔</h4><p class="card-text blockquote-footer">“你拼命喝酒是为了忘掉过去吗？”<br>“不，我只想重拾回忆。”</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3" style="width:330px;"><img src="img/Thor.jpg" alt="Thor" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">雷神</h4><p class="card-text blockquote-footer">那些你一笑就跟著笑的人，如果不傻，那就是爱你的人了。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Vision.jpg" alt="Vision" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">幻视</h4><p class="card-text blockquote-footer">没事，你不会伤害到我的。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Captain.jpg" alt="Captain America" width="100%" height="auto"class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">美队</h4><p class="card-text blockquote-footer">只有弱小的人，才懂得力量的可贵！</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Iron Man.jpg" alt="Iron Man" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">钢铁侠</h4><p class="card-text blockquote-footer">很多词能形容我 怀旧可不在其中。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Quicksilver.jpg" alt="Quicksilver" width="100%" height="auto"class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">快银</h4><p class="card-text blockquote-footer">虽然我能跑得很快，但总有些时候我也赶不上。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Hawkeye.jpg" alt="Hawkeye" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">鹰眼</h4><p class="card-text blockquote-footer">我站在世界的顶点等你。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Scarlet Witch.jpg" alt="Scarlet Witch" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">绯红女巫</h4><p class="card-text blockquote-footer">再也没有变种人了！</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Hulk.jpg" alt="Hulk" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">浩克</h4><p class="card-text blockquote-footer">惹怒我，后果很严重！</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Black Widow.jpg" alt="Black Widow" width="100%" height="auto"class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">黑寡妇</h4><p class="card-text blockquote-footer">只有小孩子才谈情说爱。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div><div class="card mr-auto ml-auto mb-3 hidecon" style="width:330px;"><img src="img/Ant-Man.jpg" alt="Ant-Man" width="100%" height="auto" class="card-img-top img-responsive"><div class="card-body"><h4 class="card-title">蚁人</h4><p class="card-text blockquote-footer">我错过了太多时间，我想成为她生活的一部分。</p><a href="#" class="btn btn-danger">详细介绍</a></div></div></div><center><button type="button" class="btn btn-warning" id="zhankai">收起</button></center></div></div></div></div></section><br><!-- 下方笔记区 --><section class="bottomsection"><div class="container aftercontain"><div class="row"><div class="col-12"><ul class="nav nav-tabs m-4"><li class="nav-item"><a href="#" class="nav-link text-light active">最新博文</a></li><li class="nav-item"><a href="#" class="nav-link disabled">其他想法</a></li></ul><ul class="m-4 ul_notecontain"><li class="p-4"><h3 class="mb-4">第一篇博客</h3><i><div class="fakeimg mr-3" style="float: left">图像</div>这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！</i><p style="margin-top:40px;"><span>帮我消消黑眼圈</span><span><small>------------------12-08-----------------</small></span><a href="#" class="btn btn-danger" style="float: right"></a></p></li><div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div><li class="p-4"><h3 class="mb-4">第二篇博客</h3><i><div class="fakeimg mr-3" style="float: left">图像</div>这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！</i><p style="margin-top:40px;"><span>帮我消消黑眼圈</span><span><small>------------------12-09-----------------</small></span><a href="#" class="btn btn-danger" style="float: right"></a></p></li><div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div><li class="p-4"><h3 class="mb-4">第三篇博客</h3><i><div class="fakeimg mr-3" style="float: left">图像</div>这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！</i><p style="margin-top:40px;"><span>帮我消消黑眼圈</span><span><small>------------------12-10-----------------</small></span><a href="#" class="btn btn-danger" style="float: right"></a></p></li><div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div><li class="p-4"><h3 class="mb-4">第四篇博客</h3><i><div class="fakeimg mr-3" style="float: left">图像</div>这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！</i><p style="margin-top:40px;"><span>帮我消消黑眼圈</span><span><small>------------------12-11-----------------</small></span><a href="#" class="btn btn-danger" style="float: right"></a></p></li><div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div><li class="p-4"><h3 class="mb-4">第五篇博客</h3><i><div class="fakeimg mr-3" style="float: left">图像</div>这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！这是一些博客内容！</i><p style="margin-top:40px;"><span>帮我消消黑眼圈</span><span><small>------------------12-12-----------------</small></span><a href="#" class="btn btn-danger" style="float: right"></a></p></li><div style="background:linear-gradient(to left,#2b0000,#530000,#2b0000);height:1px;"></div></ul></div></div></div></section><footer class="jumbotron text-center" style="margin-bottom:0px; background-color: #9b9000"><h1>底部区域</h1></footer><script src="/jquery/1.10.2/jquery.min.js"></script><script src="/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script><script src="/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script><script src="/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script><script src="myBlog.js" type="text/javascript"></script></body></html>
css中：
*{margin: 0;padding: 0;}html,body {width: 100%;height: 100%;background: #2b0000;}.myheader {background: black;background: -webkit-gradient(linear, 0 0, 0 bottom, from(#000000), to(transparent));background: -webkit-linear-gradient(#000000, transparent);background: -moz-linear-gradient(#000000, transparent);background: -ms-linear-gradient(#000000, transparent);background: -o-linear-gradient(#000000, transparent);background: linear-gradient(#000000, transparent);-pie-background: linear-gradient(#000000, transparent);transition: background 0.5s ease-in-out,padding 0.5s ease-in-out;}.movenav{background: #2b0000;opacity: 0.95;padding: 5px;transition: background 0.5s ease-in-out,padding 0.5s ease-in-out;}.mynavli:hover {background-color:#4b0000;border-radius: 5px;}.mynavlia {font-size: 20px;width: 110px;text-align: center;}.mynullplace {position: absolute;width: 100%;height: 100%;}.bgimg {display: table;position: absolute;}.mymidcontain {margin-top: -13%;background-color: rgba(56, 4, 0, 0.7);border: 2px solid rgba(46, 0, 0,0.7);border-radius: 15px;box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.7)}.bottomsection {background-color: #747523;}.aftercontain {background-color: #2b0000;}.active {background-color: #4b0000 !important;}.ul_notecontain {list-style-type: none;color: white;}.fakeimg {width: 150px;height: 120px;background-color: #aaa;}
js中：
$(window).scroll(function (){if($(".navbar").offset().top>30){$("header").addClass("movenav");}else{$("header").removeClass("movenav");}});$(document).ready(function(){$("#zhankai").click(function(){if($(this).text()=="展开"){$(".hidecon").show();$(this).text("收起");}else{$(".hidecon").hide();$(this).text("展开");}});});
目前就这么多内容。有什么不足的望指出。
学习展望：往动态网站方面发展，做好成品再来完善博客。
如果有跟我一样的初学者参考，觉得这上面看的麻烦，我把工程传到这里你们下载吧：
/download/weixin_43388844/10837754
