css3實現(xiàn)圖片木桶布局

ss3技術實現(xiàn)圖片木桶布局，常用在商品或者圖片展示頁面用于展示不一樣尺寸的圖片！

效果圖：

思路

1、容器flex布局

2、圖片定高、超出換行

3、圖片都設置 flex-grow: 1; 以充滿整行

4、圖片都設置 object-fit: cover; 以解決圖片變形

5、容器 :after 偽類設置 flex-grow: 9999; 且值足夠高以解決最后一行圖片數(shù)量少時仍然充滿整行過于扁長

代碼：

html+css：

javascript：

用 <div> 元素的 HTML 布局

注釋：<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進行定位。

這個例子使用了四個 <div> 元素來創(chuàng)建多列布局：

<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>
這是內(nèi)容
</p>
<p>
這是內(nèi)容
</p>
</div>
<div id="footer">
天華信息教育
</div>
</body>
</html>

HTML基礎教程：div元素實現(xiàn)布局

們在網(wǎng)頁制作中，會有許多的術語

例如：CSS、HTML、DHTML、XHTML等等。

下面開始使用DIV+CSS進行網(wǎng)頁布局設計。

所有的設計第一步就是構(gòu)思，構(gòu)思好了，還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來。

下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局，圖片大致分為以下幾個部分：

　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；

　　2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；

　　3、底部，包括一些版權信息。

有了以上的分析，我們就可以很容易的布局了，例如以下設計層下圖:

根據(jù)上圖，畫一個實際的頁面布局圖，說明一下層的嵌套關系，這樣理解起來就會更簡單了。

　　DIV結(jié)構(gòu)如下：　

　│body {}　/*這是一個HTML元素*/

　　└#Container {}　/*頁面層容器*/　

　　　　├#Header {}　/*頁面頭部*/

　　　　├#PageBody {}　/*頁面主體*/　

　　　　│　├#Sidebar {}　/*側(cè)邊欄*/　

　　　　│　└#MainBody {}　/*主體內(nèi)容*/　

　　　　└#Footer {}　/*頁面底部*/

至此，頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫HTML代碼和CSS。

在線咨詢

上一篇：JavaScript漫談之理解類型操作符typeof
下一篇：把文本中的tab替換為空格，你用什么工具？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

css3實現(xiàn)圖片木桶布局

用 <div> 元素的 HTML 布局

您的項目需求