時間：2023-09-07 00:30:02 | 來源：網(wǎng)站運營
時間：2023-09-07 00:30:02 來源：網(wǎng)站運營
web前端入門到實戰(zhàn)：css基礎-float浮動：float實現(xiàn)文字環(huán)繞圖片效果：
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float</title> <style> body{ font-family: '微軟雅黑'; } .per{ width: 400px; border: 1px solid #CCC; padding: 5px; } .red{ width: 100px; height: 100px; background: red; margin: 10px; float:left; } </style></head><body> <div class="per"> <div class="red"></div>層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。 [1] CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。 </div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float</title> <style> .container{ width:500px; border:1px solid #000; } .div{ width: 100px; height:100px; float:left; } .div1{ background-color:red; } .div2{ background-color:yellow; } .div3{ background-color:green; } .clear{ clear:both; } </style></head><body> <div class="container"> <div class="div div1"></div> <div class="div div2"></div> <div class="div div3"></div> <div class="clear"></div> </div></body></html>清除浮動的方法二：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float</title> <style> .container{ width:500px; border:1px solid #000; overflow: hidden; } .div{ width: 100px; height:100px; float:left; } .div1{ background-color:red; } .div2{ background-color:yellow; } .div3{ background-color:green; } </style></head><body> <div class="container"> <div class="div div1"></div> <div class="div div2"></div> <div class="div div3"></div> </div></body></html>清除浮動的方法三：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>float</title> <style> .container{ width:500px; border:1px solid #000; overflow: hidden; zoom:1; } .div{ width: 100px; height:100px; float:left; } .div1{ background-color:red; } .div2{ background-color:yellow; } .div3{ background-color:green; } .clearfix:after{ content:'.'; display: block; height:0; visibility: hidden; clear:both; } .clearfix{ zoom:1;/*兼容ie6/7*/ } </style></head><body> <div class="container clearfix"> <div class="div div1"></div> <div class="div div2"></div> <div class="div div3"></div> </div></body></html>從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端HTML5的項目實戰(zhàn)【視頻＋工具＋系統(tǒng)路線圖】都有整理，在線解析，學習指導，點：【W(wǎng)EB前端學習圈⑤】關鍵詞：基礎,浮動,實戰(zhàn),入門
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
