ss3技術實現圖片木桶布局,常用在商品或者圖片展示頁面用于展示不一樣尺寸的圖片!
效果圖:
思路
1、容器flex布局
2、圖片定高、超出換行
3、圖片都設置 flex-grow: 1; 以充滿整行
4、圖片都設置 object-fit: cover; 以解決圖片變形
5、容器 :after 偽類 設置 flex-grow: 9999; 且值足夠高 以解決最后一行圖片數量少時仍然充滿整行過于扁長
代碼:
html+css:
javascript:
注釋:<div> 元素常用作布局工具,因為能夠輕松地通過 CSS 對其進行定位。
這個例子使用了四個 <div> 元素來創建多列布局:
<html> <head> <style> #header { background-color:#1aaa11; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; color:#faaaff; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:#166611; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>天華信息教育</h1> </div> <div id="nav" > 第一組<br> 第二組<br> 第三組<br> </div> <div id="section"> <h2>這是標題</h2> <p> 這是內容 </p> <p> 這是內容 </p> </div> <div id="footer"> 天華信息教育 </div> </body> </html>
HTML基礎教程:div元素實現布局
們在網頁制作中,會有許多的術語
例如:CSS、HTML、DHTML、XHTML等等。
下面開始使用DIV+CSS進行網頁布局設計。
所有的設計第一步就是構思,構思好了,還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構畫出來。
下面,我們需要根據構思圖來規劃一下頁面的布局,圖片大致分為以下幾個部分:
1、頂部部分,其中又包括了LOGO、MENU和一幅Banner圖片;
2、內容部分又可分為側邊欄、主體內容;
3、底部,包括一些版權信息。
有了以上的分析,我們就可以很容易的布局了,例如以下設計層下圖:
根據上圖,畫一個實際的頁面布局圖,說明一下層的嵌套關系,這樣理解起來就會更簡單了。
DIV結構如下:
│body {} /*這是一個HTML元素*/
└#Container {} /*頁面層容器*/
├#Header {} /*頁面頭部*/
├#PageBody {} /*頁面主體*/
│ ├#Sidebar {} /*側邊欄*/
│ └#MainBody {} /*主體內容*/
└#Footer {} /*頁面底部*/
至此,頁面布局與規劃已經完成,接下來我們要做的就是開始書寫HTML代碼和CSS。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。