首页 > 代码库 > 第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
html5+css3pc端固定布局,底部区域,说明区域,版权区域
完成:
HTML代码:
<!--尾部--> <footer class="wei-bu"> <div class="wei-bu2"> <div class="yy dd1"> <h2>合作伙伴</h2> <hr> <ul> <li>途牛旅游网</li> <li>驴妈妈旅游网</li> <li>携程旅游</li> <li>中国青年旅行社</li> </ul> </div> <div class="yy dd1"> <h2>旅游FAQ</h2> <hr> <ul> <li>旅游合同签订方式?</li> <li>儿童价是基于什么制定的?</li> <li>旅游的线路品质怎么界定的?</li> <li>单房差是什么?</li> <li>旅游保险有那些种类?</li> </ul> </div> <div class="yy dd1"> <h2>联系方式</h2> <hr> <ul> <li>微博:weibo.com/ycku</li> <li>邮件:ycku@ycku.com</li> <li>地址:江苏盐城无名路123号</li> </ul> </div> </div> <div class="ban-quan"> <p>Copyright ? YCKU 瓢城旅行社 | 苏ICP备120110119号 | 旅行社经营许可证:L-YC-BK12345</p> </div>
css代码:
/*尾部*/ .wei-bu{ height: 360px; background-color: #222222; margin: 20px 0 0 0; } .wei-bu .wei-bu2{ width: 1263px; height: 280px; /*background-color: #5dff59;*/ margin: 0 auto; } .wei-bu .wei-bu2 .yy{ width: 385px; height: 280px; /*background-color: #1232ff;*/ display: inline-block; margin: 0 0 0 20px; vertical-align: top; overflow: hidden; } .wei-bu .wei-bu2 .yy h2{ /*background-color: #ffe627;*/ color: #CCCCCC; padding: 20px 0 0 20px; } .wei-bu .wei-bu2 .yy hr{ padding: 3px 0 3px 0; border: none; border-bottom: 1px dashed #333; } .wei-bu .wei-bu2 .yy ul{ height: 200px; /*background-color: #ff4450;*/ padding: 5px 5px 8px 20px; overflow: hidden; } .wei-bu .wei-bu2 .yy ul li{ font-size: 20px; line-height: 2; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wei-bu .ban-quan{ height: 79px; background-color: #000000; margin: 0 auto; line-height: 79px; text-align: center; color: #fffdfd; }
第九十节,html5+css3pc端固定布局,底部区域,说明区域,版权区域
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。