如何在Blogger的主要內容周圍放置圖像邊框

爲了讓我的網站看起來更加專業和整潔，我真的很想在主要內容中包含頂部和底部邊框。這就是我的意思：http://prntscr.com/29k16m 如何在Blogger的主要內容周圍放置圖像邊框

我知道這張照片比較模糊。因此，如果您想完整了解我的進度以達到此目的，請在此處（在第一個灰色框中）：http://aergaergerg.blogspot.com.au/

我不太確定包含什麼編碼，因爲我只是一個孩子而且在編碼方面也不是很有經驗......並且還有這個編碼的各個部分。下面是一些：

/* Main ----------------------------------------------- */ 
.main-outer { 
    background: $(main.background); 

    -moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; 
    -webkit-border-top-left-radius: $(main.border.radius.top); 
    -webkit-border-top-right-radius: $(main.border.radius.top); 
    -webkit-border-bottom-left-radius: 0; 
    -webkit-border-bottom-right-radius: 0; 
    -goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; 
    border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0; 

    -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); 
    -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); 
    -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); 
    box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15); 
} 

.main-inner { 
    padding: 15px $(main.padding.sides) 20px; 
} 

.main-inner .column-center-inner { 
    padding: 0 0; 
} 

.main-inner .column-left-inner { 
    padding-left: 0; 
} 

.main-inner .column-right-inner { 
    padding-right: 0; 
}

所以，是的，我很抱歉，如果代碼的那些位不是很相關，但我不能完全肯定：

<Variable name="main.background" description="Main Background" type="background" 
    default="transparent url(http://2.bp.blogspot.com/-_axW0fhAC2Y/UqPOKPHt6EI/AAAAAAAADeg/0FbGNIS9E2o/s1600/mainbody2.png) repeat scroll top 
left" value="transparent url(http://2.bp.blogspot.com/-_axW0fhAC2Y/UqPOKPHt6EI/AAAAAAAADeg/0FbGNIS9E2o/s1600/mainbody2.png) repeat scroll top 
left"/> 
    <Variable name="main.padding.sides" description="Main Padding Sides" type="length" 
default="20px" value="20px"/>

後來在模板中找到獨立的HTML編碼怎麼把..但我需要的是我的主要內容的頂部邊框:)（後+周圍的背景+側欄）

乾杯！

來源

2013-12-08 Joeono

這是一個經典的5像素，淺灰色邊框，圓角和陰影。你可以把它放在你的css文件中，並通過將它應用到你站點中的不同元素來重用它。添加這種風格包含你的圖像或內容，像這樣的div：

HTML

<div id="Header3" class="rounded-border widget Header">

CSS

.rounded-border { 
border:5px solid #cccccc; 
box-shadow:1px 1px 5px 2px rgba(00, 00, 00, 0.50); 
-moz-box-shadow:1px 1px 5px 2px rgba(00, 00, 00, 0.50); 
-webkit-box-shadow:1px 1px 5px 2px rgba(00, 00, 00, 0.50); 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
-khtml-border-radius:10px; 
border-radius:10px; 
}

提示
當你有一個非常寬的圖像或內容超出瀏覽器窗口/視口，div將僅填充窗口，並且不包括溢出到水平可滾動區域的內容。這是默認行爲。如果你想在div環繞四溢的內容，您有幾種選擇：

你可以把它作爲是
您可以使用溢出隱藏（這將隱藏四溢的內容，所以請謹慎使用）
通過將float，inline-block或display表應用於容器div，可以使div環繞內容。 Shrink To Fit Tutorial這裏是browser compatibility tables
您可以使用「流體圖像」技術使圖像適應其內容。 Fluid Image Tutorial

Here's a JSFiddle you can play with

來源

2013-12-09 03:17:28 Talkingrock

如何在Blogger的主要內容周圍放置圖像邊框

回答

相關問題