关于学习
自上次写博客已过了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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/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 know
what 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>-----------------2018-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>-----------------2018-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>-----------------2018-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>-----------------2018-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>-----------------2018-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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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("展开");
}
});
});
目前就这么多内容。有什么不足的望指出。
学习展望：往动态网站方面发展，做好成品再来完善博客。
如果有跟我一样的初学者参考，觉得这上面看的麻烦，我把工程传到这里你们下载吧：
https://download.csdn.net/download/weixin_43388844/10837754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
