学成在线网站知识分享

学成在线网站知识分享

学成在线网站是一个比较基础的网页布局，让刚刚学习前端的人通过使用工具测量大小，裁剪图片，使用盒子定位布局，利用浮动放置浮动盒子等各种知识点都会使用到。各大教学网站也会使用这个案例来教学基础的布局，接下来让我们来看看学成在线网站的网页布局吧

---

提示：本篇只提供思路和部分代码注意情况，数据请使用PS等工具实地采样

---

前言

我们知道网页的布局是由大量的盒子放置，嵌套，浮动来布局的，可以将整个网页分成头部，内容的区分和底部三个大的组成部分。我可以分享我对于这三个大的模块需要注意的一些情况以及大概可以通过哪些代码实现这些效果

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、整体布局的查看

我们要开始学成在线的网站布局规划，首先要分析他应该用什么方式去布局，可以满足我们需要网页实现效果的布局，通过观察头部，内容，底部，以及内容里的样式的布局来分析。

例如：B站的网页是如何布局的，我们首先看一看它的网页是什么样子

---

这是图片的顶部

用边框去区分它们的盒子是如何嵌套的，比如头部

通过这样的方式，将网页的布局看成一个一个的盒子相互嵌套起来的划分，从这里我们看到，头部由一个背景板，一个头顶的导航栏，搜索栏，用户栏属性来编写，其中导航栏需要左浮动，搜索栏需要左浮动，用户栏可以使用左浮动或者右浮动实现。我们也可以将下面的内容按照一样的方式去划分，比如内容我可以这样划分：

可以看到内容的板块也可以通过标准流中分上下两个大盒子，盒子里再做左右浮动的调整。因此我们也可以同样用相同的方式去划分我们的学成在线网站的知识分析，接下来让我们看一看学成在线网站的页面：

我们仍然可以使用一样的方式去划分这个网页布局，这里示范一部分的划分情况，剩下的可以自己尝试去划分看看：

---

二、需要注意的问题

1.logo的截取

一般的网站会有专门的设计师或者外包的设计师去设计logo，之后交付给前端工作人员来使用放进网站，而通常设计好的都是psd文件，因此要学会使用PS来截取图片，可以使用PS里面一些优秀的插件来实现快速截取导出图片的效果。这里推荐使用Cutterman这个插件，怎么使用可以自己去查询。

http://www.cutterman.cn/zh（这是官方网站）

使用的过程中记住图片的logo需要使用png的方式去保留透明的背景板，否则留下来的logo就是不符合要求的logo图片

---

2.盒子的宽高和边距

我们知道我们的网页在布局使用，所需要的宽度和高度是不一样的，有的就是整个网页的宽度和高度，有的则需要一些特定的高度和宽度，这里需要注意有的网页的主体内容因为会放入大量的盒子，所以这里会选择只设置宽度，剩下的盒子则用内容直接撑大盒子来达到需要的效果。

当我们需要把盒子居中固定位置，除了对body使用center的效果之外，也可以通过调整外边距来实现这个效果，比如banner的板块内容可以这么做：

  .w {
      width: 1200px;
      margin: auto;
  }
  .banner {
      height: 421px;
      background-color: #1c036c;
  }
  
  .banner .w {
      height: 421px;
      background: url(images/banner2.png) no-repeat top center;
  }

可以先给整体设置一个宽度，然后让其他的板块直接使用w类选择器所定义的宽度，使用margin：auto自动对齐网页的布局，之后只需要设置高度就可以实现需要的效果。

---

3.精品模块的宽度

观察精品推荐模块，是属于用盒子撑开的模块，内部的十个小版块基本都是用无序列表制作的，但是在设置的时候，一般是通过把盒子挤下去的方式来实现两排五个的排序，但是如果设置了margin，就会把盒子挤下去。
例如：

    <style>
        .box {
            width: 500px;
        }
        
        li {
            list-style: none;
        }
        
        .box ul li a {
            float: left;
            width: 100px;
            height: 200px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: aqua;
        }
    </style>

    <div>
        <div class="box">
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>

一般遇到这种情况的时候，只需要加宽这个盒子的实际宽度，我们就可以解决这个问题。一般溢出的部分不会对盒子整体产生影响，而实际页面里面溢出的margin不会影响观感。因此使用这样的方法不会带来需要调整其他数值带来的各种麻烦，也可以轻松的实现所需要的网页布局效果

    .box {
            width: 600px;
        }
     
    li {
            list-style: none;
        }
        
        .box ul li a {
            float: left;
            width: 100px;
            height: 200px;
            margin-right: 10px;
            background-color: aqua;
        }

---

3.浮动的问题

之前说到一般拥有大量盒子的父盒子不会去设置高度，而是通过子盒子来撑大父盒子，而子盒子通常用到的浮动效果会非常多，这个效果往往会带来一些高度塌陷的问题，这一类问题可以参考我的上一篇博客：如何解决高度塌陷的问题

除了遇到高度塌陷的问题之外，还有浮动的时候需要注意的一些小问题。一般在使用浮动的时候，有左浮动和右浮动，如果需要使用右浮动实现右侧对齐的效果，在使用无序列表的时候会出现第一个li从右边开始往后排序的问题，这个时候需要从新整理无需列表的内容来观察情况，又或者调整为左浮动，并且增加内/外边距的方式来改变位置。

    <style>
        .box {
            width: 600px;
        }
        
        li {
            list-style: none;
        }
        
        .box ul li a {
            float: right;
            width: 100px;
            height: 200px;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: aqua;
        }
    </style>

    <div>
        <div class="box">
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
                <li><a href="#">10</a></li>
            </ul>
        </div>
    </div>

---

三、总结

这里最后提示一个地方，在制作代码的时候，有很多代码是可以直接复制粘贴使用的，因为实际格式差距并不大。而这个时候需要注意自己书写代码的格式，切记看好代码的双标签是否出现重复，所用空格是否多出等等，缺失了双标签记得要去补充，将整体的代码有序的规范化，才能达到可以轻松去修改实际内容的效果。学成在线网站首页并不是非常困难的内容，只需要用心去观察网页布局，使用合适的代码去编写，就可以实现想要的效果。更多情况还是需要自己去动手制作，感谢你的观看。