卡其漫底部布局实现

221 阅读3分钟

前言:

在上一篇文章中我们一起学习了卡其漫画中间内容部分的布局,相信大家对于页面的布局有了一定的自己的体会了,那么接下来我们会继续将卡其漫画底部的布局给大家讲解

首先看看页面底部的效果:

从页面底部效果这里来看,我们是不是可以将页面底部先分成一个大块,我们可以看到这个底部这块的内容也是在页面的中间部分显示的啊。那么我们又得使用到版心这样的结构了。然后在将内容细分。那么细分为几块呢?其实我们从图上来看很好看出来的。可以分成五块。如下:

看到这样的效果,不知道大家有没有想起点什么呢?是不是像这样的信息展示我们又可以使用到无序列表啊。有没有很开心啊。又是使用我们熟悉的标签了。接下来一起看看代码如何实现这样的结构吧。

<footer class='footer content'>  <!--这里使用了一个footer标签,footer就是底部的意思,而这一块就是页面底部,在这里使用footer更加符合语义-->
    <ul>
        <li>
            <p>珠海布卡科技有限公司</p>
            <p>地址:珠海市香洲区夏美路161号(南厦丰泽园)2栋二层商铺234C</p>
        </li>
        <li>
            <p>客服:service@buka.cn</p>
            <p>投稿:td.sosobook.cn</p>
            <p>合作:bd@buka.cn</p>
        </li>
        <li>
            <p>电话:</p>
            <p>0756-3360306</p>
        </li>
        <li>
            ICP备案号:粤ICP备1234567号-1
        </li>
        <li>
            <span class="bkn"></span>
            <div class="qipao">
                <span class="arrow"></span>
                <p>沉迷娱乐伤身</p>
                <p> 合理安排时间</p>
                <p> 享受健康生活</p>
                <p> 适龄17岁以上</p>
            </div>
        </li>
    </ul>
</footer>

到此整个卡其漫画的首页在HTML布局结构上面已经完成了。从整个页面的结构上来看,大家有没有发现其实页面布局并没有什么逻辑性的东西啊。只是很多需要我们去记忆的东西啊。其实整个前端这一块在逻辑上都不是很难。倒是需要记忆的东西反而会更加多一些。对于需要记忆的东西,只要大家把代码多写几次,多用几次,其实就已经能够记住了。

HTML结构和标签方面的东西我们暂时说到这里,后续在视频中我们会更加详细的去讲解。大家一起努力哦!!!

偷偷剧透一下,接下来我们会去学习CSS相关的知识。现在整个页面的结构已经有了。那么要让这个页面更加的漂亮,那么就需要CSS登场了。后续文章会继续更新CSS相关的。敬请期待哦!!