关于学习

自上次写博客已过了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 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>-----------------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

# 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写（漫威主题个人博客）相关推荐

用HTML CSS JS 实现一个工作招聘平台展示响应式网站
主页:搞前端的半夏简介:前端领域优质创作者.扫码或搜索添加文末公众号「搞前端的半夏」:
web前端基础html,css,js,jquery
目录 1 前端技术: 1.1 学习方法 1.1.1 前端要怎么学? 1.1.2 前端技术栈 1.2 HBuilderX 1.2.1 介绍 1.2.2 安装 1.2.3 主题 1.2.4 字体 1.2. ...
前端资源（css,js,图片,接口等）加载过程
查看前端各资源css,js,图片,接口等加载速度前言查看前端各资源加载速度加载过程中各指标详解前言网页打开的速度快慢直接影响了用户体验.据统计,Google网站访问速度每慢400ms就导致用 ...
学生DW网页设计作业成品 HTML+CSS+JS大作业——汽车设备营销企业模板(13页) 静态HTML网页设计模板
HTML+CSS+JS大作业--汽车设备营销企业模板(13页) 静态HTML网页设计模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作
HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...
ECSHOP中transport.js和jquery的冲突的简单解决办法
ECSHOP中transport.js和jquery的冲突的简单解决办法一流资源网近日在ECSHOP网站加入了几个JS特效代码,在谷歌.火狐下正常,在各版本IE下都不常,左思不得其解. 最后才知道原 ...
HTML+CSS+JS大作业——汽车设备营销企业模板(13页) 静态HTML网页设计模板
HTML+CSS+JS大作业--汽车设备营销企业模板(13页) 静态HTML网页设计模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
DW静态网页设计与制作 JavaScript大作业 HTML静态网页作业——海贼王主题网页设计制作6个页面(HTML+CSS)
HTML静态网页作业--海贼王主题网页设计制作6个页面(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合 ...
HTML5期末大作业：旅游网站设计——简单大气的响应式旅游网页(5页) HTML+CSS+JavaScript...
HTML5期末大作业:旅游网站设计--简单大气的响应式旅游网页(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页 ...

# 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写（漫威主题个人博客）

关于学习

关于静态网页

这里就不多做赘述，先上一些页面的图（理工男审美）：

html中：

css中：

js中：

学习展望：往动态网站方面发展，做好成品再来完善博客。

# 前端初学html+css+js+bootstrap4+jquery部分后的简单响应式静态网页编写（漫威主题个人博客）相关推荐

最新文章

热门文章