Question

我是HTML和CSS的新手，但我设法创建了一个基本网站，我在顶部有一个小菜单，其中包含指向不同页面的链接，例如＆＃34; Home＆＃ 34;，＆＃34;关于＆＃34;和＆＃34;联系＆＃34;。该网站只包含信息和图片，所以它足够好。

无论如何，我觉得如果我可以将内容放在一个盒子中并且背面有背景，那么该网站看起来会更好，因为即使在字母上放置黑色轮廓，文字也不会很好地显示出来。我想做的事情基本上是将我的菜单，徽标和文字放在像这个网站这样的框中：http://www.kakservice.se/?gclid=Cj0KEQiAzai0BRCs2Yydo8yptuIBEiQAN3_lFqaNO2scD5hQCDW0jBWNIAOAyPrZRG20X2a1LsBTIrcaAko68P8HAQ（无法用这种设计记住一个英文网站，但我想它＆＃ 39;不重要。）并且最好在边界添加阴影。

那我该怎么办呢？我在网上搜索过，但我不确切知道要搜索什么。

提前致谢。

Answer 1

您需要做的是，将<body>标记的所有内容包装在包装内，如：

<div id="wrap">
  <!-- Everything inside body. -->
</div>

并添加以下CSS：

body {background: url("bg.jpg") center center repeat;}
#wrap {width: 80%; margin: auto;}

您可以使用您选择的背景替换bg.jpg。

之前的例子是：

＆＃13;

body {
  background: url("http://thumbs.dreamstime.com/x/grunge-tiled-background-6169673.jpg") center center repeat;
  margin: 0;
  padding: 0;
}
#wrap {
  width: 80%;
  margin: auto;
  background: #fff;
  overflow: hidden;
  padding: 15px;
  
}

＆＃13;

<div id="wrap">
  <h1>Welcome to My Site</h1>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

＆＃13;

如何将我的内容放在一个盒子里？

1 个答案: