当前很多web页面都有一个好看的页脚,如果你觉得直接写的页脚不好看,就看一下我的吧。
使用的是bootstarp巨幕组件拼接而成的,代码如下:
<div class="container-fluid" style="padding-top: 40px;">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="jumbotron">
<div class="container">
<center>
<p>Copyright© 2020 All Rights Reserved. </p>
<p>广西科技师范学院--数学与计算机科学学院理科楼实验室</p>
地址:来宾校区(主校区)来宾市铁北大道966号 邮编:546199 电话:0772-6620787
柳州校区(分校区)柳州市柳北区沙塘镇君武路170号
邮编:545004 电话:0772-2046337
</center>
</div>
</div>
</div>
</div>
</div>
- 样式 container-fluid 类是用于支持响应式布局的容器,与其同兄弟的还有container
- 它俩的区别是前者没有内边距,后者div 左右两边有一个15px的padding的内边距。更详细。。。。找其他吧。 在使用列时,先定义行
- row 类 然后就可以写我们的 列了(col-md-12
这个是把一行里面占多少比例的定义),然后就是巨幕组件了。不细讲,细讲也是复制粘贴给你。。。。 - 有解释错误的地方还请多多指教。多多包涵哈。页脚效果如下。。。
<div class="com-md-12" style="">
<div class="com-md-3"></div>
<div class="com-md-6" style="margin-top: 80px;" >
<div class="row">
<div class="col-md-12">
<a href=""><span><font size="2" color=""> 关于我们 </font></span></a><span><font size="1" color=""> | </font></span>
<a href=""><span><font size="2" color=""> 加入我们 </font></span></a><span><font size="1" color=""> | </font></span>
<a href=""><span><font size="2" color=""> 联系我们 </font></span></a>
</div>
<div class="col-md-12">
<font size="2" color="">
<center>
<p>Copyright© 2020 All Rights Reserved. </p>
<p>广西科技师范学院--数学与计算机科学学院理科楼实验室</p>
地址:来宾校区(主校区)来宾市铁北大道966号 邮编:546199 电话:0772-6620787
柳州校区(分校区)柳州市柳北区沙塘镇君武路170号
邮编:545004 电话:0772-2046337
</center>
</font>
</div>
</div>
</div>
<div class="com-md-3"></div>
</div>
页面效果: