Question

我有一个我想改变的网站。现在它看起来并不好看。我真的想要3列页脚。我的页脚是这样的。

<div class="fl_r">
    <ul>
        <li><a href="<?php echo main_url(demo_URL)?>"><?php echo lang('Member <span class="fg_demi">Area</span>')?></a></li>
        <li><a href="<?php echo main_url(demo2_URL . '/register')?>" id="become_member"><?php echo lang('Members <span class="fg_demi">wanted</span>')?></a></li>
        <li><a href="<?php echo main_url(demo3_URL)?>"><?php echo lang('Member2 <span class="fg_demi">Area</span>')?></a></li>
        <li><a href="<?php echo main_url(demo4_URL)?>"><?php echo lang('Affiliates <span class="fg_demi">Area</span>')?></a></li>
    </ul>
    <div class="links">
        <a href="<?php echo main_url('documents/2257')?>"><?php echo lang('18 U.S.C 2257')?></a>
        &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="<?php echo main_url('documents/policy')?>"><?php echo lang('Privacy policy')?></a>
        &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="<?php echo main_url('documents/tos')?>"><?php echo lang('Terms & conditions')?></a>
        &nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="<?php echo main_url('contact')?>"><?php echo lang('Contact us')?></a>
    </div>
</div>

我的CSS看起来像我的页脚。

＆＃13;

#footer{
	width: 986px;
	margin:-65px auto 0px;
	position: relative;
	text-align: center;
	height:85px;
	border: 1px solid #000000;
    -webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius:  10px 10px 0px 0px;
    border-radius:  10px 10px 0px 0px;
	background: #3c3c3c; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNjM2MzYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNTE1MTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #3c3c3c 0%, #151515 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c3c3c), color-stop(100%,#151515)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #3c3c3c 0%,#151515 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #3c3c3c 0%,#151515 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #3c3c3c 0%,#151515 100%); /* IE10+ */
	background: linear-gradient(top,  #3c3c3c 0%,#151515 100%); /* W3C */
	-pie-background: linear-gradient(top, #3c3c3c 0%, #151515 100%);
	color: #fff;
	z-index:11;
    behavior: url(/style/css/pie/PIE.htc);

}

#footer .bl {
    background-position: -4px -219px;
    bottom: 0;
    display: block;
    height: 14px;
    left: -19px;
    position: absolute;
    width: 19px;
}

#footer .br{
	background-position: -23px -219px;
    bottom: 0;
    display: block;
    height: 14px;
    right: -19px;
    position: absolute;
    width: 19px
}

#footer a{
	color: #ffffff;
}

#footer .logo{
	font-size:30px;
	padding: 0px 30px 0px 30px;
}

#footer .copyright{
	font-size:11px;
	color: #666;
	font-weight: normal;
	text-align: center;
    width:300px;
    padding:0px 10px;
}

#footer .fl_r{
	text-align: right;
}

#footer ul{
	display:inlin-block;
	list-style: none;
}
#footer ul li{
	color: #CCCCCC;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    padding: 0 10px;
	text-transform: capitalize;
}

#footer ul li a{
	color: #CCCCCC;
}

#footer ul li a .fg_demi{
	font-size:16px;
}

#footer ul li a:hover,
#footer .links a:hover{
	color: #ff1d23;
}

#footer .links a{
	color: #666666;
	text-transform: capitalize;
}

#footer .links{
	margin-right: 10px;
	font-weight: normal;
	font-size: 11px;
	color: #666666;
}
#footer #langs{
	margin:3px;
}

＆＃13;

任何人都可以帮助我让我的页脚有一些更独特的外观。我不太擅长这个，所以我希望这里有一些例子。请举例说明我如何做到这一点简单而好。谢谢！

Answer 1

请查看以下小提琴！

＆＃13;

* {
  font-family: 'Segoe UI';
}

footer {
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
}

footer .col3 {
  width: 32%;
  background-color: #ccf;
  border: 1px solid #ccc;
  display: inline-block;
}

＆＃13;

<footer>
  <div class="col3">Left</div>
  <div class="col3">Center</div>
  <div class="col3">Right</div>
</footer>

＆＃13;

如何使我的页脚3列？

1 个答案: