html+css+js网页设计 个人博客模版 我的学习经历7个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
html+css+js网页设计 个人博客模版 我的学习经历7个页面网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
·
html+css+js网页设计 个人博客模版 我的学习经历7个页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js
网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站 https://download.csdn.net/download/qq_42431718/89687940
2，点击上方下载
目录1
项目视频
html+css+js网页设计 个人博客模版 7个页面
页面1
页面2
页面3
页面4
页面5
页面6
页面7
代码展示
<body>
<!-- Start your project here-->
<!-- Main navigation -->
<header id="home">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
<div class="container">
<a class="navbar-brand" href="index.html">我的教育经历</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#home"
>Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="primary.html">小学</a>
</li>
<li class="nav-item">
<a class="nav-link" href="junior.html">初中</a>
</li>
<li class="nav-item">
<a class="nav-link" href="senior.html">高中</a>
</li>
<li class="nav-item">
<a class="nav-link" href="senior4.html">高四</a>
</li>
<li class="nav-item">
<a class="nav-link" href="university.html">大学</a>
</li>
<li class="nav-item">
<a class="nav-link" href="ending.html">Ending</a>
</li>
</ul>
<!-- Social Icon -->
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-facebook-f light-green-text-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-twitter light-green-text-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link">
<i class="fab fa-instagram light-green-text-2"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Full Page Intro -->
<div class="view">
<video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsinline autoplay muted loop>
<source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4" />
</video>
<!-- Mask & flexbox options-->
<div class="mask rgba-gradient d-flex justify-content-center align-items-center">
<!-- Content -->
<div class="container px-md-3 px-sm-0">
<!--Grid row-->
<div class="row wow fadeIn">
<!--Grid column-->
<div class="col-md-12 mb-4 white-text text-center wow fadeIn">
<h3 class="display-3 font-weight-bold white-text mb-0 pt-md-5 pt-5">学习</h3>
<hr class="hr-light my-4 w-75" />
<h4 class="subtext-header mt-2 mb-4">不应该复杂和痛苦，而应简单和快乐！ ------棋歌</h4>
<a href="#about" data-offset="90" class="btn btn-rounded btn-outline-white smooth-scroll"> <i class="fas fa-home"></i> Visit me </a>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Content -->
</div>
<!-- Mask & flexbox options-->
</div>
<!-- Full Page Intro -->
</header>
<!--Main layout-->
<!-- main -->
<main>
<div class="container" id="about">
<!--Grid row 1-->
<div class="row" style="margin-top: 20px">
<!--Grid column-->
<div class="col-lg-4 col-md-12">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="./img/myimg/xx/xx4.jpg" class="card-img-top" alt="" />
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">小学</h4>
<!--Text-->
<p class="card-text">余则缊袍敝衣处其间，略无慕艳意。以中有足乐者，不知口体之奉不若人也。</p>
<a href="primary.html" class="btn btn-purple">visit</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="./img/myimg/cz/cz20.jpg" class="card-img-top" alt="" />
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">初中</h4>
<!--Text-->
<p class="card-text">形象高于一切，学习只是一时热血。喜欢简单的人，也喜欢简单的事。</p>
<a href="junior.html" class="btn btn-purple">visit</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="./img/myimg/gz/gz31.jpg" class="card-img-top" alt="" />
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">高中</h4>
<!--Text-->
<p class="card-text">世界上最近的距离：放假到开学；世界上最远的距离：开学到放假。</p>
<a href="senior.html" class="btn btn-purple">visit</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row 2-->
<div class="row" style="margin-top: 20px">
<!--Grid column-->
<div class="col-lg-4 col-md-12">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="./img/myimg/gz4/gz430.jpg" class="card-img-top" alt="" />
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">高四</h4>
<!--Text-->
<p class="card-text">谁的青春不迷茫？我的也不列外。</p>
<a href="senior4.html" class="btn btn-purple">visit</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="./img/myimg/dx/dx27.jpg" class="card-img-top" alt="" />
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">大学</h4>
<!--Text-->
<p class="card-text">还是从前那个少年，只是逐渐成熟罢了。</p>
<a href="university.html" class="btn btn-purple">visit</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay">
<img src="./img/myimg/end1.webp" class="card-img-top" alt="" />
<img src="./img/myimg/end.gif" class="card-img-top" alt="" />
<a href="#">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">结业报告</h4>
<!--Text-->
<p class="card-text"></p>
<a href="ending.html" class="btn btn-purple">visit</a>
</div>
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
</div>
</main>
<!-- main -->
<!-- Footer -->
<footer class="page-footer font-small pt-4" style="background-color: #563e91">
<!-- Footer Elements -->
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fab fa-facebook-f"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fab fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fab fa-google-plus-g"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fab fa-linkedin-in"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fab fa-dribbble"> </i>
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">
© 2018 Copyright:
<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- End your project here-->
<!-- jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your custom scripts (optional) -->
<script type="text/javascript"></script>
</body>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
3
0- 0
已为社区贡献7条内容
所有评论(0)