網頁設計布局中會用到很多的圖片,如果這些圖片需要在一個頁面中展示并且圖片大小不一,如下圖所示的情況,就會牽扯到這些圖片怎么排列的問題,今天小編就給大家講解下常見圖片排序的一些方法。
不規則圖片排列
第一種:圖片伸縮變形為同一大小。最常見的排序方案,無論圖片大小比例為什么,統一拉伸縮放到一個大小,圖片樣式設置為img{width: 100%;height: 100%;},這種排序簡單粗暴不在乎圖片變形問題,很多網站往往會采用這樣的方式。
圖片伸縮我同一尺寸
圖片拉伸變形
第二種:圖片等高度,寬度自適應。圖片如果很多的情況下采用的一種排序方式,圖片外框高度固定,圖片大小縮放到統一高度,寬度自適應,圖片樣式設置為img{width: auto;height:100%; },這種排序需要圖片很多并且需要程序計算圖片寬度,保證每行總寬度相等。
圖片等高排列寬度自適應
這種排序比較典型的案例是百度圖片搜索頁面,它使用的就是這種排序,是基于圖片數據很大并且程序計算,保證了每行總寬度基本相等。
圖片等高排列寬度自適應
第三種:圖片等寬度,高度自適應。圖片如果很多的情況下采用的一種排序方式,圖片分多欄,圖片高度不同會有錯位效果。圖片樣式設置為img{width: 100%;height:auto;}俗稱瀑布流,多用于圖片展示型網站和購物網站中。
圖片等寬排列瀑布流
比如蘑菇街就是采用這種排序方式
圖片等寬排列瀑布流
第四種:圖片外框大小固定,圖片縮放自適應外框。這種方式基本和第一種一樣,不同的是圖片不會變形。圖片樣式設置為img{max-width: 100%;max-height:100%;}
圖片縮放寬高自適應
圖片縮放寬高自適應
第五種:圖片大小不變,錯位布局。類似拼圖效果這種方式最麻煩,需要絕對定位才能保證不錯位,使用的比較少,遇到這種情況多使用ps排版。
拼圖效果
好了,到這里圖片排序布局常見的5種方式就介紹完了,至于應用中采用哪種比較好就需要具體場景具體分析了,我的建議是:
一:如果圖片少要求不高的話采用第一種最省心,如果客戶要求圖片不能變形的話采用第四種比較好;
二:如果圖片比較多的話,如果主要是pc端瀏覽的話采用類似百度圖片那樣的第二種排序,如果主要是移動設備瀏覽的話采用蘑菇街類似的瀑布流也就是第三種布局;
三:如果牽扯的拼團效果的話,最好的方法還是ps做成一張圖片最好,使用css的話部分瀏覽器會錯位影響效果。
天下沒有難畫的簡筆畫, 愿天下知識都能秒會
福利:懶人簡筆畫發粉絲紅包了, 支付寶首頁搜索“9092116”領取,現金發放,人人有份
javascript | ||
1.第1個程序helloworld | 2.簡明教程 | 3.技巧大全 |
4.Qrcode生成二維碼 | 5.qrious生成二維碼 | 6.jquery生成二維碼 |
7.開發js小游戲 | 8.經典類庫 | 9.13個類庫 |
10.12個圖表類庫 | 11.幾十個學習網站 | 12.js正則表達式 |
13.weui等18個庫 |
<script>
function go
{
var allHtml="";
var h=35;//高
var w=30;//寬
var l=25; //每行l個
var cell=80;//格子大小
for( var i=0;i<500;i++)
{
var yTop=Math.tan(26.5*2*Math.PI/360)*w;
var x1=10+i%l*cell;
var y1=parseInt(i/l)*cell;
var x2=x1+w;
var y2=y1-yTop;
var x3=x1+w+w;
var y3=y1;
var x4=x3;
var y4=y1+h;
var x5=x2;
var y5=y4+yTop;
var x6=x1;
var y6=y4;
var x7=x2;
var y7=y1+yTop;
var strh=h.toString;
var strw=w.toString;
var strx1=x1.toString;
var stry1=y1.toString;
var strx2=x2.toString;
var stry2=y2.toString;
var strx3=x3.toString;
var stry3=y3.toString;
var strx4=x4.toString;
var stry4=y4.toString;
var strx5=x5.toString;
var stry5=y5.toString;
var strx6=x6.toString;
var stry6=y6.toString;
var strx7=x7.toString;
var stry7=y7.toString;
if( y5<=y7 ) break;
allHtml+="<g><polyline fill=\"none\" stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" points=\""+strx1+","+stry1+" "+strx2+","+stry2+" "+strx3+","+stry3+" "+strx4+","+stry4+" "+strx5+","+stry5+" "+strx6+","+stry6+" "+strx1+","+stry1+"\"/>";
allHtml+="\n";
allHtml+="<line stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\""+strx1+"\" y1=\""+stry1+"\" x2=\""+strx7+"\" y2=\""+stry7+"\"/>";
allHtml+="\n";
allHtml+="<line stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\""+strx3+"\" y1=\""+stry3+"\" x2=\""+strx7+"\" y2=\""+stry7+"\"/>";
allHtml+="\n";
allHtml+="<line stroke=\"#000000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-miterlimit=\"10\" x1=\""+strx5+"\" y1=\""+stry5+"\" x2=\""+strx7+"\" y2=\""+stry7+"\"/></g>";
h-=0.1;
}
document.getElementById('txt1').value=allHtml;
}
</script>
<body onload="go">
<textarea rows="50" cols="100" id="txt1"></textarea>
簡筆畫 | ||
1.工具 | 2.排線 | 3.自動畫畫 |
4.表情 | 5.眼睛 | 6.鼻子 |
7.嘴 | 8.發 | 9.手 |
10.身 | 11.姿勢 | 12.衣服 |
13.火柴人 | 14.Q版人物 | 15.十二生肖 |
16.貓 | 17.鼠 | 18.牛 |
19.虎 | 20.兔 | 21.龍 |
22.蛇 | 23.馬 | 24.羊 |
25.猴 | 26.雞 | 27.狗 |
28.豬 | 29.大象 | 30.獅子 |
31.長頸鹿 | 32.鳥 | 33.蝦蟹 |
34.魚 | 35.蛙 | 36.建筑 |
37.家具 | 38.文具 | 39.交通 |
40.花草 | 41.樹 | 42.水果 |
43.蛋糕 | 44.食物 | 45.春節 |
46.圣誕素材 | 47.盆栽 | 48.風景 |
49.車 | 50.樂器 | 51.房子 |
52.京劇 | 53.3D | 54.七龍珠全家福 |
55.小丸子全家福 | 56.蠟筆小新全家福 | 57.機器貓全家福 |
58.巴巴爸爸全家福 | 59.小豬佩奇全家福 | 60.旅行青蛙全家福 |
61.光頭強熊出沒全家福 | 62.海綿寶寶全家福 | 63.丁老頭全家福 |
64.米老鼠全家福 | 65.大白 | 66.粉紅豹 |
67.葫蘆娃全家福 | 68.藍精靈全家福 | 69.超級飛俠 |
70.柯南 | 71.老夫子 | 72.辛普森 |
73.喜羊羊 | 74.花仙子 | 75.擠娃娃 |
76.裝飾畫 | 77.英語花體 | 78.紋身畫 |
79.灰塵畫 | 80.漫畫插畫家 | 81.沙畫 |
82.像素畫 | 83.春節 | 84.粉紅豹 |
85.阿貍 | 86.超人 | 87.貓和老鼠 |
88.石頭畫 | 89.插花 | 90.思維導圖 |
91.ai | 92.sai | 93.photoshop |
94.狐貍 | 95.阿拉蕾 | 96.花木蘭 |
97.奧特曼 | 98.一拳超人 | 99.復仇者聯盟 |
100.英雄聯盟 | 101.河馬 | 102.爾康 |
103.地圖 |
懶人大學-愿天下知識都能秒會 | ||
1.簡筆畫 | 2.公開課 | 3.水彩 |
4.水墨畫 | 5.書法 | 6.手抄報 |
7.像素畫 | 8.數位板 | 9.手帳 |
10.素描 | 11.速寫 | 12.花體 |
13.自動畫畫 | 14.折紙 | 15.唱歌 |
16.編曲 | 17.尤克里里 | 18.吉他 |
19.物理 | 20.化學 | 21.少兒舞蹈 |
22.C語言 | 23.爬蟲 | 24.AI音箱評測 |
25.手機評測 | 26.PPT | 27.ai |
28.sai | 29.Excel | 30.程序員網站 |
31.Linux | 32.ih5 | 33.小程序 |
34.javascript | 35.公眾號 | 36.搜索引擎 |
37.中國歷史 | 38.聲律啟蒙 | 39.鬼故事 |
40.幸福故事 | 41.解剖學 | 42.常見病 |
43.國學 | 44.國際音標 | 45.日語 |
46.馬來語 | 47.德語 | 48.藏語 |
49.意大利語 | 50.葡萄牙語 | 51.西班牙語 |
52.越南語 | 53.泰語 | 54.俄語 |
55.阿拉伯語 | 56.韓語 | 57.英語 |
58.法語 | 59.Adobe Illustrator | 60.Adobe Photoshop |
61.攝影教程匯總 | 62.經典片頭欣賞 | 63.粥 |
64.餃子 | 65.烹飪教程匯總 | 66.會計 |
67.插花教程匯總 | 68.健身 | 69.瑜伽 |
70.ted演講匯總 | 71.思維導圖 | 72.整理教程匯總 |
73.裝修 | 74.包包DIY教程 | 75.科學 |
76.區塊鏈 | 77.偉人 | 78.玩具 |
79.體育 | 80.電子 | 81.考研政治 |
82.哲學 | 83.旅游 | 84.服裝 |
85.股票 | 86.種菜 | 87.建筑 |
88.t恤 | 89.數字電路 | 90.高考 |
91.AE特效 | 92.生物學 | 93.人工智能 |
94.棋牌 | 95.機器人 | 96.童話 |
97.玩具 | 98.粥 | 99.征稿 |
100.炒菜機 | 101.access | 102.自媒體 |
103.投資 | 104.武器 | 105.力學 |
找不到您需要的教程?加群留言吧
懶人大學vip QQ群433569528
《懶人簡筆畫》同名圖書已發售
京東,當當,淘寶,亞馬遜 搜 懶人簡筆畫
史上第1本手殘黨秒會畫畫的書
報名懶人大學1對1培訓班請加微信:mhw1212666
投稿請私信微博:懶人簡筆畫
福利:打開支付寶首頁搜索“9092116”,即可領懶人大學專屬隨機紅包,每天都有哦
可以使用 HTML 創建表格。
實例
表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>每個表格由 table 標簽開始。</p>
<p>每個表格行由 tr 標簽開始。</p>
<p>每個表格數據由 td 標簽開始。</p>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>兩行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
這個例子演示如何在 HTML 文檔中創建表格。
表格邊框
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>帶有普通的邊框:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有粗的邊框:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有很粗的邊框:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示各種類型的表格邊框。
表格
表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格和邊框屬性
如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表頭
表格的表頭使用 <th> 標簽進行定義。
大多數瀏覽器會把表頭顯示為粗體居中的文本:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器顯示如下:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
表格中的空單元格
在一些瀏覽器中,沒有內容的表格單元顯示得不太好。如果某個單元格是空的(沒有內容),瀏覽器可能無法顯示出這個單元格的邊框。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>
表格中的空單元格
注意:這個空的單元格的邊框沒有被顯示出來。為了避免這種情況,在空單元格中添加一個空格占位符,就可以將邊框顯示出來。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td> </td>
<td>row 2, cell 2</td>
</tr>
</table>
在瀏覽器中顯示如下:
row 1, cell 1 row 1, cell 2
row 2, cell 2
更多實例
沒有邊框的表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>這個表格沒有邊框:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h4>這個表格也沒有邊框:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示一個沒有邊框的表格。
表格中的表頭(Heading)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>表頭:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話</th>
<th>電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表頭:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 854</td>
</tr>
<tr>
<th>電話</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何顯示表格表頭。
空單元格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>
<p>正如您看到的,其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格后,仍然沒有邊框。</p>
<p>我們的技巧是在單元中插入一個 no-breaking 空格。</p>
<p>no-breaking 空格是一個字符實體。如果您不清楚什么是字符實體,請閱讀關于字符實體的章節。</p>
<p>no-breaking 空格由和號開始 ("&"),然后是字符"nbsp",并以分號結尾(";")。</p>
</body>
</html>
[/demo]
本例展示如何使用 " " 處理沒有內容的單元格。
帶有標題的表格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>這個表格有一個標題,以及粗邊框:</h4>
<table border="6">
<caption>我的標題</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示一個帶標題 (caption) 的表格
跨行或跨列的表格單元格
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>橫跨兩列的單元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>橫跨兩行的單元格:</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何定義跨行或跨列的表格單元格。
表格內的標簽
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</td>
<td>這個單元包含一個表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>這個單元包含一個列表:
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>菠蘿</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何顯示在不同的元素內顯示元素。
單元格邊距(Cell padding)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>沒有 cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。
單元格間距(Cell spacing)
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>沒有 cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>帶有 cellspacing:</h4>
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 Cell spacing 增加單元格之間的距離。
向表格添加背景顏色或背景圖像
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>背景顏色:</h4>
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>背景圖像:</h4>
<table border="1"
background="./imagecopy1234567890/test.gif">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何向表格添加背景。
向表格單元添加背景顏色或者背景圖像
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>單元背景:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="./imagecopy1234567890/test.gif">
Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何向一個或者更多表格單元添加背景。
在表格單元中排列內容
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="400" border="1">
<tr>
<th align="left">消費項目....</th>
<th align="right">一月</th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">1.10</td>
<td align="right">.20</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">.00</td>
<td align="right">.45</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">0.40</td>
<td align="right">0.00</td>
</tr>
<tr>
<th align="left">總計</th>
<th align="right">01.50</th>
<th align="right">4.65</th>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 "align" 屬性排列單元格內容,以便創建一個美觀的表格。
框架(frame)屬性
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p><b>注釋:</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p>
<p>Table with frame="box":</p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="above":</p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="below":</p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="hsides":</p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
<p>Table with frame="vsides":</p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>0</td>
</tr>
</table>
</body>
</html>
[/demo]
本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
表格標簽
表格 描述
<table> 定義表格
<caption> 定義表格標題。
<th> 定義表格的表頭。
<tr> 定義表格的行。
<td> 定義表格單元。
<thead> 定義表格的頁眉。
<tbody> 定義表格的主體。
<tfoot> 定義表格的頁腳。
<col> 定義用于表格列的屬性。
<colgroup> 定義表格列的組。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。