Re: [Blogger] 關於文章的配置

看板Blog作者snoot (小泉（尋找組員）)時間15年前 (2009/08/10 11:56)推噓5(5推 0噓 0→)

留言5則, 5人參與討論串2/2 (看更多)

嗨，歡迎使用Blogger，這是一個自訂性相當高的部落格在寫部落格時，會慢慢學會使用語法來排版，所以懂些HTML會很有用 ************************************************************* 問題一與二都是相同的問題，都是如何在同一列插入兩張以上圖片　　　文文文文文文文　　圖圖　　　文文文文文文文使用Blogger上傳圖片時，系統會自動將圖片設成區塊（block）顯示按下[修改HTML]看一下圖片程式碼，你會看到以下段落 <img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 240px;" src="圖片網址" alt="" id="圖片ID" border="0" /> 解答就是：將圖片語法中 display:block; 刪除就好延伸註解：一行可以插入幾張圖片決定於圖片寬度總和，如果超過欄寬就會強迫分行問題3. : 我採用了blogger內建的上傳照片，它提供置中、左、右的服務 : 這樣我就可以在圖片的左右擺文字，例如： : 文文文 : 文文文圖 : 文文文 : 但是這樣會有兩個麻煩 - 1.文字很容易不對稱 : 2.圖片下方無法額外加文字註解一樣是在HTML模式下解決，這次我們需要用到<DIV>這個標籤 <DIV>可以將裡頭包夾的內容形成一個區段，整個段落都是它的 Step 1/3 DIV標籤的功能　　　<DIV> 　　　 <IMG SRC="圖片網址"> 　　　</DIV> 　　　文文文文文文文文　　　 --------------- 　　　| 圖 | 　　　 --------------- 　　　文文文文文文文文 <DIV>像是隱形的表格一樣，將裡頭的內容用一整段來表示 Step 2/3 圖片加上註解　　　我想你要的效果是像新聞網站一樣，照片搭配描述，所以你需要做的是　　　<DIV> 　　　 <IMG SRC="圖片網址"> 　　　 <P>敘述文字</P> 　　　</DIV> 　　　　　　　　　文文文文文文文　　　 ------------ 　　　| 圖 | 　　　| 描述 | 　　　 ------------ 　　　文文文文文文文 Step 3/3 設定DIV成浮動格式，讓文字環繞在側　　　圖片標籤之所以可以讓文字環繞在側，是因為你選擇了讓圖片置左、置右「漂浮」　　　這等於向文字表示，「嘿，我一定會靠在這一邊，旁邊空下來，你可以排版過來」　　　以上的內容以HTML表示的話就是　　　　　　　　　<IMG SRC="圖片網址" ALIGN="*"> 註解：* 可為 LEFT（左）、RIGHT（右）　　　　　　在之前就提過DIV的功能是將整個段落佔據住，理論上沒有元素能夠排在同一段落內　　　但我們可以設定DIV成浮動模式，讓它「飄浮」在欄位的一邊，這時文字就可以環繞　　　<DIV STYLE="float:left;"> 註解：left是你想區塊浮動的位置　　　 <IMG SRC="圖片網址"> 註解：請將負責圖片飄浮位置的ALIGN給刪除　　　 <p>註解描述</p> 　　　</DIV> 　　　　　文文文文文文文文文文文文　　　 ---------- 文文文文文　　　| 圖 | 文文文文文　　　| 註解描述 | 文文文文文　　　 ---------- 文文文文文　　　　　　 ================================= 如果你還有興趣，有兩件事情你可能會想知道 1. 為什麼要去除圖片的置放位置 align="*" 因為我們是用區塊（DIV）和文字排版，圖片僅需要包夾在DIV內因此，請先將<IMG SRC="圖片網址" ALIGN="*">的 ALIGN="*"刪除不然圖片會在<DIV>區段內繼續浮動在另一個方向 ---------- 文文文文 | | 文文文文 | 圖註解 | 文文文文 | | 文文文文 ---------- 文文文文文文文文文文文文文文 2.覺得環繞文字和圖片（含註解）區塊太近，想要留些空隙嗎如果今天只有圖片和文字環繞（不含註解），那麼可以用 <img src="圖片位置" align="靠齊位置" vspace="水平距離" hspace="垂直距離"> 但今天我們使用<DIV>排版，還是靠樣式來設定 <DIV STYLE="float:left;margin:△px ▲px ▽px ▼px;"> 註解：分別控制上右下左 <IMG SRC="圖片網址"> <p>註解描述</p> </DIV> 文文文文文文文文文文文文文 △ 文文文文 ---------- 文文文文 | | 文文文文 ▼ | 圖註解 |▲ 文文文文 | | 文文文文 ---------- 文文文文 ▽ 文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文 -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 218.169.78.52

推

hirorei

08/10 13:45, , 1^F

08/10 13:45, 1^F

推

sepx

08/11 00:57, , 2^F

08/11 00:57, 2^F

推

guam

08/11 17:00, , 3^F

08/11 17:00, 3^F