前言:
在上一篇文章中我们一起学习了卡其漫画中间内容部分的布局,相信大家对于页面的布局有了一定的自己的体会了,那么接下来我们会继续将卡其漫画底部的布局给大家讲解
首先看看页面底部的效果:
从页面底部效果这里来看,我们是不是可以将页面底部先分成一个大块,我们可以看到这个底部这块的内容也是在页面的中间部分显示的啊。那么我们又得使用到版心这样的结构了。然后在将内容细分。那么细分为几块呢?其实我们从图上来看很好看出来的。可以分成五块。如下:
看到这样的效果,不知道大家有没有想起点什么呢?是不是像这样的信息展示我们又可以使用到无序列表啊。有没有很开心啊。又是使用我们熟悉的标签了。接下来一起看看代码如何实现这样的结构吧。
<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相关的。敬请期待哦!!