bootstarp页脚代码

当前很多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&nbsp;&nbsp;&nbsp; 电话: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="">&nbsp;关于我们&nbsp;</font></span></a><span><font size="1" color=""> | </font></span>
						<a href=""><span><font size="2" color="">&nbsp;加入我们&nbsp;</font></span></a><span><font size="1" color=""> | </font></span>
						<a href=""><span><font size="2" color="">&nbsp;联系我们&nbsp;</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&nbsp;&nbsp;&nbsp; 电话:0772-6620787
								 柳州校区(分校区)柳州市柳北区沙塘镇君武路170号
								邮编:545004 电话:0772-2046337
							</center>
						</font>
					</div>
				</div>
			</div>
			<div class="com-md-3"></div>
		</div>

页面效果:
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值