我知道这听起来很奇怪，但我正在尝试编写一个几乎没有 CSS 知识的网站。这只是一个测试网站，这样我可以更多地了解该语言，但我遇到了一些麻烦。我在任何地方都找不到答案。如有必要，我在底部包含了 HTML 和 CSS 文件。
1.中心体
我想知道如何使我的网站主体居中？我知道这看起来很简单，但我查看了每个 Google 链接，但找不到解决方案。当我放大以 175% 的放大倍率测试我的网站时，至少大多数显示器都有这样的效果，我注意到我的浏览器正在滚动到网站的左侧，而不是中心。我希望网站的元素位于中心，这样它就不会像 YouTube 那样在更大的显示器上出现右侧的空白区域。但是，我不知道是否有办法让网站缩放到中心？
2. 多张图片
当我对我制作的网站布局进行切片时，我从一个“圆 Angular 矩形”形状中拍摄了三张图像。我的目标是让它的形状变得可扩展，这意味着它将是一个小盒子 [ ] 用于小数字，但如果数字有更多位数，盒子可以在不破坏网站的情况下扩展。因此，我将内容框的左侧和右侧以及我希望在其中扩展的 1px 切片。但是，我不知道在哪里可以找到有关如何使它们一起工作的教程。如果有人能指出我正确的方向，我将非常感激。
3.关注
已解决 - 非常感谢帮助我的 Nicole Bieber! :-)
非常感谢。
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> .. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#" id="logo"> .. </a>
<div id="header"></div>
<div id="navigation">
<div class="founders2">
<div id="left_content">
<div class="news">Latest News & Information</div>
<div id="right_content"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS:
#logo {
background:url(images/main/logo.png) top left no-repeat;
width:391px;
height:148px;
font-size:0px;
margin:-10px 0 0 0;
float:left
}
body {
margin:0px;
padding:0px;
background:url(images/main/bg.gif) repeat;
#31
}
#header {
margin:0 auto;
width:100%;
height:147px;
background:url(images/main/header_bg.gif) repeat-x;
}
#navigation {
width:100%;
height:500px;
background:url(images/siteSlice_13.gif) repeat-x;
}
#founders1 {}
#left_content {
float:left;
width:910px;
height:100%;
}
#right_content {
float:right;
width:490px;
height:100%;
}
#footer {
margin:0 auto;
clear:both;
width:100%;
height:77px;
background:url(images/siteSlice_96.gif) repeat-x;
}
/**
* Needs to be aligned vertically.. no idea how.
**/
.news {
font-family:ubuntu;
font-size:25px;
color:#FFFFFF;
text-shadow: 2px 2px #000000 12;
text-align:left;
text-indent:15px;
width:100%;
height:100%;
background:url(images/main/news_header.gif) no-repeat;
margin:100px;
}
.founders2 {
background:url(images/main/founders_navbar.gif) no-repeat;
width:265px;
height:52px;
margin:0 0 0 600px;
}
/main/image 文件夹中没有的任何东西我还没有重新编辑过，但仍然是一个基本图像，应该与新图像替换它时的行为相同。
最佳答案
居中页面内容
一种可以使固定宽度页面布局的主体居中的方法可以使用自动边距来完成，我将在下面的示例中展示
这是一个基本示例，只有一个 div 元素，它将成为我们的网站容器。
您可以对容器或主体应用固定的，并将自动边距应用于容器本身...
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<link href="center.css" rel="stylesheet" type="text/css">
<!---
other header and meta stuff ...
--->
</head>
<body>
<div id="box_content">
<p>
My Content Area.
</p>
</div>
</body>
</html>
和上面的CSS:
使用居中正文的居中对齐内容的 CSS
在上面 HTML 代码的这个 CSS 示例中，我们通过对 应用固定宽度来使容器 (div) 元素居中。正文 元素，并分配 汽车 相同元素的边距。边距将在两侧均匀扩展以保留固定的 800px，从而使页面居中:
@charset "utf-8";
/* CSS Document */
body{
/*
Applying a fixed width with automatic margins will center the page:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
background-color:#FFF;
overflow:auto;
padding:5px;
}
但是，您也可以将固定宽度应用于容器本身。
以下示例适用于上述 HTML 代码。
带有居中 div 元素的 CSS 示例
@charset "utf-8";
/* CSS Document */
body{
/*
Here we have a gray background so we can see the centered content area
*/
background-color:#CCC;
}
/*
Our content area will be white so we can see it centered over the gray background.
*/
#box_content{
/*
Applying a fixed width with automatic margins will center the page,
will also work on the container itself:
*/
width: 800px;
margin-left:auto;
margin-right:auto;
/*
and whatever...
*/
margin-top: 5px;
margin-bottom: 0px;
background-color:#FFF;
overflow:auto;
padding:5px;
}
上述两个 CSS 示例看起来完全相同。 (在所有现代网络浏览器上应该看起来都一样)。
还有其他各种使用 CSS 居中的方法(包括将 Position 设置为 50%，边距为 -400，但这会在某些渲染器上中断)。
我演示的方法只是我的简单但我首选的居中固定宽度布局方法。
此外，我删除了不需要它们的嵌套元素上的 100% 宽度值(无论如何， div 元素将默认为 100% 宽度)
100% 高度不起作用，div 元素不会垂直扩展到其容器，除非您使用绝对定位(但会扩展到页面大小，而不是父容器大小)。 DynamicDrive has examples on how to do this.
还要查看您的来源，我建议更改以下内容:
font-family:ubuntu;
因为它不是所有操作系统都能识别的字体系列，所以您网页的访问者很可能不会看到您在自己的系统上看到的相同字体。除非你使用 ServerSide Fonts .
如果您不使用服务器端字体，it would be best to stick to common fonts and font families that (usually) exist on all major operating systems如果您希望所有主要操作系统上的所有用户无论使用哪种 Web 浏览器都看到相同的字体。
3 个切片按钮
再一次 - 有不止一种方法可以做到这一点。一种更简单的方法是对第 3 层 div 并将切片应用于每个层。以下示例来自我自己的模板设计中的一个简单的可调整大小的按钮，至少可以说是一个简单的盒子模型按钮。
注意:我认为在 << a >> 超链接中嵌套 div 元素被认为是一种不好的做法？虽然我还是这样做了......我可能是错的。
HTML
<a href="contact.php" style="float:right">
<div class="b_1"><div class="b_2"><div class="b_3">
Contact
</div></div></div>
</a>
上述按钮的 CSS:
/*
Contains the left slice of the button:
*/
.box_nav a .b_1{
float: left;
margin-top: 3px;
background-image: url(ui/ui_19.png);
background-repeat: no-repeat;
}
/*
Contains the Right slice of my button:
*/
.box_nav a .b_2{
background-image: url(ui/ui_23.png);
background-repeat: no-repeat;
background-position: right;
}
/*
COntains the tiled center slice of the button
*/
.box_nav a .b_3{
background-image: url(ui/ui_21.png);
height: 43px;
margin-right: 10px; /* This margin is the same width as the RIGHT slice */
margin-left: 10px; /* This margin is the same width as the LEFT slice */
line-height: 40px; /* my way of centering text vertically in the button */
text-align: center;
/*
prevents buttons with more than one word ( has spaces ) from breaking into two lines
*/
white-space: nowrap;
}
.box_nav a:hover .b_1{
background-image: url(ui/ui_24.png);
}
.box_nav a:hover .b_2{
background-image: url(ui/ui_28.png);
}
.box_nav a:hover .b_3{
background-image: url(ui/ui_26.png);
}
如上所示，这是一个盒子模型结构。但是 box_nav 本身需要“overflow:auto;”或“溢出:隐藏；”但是，如果没有明确设置高度。
我的实际示例中的上述按钮如下所示:
最后一节
至于你的第三个问题，我实际上不明白你在问什么，当我复制你的代码时，我的浏览器中的 html/css 组合会中断。 (我也看不到它，因为我也没有你的图片。我不确定你在那里尝试了什么，但我看起来你正在尝试 3 列布局？
您在本节中的 html 在我的浏览器(以及在 dreamweaver 中)几乎完全崩溃了
更新:
根据您的要求，这里有两种方法可以进行流畅的布局:
在此示例中，您可以使用具有这样的流动宽度的相同自动边距(只需将固定的 800PX 宽度修改为流动宽度，例如 80%
width: 80%;
margin-left:auto;
margin-right:auto;
如果您想要具有流动布局的固定边距，您可以简单地设置边距，但不要设置宽度:
width: auto;
margin-left:100px;
margin-right:100px;
关于html - 中心 body 和多个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20910268/