基本概述

我创建的是静态页面

使用的是 html + css + bootstrap 的形式

大体上使用的是 bootstrap 所提供的模板，然后加以自己改动的 css 调整一些区域

 

开发过程

导航栏

首先我使用的是 bootstrap3 ，直接使用的生产环境打包的形式，没有使用 CDN，先将框架引入

x
    
    

    

    

        

            

            

            
<link rel="stylesheet" href="css/bootstrap.min.css">
        
        

            
<script src="js/jquery.min.js"></script>
        
        

            
<script src="js/bootstrap.min.js"></script>
        
    
    
    
    
    
    

    

    
    
    

首先考虑的应该是导航栏，因此使用了 bootstrap 中的 navbar navbar-default，即默认导航栏

xxxxxxxxxx
    
    

    

    

        

            

            

            
<nav class="navbar navbar-default">
        
    
    
    
    
    
    

    

    
    
    

接着定义了一个折叠按钮，适配了一下移动设备

x
    
    

    

    

        

            

            

            
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        
        

            
    <span class="icon-bar"></span>
        
        

            
    <span class="icon-bar"></span>
        
        

            
    <span class="icon-bar"></span>
        
        

            
</button>
        
    
    
    
    
    
    

    

    
    
    

使用了 bootstrap 中的导航栏按钮样式，且还有两个属性设置：

• data-toggle="collapse" : 定义了按钮的行为，即点击会展开或折叠相应的区域
• data-target=".navbar-collapse" : 定义了要被展开或者折叠的导航栏区域，.navbar-collapse 就是一个类选择器一样指定下面的导航列表

想具体说一下那个 zelda logo 是怎么做到突出来的，算是比较满意的效果，就是使用了一个超链接套图片的形式

x
    
    

    

    

        

            

            

            
<a href="" class="navbar-brand"><img alt="PC Partner Logo" width="200" height="70"
        
        

            
    src="./images/zelda_icon.png" style="margin-right:20px; height: 120px"></a>
        
    
    
    
    
    
    

    

    
    
    

其中：

• margin-right:20px; : 为了让右边和导航栏选项的间距稍稍大一点，看起来不会这么紧凑导致违和
• height: 120px : 则是将图片下拉使得还原本来的缩放效果

导航栏那几个选项我觉得没有什么说的，就是无序列表嵌入超链接即可

 

在导航栏之中，我自己也设置了一点 css 样式，在 index.css 当中：

xxxxxxxxxx
    
    

    

    

        

            

            

            
.navbar {
        
        
    margin-bottom: 0;
        
    border-bottom: 1px solid;
        
​
        
    border: rgb(90, 129, 80);
        
}
        
​
        
.navbar-default {
        

            
    background-color: rgb(90, 129, 80);
        
        
    max-width: 1300px;
        
    margin: auto;
        
}
    
    
    
    
    
    

    

    
    
    

简单设置了一下背景色，和最大宽度，再使用 margin : auto 居中一下。

再设置了一下悬停时字体的颜色变化。

.navbar-default .navbar-nav>li>a:hover {
    
    
    color: #fff;
    
}
    
    
    
    
    
    

    

    
    
    

主体部分

主体部分我主要使用了两个 div 来定义两个不同样式的主体部分，也就是图片在左和图片在右的形式交相重叠

大体上是使用了 bootstrap 的 col-md-x 设置了一下某个 div 占据的区块列宽度，使用这样的方式完成排版，还使用了 wow fadeIn 的动画来实现淡入淡出，但是很可惜，当时设置了之后发现一点效果都没有，查阅文档之后出知道要引入 animate.css 和 wow.min.js ，并且还要在 body 末尾加载初始化一下 wow 库，这个问题算是我在开发时粗心大意看别人博客“抄”模板名引起的，还得是要翻阅官方文档。

而每段话我是使用了一个 p 嵌套 span ，使得段落和图标更加统一，得益于 bootstrap 的便利，可以直接使用 Glyphicons 字体图标。

 

接着遇到了一个问题，我一个 div 里面有贴紧的两张图，如何使其中间留一点空隙出来。首先想到的肯定是自定义 css ，下面那张图片设置一下 margin-bottom 即可，例如：

x
    
    

    

    

        

            

            

            
<div>
        
        

            
  <img src="images/image1.jpg" alt="">
        
        

            
  <img src="images/.jpg" alt="" style="margin-bottom: 20px;">
        
        

            
</div>
        
    
    
    
    
    
    

    

    
    
    

但当时我用了一个很笨且很物理的办法：将第二张图重新截图上面留白放进去。很笨且暴力，现在想想真的不是很妥当。

 

造好了两个图片在左或者右的 div 时，后面的都是照猫画虎改改内容了，也算是造轮子了。

 

总结

这是我第一次一个人做完了静态页面，也算满足了作业基本的要求吧。从中也摸索出了一些东西，不过自己写原生 css 真的就如同写汇编一样，而且并不好维护什么的。bootstrap 在现在看来可能都算一个有点老式的框架了吧，不过我还是从中学到了很多，其使用编写类选择器来封装这么多的模板样式，和我们平时写高级语言封装函数轮子也有异曲同工之妙。可能是我这次做得还是很简单，遇到的问题都一一解决了，看别人博客，官方文档，亦或是问 GPT ，也算是间接又锻炼了信息检索能力。并且能做出自己的静态网页（样式还算看得过去），主题也是我最喜欢的游戏塞尔达传说系列，编写页面途中也是查找了一些视频和文章的资料。成就感还是很足的，从这门课中学到的知识，我觉得对我以后魔改自己的 hexo 博客应该也有一定的用处吧。