【代碼筆記】Web-CSS-CSS Float(浮動)

shery 發布于2019-04-23 11:50 / 843人閱讀

一，效果圖。

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. p> <h3>Image Galleryh3> <p>Try resizing the window to see what happens when the images does not have enough room.p> <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90"> <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80"> <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90"> <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">

Image Gallery

Try resizing the window to see what happens when the images does not have enough room.

Second row

參考資料：《菜鳥教程》

GPU云服務器云服務器 asp浮動代碼 html浮動居中代碼 html向上浮動代碼 asp浮動廣告代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1225.html

【代碼筆記】Web-CSS-CSS Align

一，效果圖。二，代碼。DOCTYPEhtml><html><head><metacharset="utf-8"><title>CSSAligntitle><style>body{margin:0;padding:0;} .container{position:relative;width:100%;} ...

番茄西紅柿 2019-04-23 11:49 評論0 收藏0
【代碼筆記】Web-CSS-CSS 教程

一，效果圖。二，代碼。 DOCTYPE html> CSS 教程 body { background-color: #d0e4fe; } h1 { color: range; text-align: center; } p { fon...

endless_road 2019-04-23 11:55 評論0 收藏0
【代碼筆記】Web-CSS-CSS 語法

一，效果圖。二，代碼。 DOCTYPE html> CSS 語法 p { color: red; text-align: center; } Hello world! this paragraph is styled with css ? 參考資料：《菜鳥教程》

zhangwang 2019-04-23 11:55 評論0 收藏0
【代碼筆記】Web-CSS-CSS id和Class選擇器

一，效果圖。二，代碼。 DOCTYPE html> CSS id和class選擇器 #para1 { text-align: center; color: red; } .center { text-align: center; } p.center...

Pluser 2019-04-23 11:54 評論0 收藏0
【代碼筆記】Web-CSS-CSS background背景

摘要：實例改文本插入在元素中該段落有自己的背景顏色背景圖片不重復，設置實例背景圖片只顯示一次，并與文本分開實例中還添加了屬性用于讓圖片與文本間隔開參考資料菜鳥教程一，效果圖。二，代碼。 DOCTYPE html> CSS backgrounds h1 { background-color: #6495ed; } ...

番茄西紅柿 2019-04-23 11:54 評論0 收藏0