html5 - 脚部布局和CSS布局问题。
本文介绍了html5 - 脚部布局和CSS布局问题。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
小白初学 这个网页脚部布局一直写不好,所以来这上面求救,希望各位大神帮忙解决一下谢谢。
这是我写的HTML的布局 css没有写好 这里就不贴上来了。
如果可以的话 希望大神帮忙把HTML布局和CSS布局写一下 作个参考谢谢。
div class="footer_wrap">
<div class="footer">
<ul class="text">
<li>公司电话:0731-5815220 公司传真:4515-585585845</li>
<li>公司地址:湖南省长沙市南门口186号<li>
<li>粤府新函[2001]87号 网络视听许可证1924057号<li>
<li>国际质量监督举报电话:0755-83767606<li>
<li>Copyrght @ 1998-2016 Tencent. All Rights Reservd<li>
</ul>
<ul class="beijing">
<li><img src="img/erweima.png"></li>
<li>扫一扫</li>
</ul>
</div>
</div>
解决方案
html
<div class="footer">
<div class="container">
<ul class="text">
<li>公司电话:0731-5815220 公司传真:4515-585585845</li>
<li>公司地址:湖南省长沙市南门口186号</li>
<li>粤府新函[2001]87号 网络视听许可证1924057号</li>
<li>国际质量监督举报电话:0755-83767606</li>
<li>Copyrght @ 1998-2016 Tencent. All Rights Reservd</li>
<li>Copyrght @ 1998-2016 Tencent. All Rights Reservd</li>
</ul>
<div class="qr_code">
<img src="http://placehold.it/120x120">
<p>扫一扫</p>
</div>
<div class="clear"></div>
</div>
</div>
css
*{margin: 0;padding: 0;list-style: none;}
body{font-family: "微软雅黑";font-size: 14px;min-width: 1000px;}
.container{width: 1000px;margin: 0 auto;position:relative;}
.footer{width: 100%;background: #686868;color: #ffffff;padding: 30px 0}
.text{float: left;width: 600px;}
.text li{line-height: 30px;}
.clear{clear: both;}
.qr_code{width: 120px;text-align: center;position: absolute;top: 50%;height:145px;margin-top:-72px;right: 0}
效果
这篇关于html5 - 脚部布局和CSS布局问题。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文