分享一个自适应底部html代码可插入网页 - 我爱搜资源分享网

2019年5月24日 3条评论

分享一个自适应底部html代码可插入网页

前面有人找我扒这个网站的底部代码，今天我索性就把它分享给大家，有喜欢的朋友可以拿去用哦。。

代码如下：

<style>/*è‡ªå®šä¹‰æ–‡ç« åˆ—è¡¨æ ·å¼*/
.qgg_diy_postlist_lable{
    line-height: 1;
    padding: 7px;
    font-size: 14px;
    background-color: #FF5E52;
    color: #fff;
    display: inline-block;
    position: relative;
}
.qgg_diy_postlist{
    background:#FFF;
    padding:10px 10px;
    margin:10px 0px;
    border-radius:4px;
border: 1px solid #eaeaea;
}
.qgg_diy_postlist li{
    margin:5px 3px;
    white-space: nowrap; 
    overflow: hidden; 
    clear: both;
    text-overflow: ellipsis;
}
.qgg_diy_postlist li p{
    line-height: 1.8;
    font-size: 12px;
    color:#AAA;
    float: right;
}
/** å…¨ç«™åº•éƒ¨ä¸‰æ æŽ¨å¹¿æ¨¡å— */
.qgg_footer_brand_lmr_wrap{
	position: relative;
	z-index: 9;
	width: 100%;
	background: #333;
	display: flex;
}
.qgg_footer_brand_lmr_main{
    width: 1200px;
    height: 240px;
    margin: 0 auto;
    color: #FFF;	
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.qgg_footer_brand_lmr_main>div{
    width: 33%;
    height: 100%;		
}
/** footer å·¦ä¾§CSS */
.qgg_footer_brand_lmr_left{
    font-size: 14px;
    line-height: 24px;
    color: #fff;
    padding:30px 10%;
    overflow: hidden;
}
.qgg_footer_brand_lmr_left>a img{
    display: block;
    width:180px;
    height:42px;
    margin-bottom: 18px;
}
.qgg_footer_brand_lmr_left>div{
    display: block;
    width: 100%;
    height: 120px;
    overflow: hidden;
    word-break: break-all;
    letter-spacing: 1px; 
    word-spacing: 2px; 
    font-size: 14px;
    line-height: 20px; 
    text-indent: 2em; 
    text-align: justify;
    text-overflow:ellipsis;	
}
/** footer ä¸é—´CSS */
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 34%;
    height: 100%;		
}
.qgg_footer_brand_lmr_middle{
    display: flex;
    align-items: center;
    justify-content: space-around;
    left:0;
    right:0;
    margin: 40px auto;
    width: 96%;
    height: 160px;
    font-size: 14px;
    line-height: 20px;
    color: #FFF;
    border-right: 0px solid #FFF;
    border-left: 0px solid #FFF;	
}
.qgg_footer_brand_lmr_middle>div{
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}
.qgg_footer_brand_lmr_middle>div>img{
    width:100px;
    height:100px;
    margin:5px;
}
.qgg_footer_brand_lmr_middle>div>p{
    margin: 3px;
}
/** footer å³ä¾§CSS */
.qgg_footer_brand_lmr_right{
    font-size: 14px;
    color: #fff;
    padding:30px 10%;
    overflow: hidden;
}
.qgg_footer_brand_lmr_right>h3{
    display: inline-block;
    height:24px;
    font-size: 16px;
    font-weight: bold;
    line-height: 24px;
    padding-right: 10px;
    border-right: 3px solid #fff;
}
.qgg_footer_brand_lmr_right>div{
    width:100%;
    height:126px;
    text-align: center;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 34%;
    height: 240px;		
}
.qgg_footer_brand_lmr_right>div>a{
    width:30%;
    height:28px;
    line-height: 20px;
    display: inline-block;
    padding: 3px 9px;
    color: #FFF;
    border: 1px solid #222;
    border-radius: 9px;
    margin:5px 5%;
    text-align: center;
}
.qgg_footer_brand_lmr_right>div>a:hover{
    background: #555;
}
@media(max-width: 1200px){
.qgg_footer_brand_lmr_middle>div>img{
    width: 80px;
    height: 80px;
}
.qgg_footer_brand_lmr_right>div>a{
    width:80px;
    height: 24px;
    font-size: 10px;
    line-height: 16px;
}
}
@media(max-width: 800px){
.qgg_footer_brand_lmr_main{
    width: 100%;
    height: 440px;
}
.qgg_footer_brand_lmr_main>div {
    width: 50%;
    height: 240px;
    float: right;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(3) {
    position: relative;
    left:50%;
    top: -420px;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 100%;
    height: 180px;		
}
.qgg_footer_brand_lmr_right>div>a {
    width: 90px;
    height:28px;
    line-height: 20px;
    font-size: 14px;
}
.qgg_footer_brand_lmr_middle{
    top: 240px;
    order:1;
    width: 80%;
    border:none;
    margin:9px auto 15px;
}
.qgg_footer_brand_lmr_middle>div>img{
    width: 120px;
    height: 120px;
}
}
@media(max-width: 600px){
.qgg_footer_brand_lmr_main{
    width: 100%;
    height: 380px;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(1) {
    display: none;
}
.qgg_footer_brand_lmr_main>div:nth-of-type(2) {
    width: 100%;
    height: 180px;
    top: 0;
    left: 0;		
}
.qgg_footer_brand_lmr_main>div:nth-of-type(3) {
    width: 100%;
    height: 160px;
    top: 0;
    left: 0;
    margin:0 auto 9px;
}
.qgg_footer_brand_lmr_middle>div>img{
    width: 80px;
    height: 80px;
}
.qgg_footer_brand_lmr_right {
    padding: 0px 10%;
}
.qgg_footer_brand_lmr_right>h3 {
    height: 20px;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 12px;
    }
}</style>
<footer class="qgg_footer_brand_lmr_wrap" style="background:#444;border-top: 0px solid #F44336;">
    <div class="qgg_footer_brand_lmr_main">
        <div>
            <div class="qgg_footer_brand_lmr_left">
            <a href="#"><img src="http://cxk.oxx0.com/content/templates/FYS/img/logo.png" alt=""></a><div>c诚信康医疗器械有限公司官网(cxk.oxx0.com)诚信康医疗器械有限公司实力雄厚，重信用、守合同、保证产品质量，以多品种经营特色和薄利多销的原则，赢得了广大客户的信任！</div>            </div>
        </div>
        <div>
            <div class="qgg_footer_brand_lmr_middle">
            <div>
            <img src="http://p1.qhimg.com/t015e81a14eecc60edd.jpg" alt="">
            <p>关注朋友圈最新活动</p>
            <p>微信号</p>
            </div><div>
            <img src="http://p1.qhimg.com/t015e81a14eecc60edd.jpg" alt="">
            <p>手机版扫描</p>
            <p>QQ群</p>
            </div><div>
            <img src="http://p1.qhimg.com/t015e81a14eecc60edd.jpg" alt="">
            <p>每天领最高99元红包</p>
            <p>支付宝扫一扫</p>
            </div>            </div>
        </div>
        <div>
            <div class="qgg_footer_brand_lmr_right">
            <h3>诚信康网</h3>
            <div>            <a href="http://cxk.oxx0.com/cxk.html" target="_black">关于本站</a><a href="http://cxk.oxx0.com/advertisement" target="_black">广告合作</a><a href="http://cxk.oxx0.com/disclaimer" target="_black">免责声明</a><a href="http://wpa.qq.com/msgrd?v=3&uin=1162771270&site=qq&menu=yes" target="_black">联系我们</a><a href="http://cxk.oxx0.com/zx" target="_black">推荐活动</a><a href="http://q.oxx0.com/index.php?r=nine&u=741923" target="_black">9块9包邮</a>            </div> 
            </div>
        </div>
    </div>
</footer>

运行代码清空代码复制代码

查看完整的：

此处内容已隐藏，评论后刷新即可查看！

喜欢的可以运行代码或者直接复制到网页底部就可以用了哦。。

分享一个自适应底部html代码可插入网页-下载页面

点赞 (2) 打赏分享

支付宝扫一扫
微信扫一扫
企鹅扫一扫

评论后还是无法显示下载地址？清理缓存-点我试试

热度：1483° 评分：8.7 发布时间： 2019年5月24日

本文标签：网页网页特效 js特效网页代码 html源码

版权声明：若无特殊注明，本文皆为《小洋vier》原创，转载请保留文章出处。

本文链接：分享一个自适应底部html代码可插入网页

发表评论
取消回复

最新微语
- 1. 本站广告位出租：可指定文字，图片，视频等，不限位置！暂不支持漂浮，悬浮，弹窗广告位。详细价格联系站长QQ“1162771270（2019年6月13日）
- 2. 本站注册会员12元/月,续费10/月,注册即享全站资源下载（2019年4月11日）
- 3. 本站全部资源免费，无水印，无广告，欢迎搬砖。。（2019年2月19日）
- 4. 使用微语记录您身边的新鲜事（2016年5月25日）
我爱搜热门推荐
最新评论
吾爱搜随机推荐

去顶部