模板分析——SVG黑科技互动排版『左右滑动』模板代码资源-CSDN文库

共7个文件

html：6个

png：1个

版权申诉

svg

文章排版

5星 · 超过95%的资源 31 浏览量 2021-04-30 22:27:48 上传评论收藏 27KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

模板分析——SVG黑科技互动排版『左右滑动』模板代码.rar （7个子文件）

SVG黑科技互动排版『左右滑动』模板代码

【3】SVG黑科技互动排版『设置内容区域可滚动』模板代码.html 9KB

【1】SVG黑科技互动排版『完善滑动内容』模板代码.html 9KB

SVG黑科技互动排版『左右滑动』模板代码.html 8KB

SVG黑科技互动排版『左右滑动，优化版本』模板代码.html 8KB

【0】SVG黑科技互动排版『搭建滑动的背景』模板代码.html 2KB

封面.png 21KB

【2】SVG黑科技互动排版『放大滑动区域』模板代码.html 9KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <title>懂点君 - 文章模板</title> <style type="text/css"> * { margin: 0; padding: 0; } .rich_media_content { overflow: hidden; color: #333; font-size: 17px; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-align: justify; position: relative; z-index: 0; } .rich_media_content * { max-width: 100%!important; box-sizing: border-box!important; -webkit-box-sizing: border-box!important; word-wrap: break-word!important; } </style> </head> <body> <div class="rich_media_content " id="js_content" style="visibility: visible;"> <section style="margin-top: -1px;">  <section style="height: 0;"> <svg space="preserve" style="display: inline-block;width: 100%;background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgsdYEgBicYlG4S8NlTOvM8ggib397mfmv1X114liaxMy9NwVljxCwL7tew/0?wx_fmt=png);background-size: 100%;background-repeat: no-repeat;vertical-align: top;" version="1.1" viewBox="0 0 1080 2303" xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"></svg> </section>  <section style="overflow-x: scroll; -webkit-overflow-scrolling: touch;">   <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 7560 2303" style="display: block; max-width: none !important;" width="700%">  <foreignObject x="0" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2usvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="1080" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2uvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="2160" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2uvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="3240" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2uvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="4320" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2uvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="5400" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2uvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="6480" y="0" width="1080" height="2303"> <svg width="1080" height="2303" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_png/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgu2MUc381OorThUggv6uhb2uvzdaYehl1xcaibuUddMyxoeh2ibLWh7vA/0?wx_fmt=png); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject>  <foreignObject x="385" y="1210" width="310" height="312"> <svg width="310" height="312" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgWLEJkJXicGTMSiciaW9rbfMuI6CEf3MucibXTufVa2YdfpG3HGrAFYbg0Q/0?wx_fmt=gif); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="1465" y="1210" width="310" height="312"> <svg width="310" height="312" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgWLEJkJXicGTMSiciaW9rbfMuI6CEf3MucibXTufVa2YdfpG3HGrAFYbg0Q/0?wx_fmt=gif); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="2545" y="1210" width="310" height="312"> <svg width="310" height="312" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgWLEJkJXicGTMSiciaW9rbfMuI6CEf3MucibXTufVa2YdfpG3HGrAFYbg0Q/0?wx_fmt=gif); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="3625" y="1210" width="310" height="312"> <svg width="310" height="312" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgWLEJkJXicGTMSiciaW9rbfMuI6CEf3MucibXTufVa2YdfpG3HGrAFYbg0Q/0?wx_fmt=gif); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="4705" y="1210" width="310" height="312"> <svg width="310" height="312" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_gif/JpraGu7eGqTFf7LnKq4YV1tL7lsQMBKgWLEJkJXicGTMSiciaW9rbfMuI6CEf3MucibXTufVa2YdfpG3HGrAFYbg0Q/0?wx_fmt=gif); background-size: 100% auto; background-repeat: no-repeat;" xmlns="http://www.w3.org/2000/svg"></svg> </foreignObject> <foreignObject x="5785" y="1210" width="310" height="312"> <svg width="310" height="312" style="display: block; background-image: url(https://mmbiz.qpic.cn/mmbiz_gi

评论收藏

内容反馈

版权申诉