html奇淫技巧 2 教你如何进行图文环绕布局 原创
生活随笔
收集整理的這篇文章主要介紹了
html奇淫技巧 2 教你如何进行图文环绕布局 原创
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在群里無意看到了盆友想要布局一個圖文環(huán)繞的布局，問有沒有什么辦法實現(xiàn)，上網(wǎng)查了下，都感覺忽悠人的。
js 方面學的不怎么好，但是頁面這塊是不服輸?shù)摹?/p>
于是就進行了研究，需求如下：
起先看到這張需求我是有點無奈的，想到了各種css3的方法 旋轉、轉換 、定位等等等等最后做成了這樣:
最后做成了這樣，明顯是達不到需求的，于是想到了一個屬性:
IFrame?HTML 的內聯(lián)框架
這個框架就能完美的實現(xiàn)這個需求了，
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><style type="text/css">.news-box{width: 500px;height: 500px;border: 1px solid red;margin: 0 auto;position: relative;}.pic{width: 100px;height: 100px;float: right;background-color: gray;border: none;}p{ /* direction:rtl; unicode-bidi:bidi-override*/}p img{float: left;height: 100px;width: 100px;position: relative;}</style><body><div class="news-box"><div class="inside-box"><p>說說說三生三世三生三世你好青花大傻三生三世三生三世你好青花大傻子說說說三生三世三生三世你好青花大傻子說說說三生三世三生三世你好青花大傻子說說說三生三世三生三世你好青<iframe class="pic" id="ifm" name="ifms" src="pic11.html" width="100" height="100" scrolling="no"></iframe>大傻子說說說三生三世花大傻子說說說三生三世三生三世你好青花大傻子子說說說三生三世三生三世你好青花 三生三世你好青花大傻子說說說三生三世三生三世你好青花大傻子說說說</p></div></div><button id="clickme">點擊我</button><script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> // document.getElementById('clickme').οnclick=function(){ // // } // window.frames["ifms"].document.getElementById("pic").click(); console.log($("#ifm").contents().find("#pic").attr('src','img/555.png'));</script></body> </html>最終效果如下：
想要顯示在左邊的話，可以給iframe 一個float屬性。
這種形式目前只適用于死的文章數(shù)據(jù)，如果要發(fā)的那種的話，需要開發(fā)編輯器以這種形式插入，
另外推薦 iframe 參考博客，感覺寫的挺好的；
https://www.cnblogs.com/blog-cq/p/5557194.html
顯示中間參考博客：https://www.codecolor.cn/float-center-effect/
轉載于:https://www.cnblogs.com/xiaobaicai123/p/10893416.html
總結
以上是生活随笔為你收集整理的html奇淫技巧 2 教你如何进行图文环绕布局 原创的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 考研408复习思路，学习方法
- 下一篇： Day 16 包 json模块和os模块