Question

为了让我的网站看起来更专业和更整洁，我真的想在主要内容中加入顶部和底部边框。这就是我的意思：http://prntscr.com/29k16m

我知道这张照片很模糊。因此，如果您想了解到目前为止我在实现这一目标方面取得的全面进展，那么（在第一个灰色方框下）：http://aergaergerg.blogspot.com.au/

我不太确定要包含什么编码，因为我只是个孩子而且在编码方面没有很多经验。而且因为这里有一些点编码。这是一些：

<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编码：

/* 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;
}

所以是的，我很抱歉，如果那些代码不是很相关，但我不完全确定要放什么......但我需要的是我主要内容的顶部边界:)（周围的背景交+侧栏）

干杯！

Answer 1

这是一个经典的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 table应用于容器div来使div环绕内容。 Shrink To Fit Tutorial这里是browser compatibility tables
您可以使用“流体图像”技术使图像适应其内容。 Fluid Image Tutorial

Here's a JSFiddle you can play with

如何在Blogger中的主要内容周围放置图像边框

1 个答案: