基于用户的通用宽度

时间：2014-03-09 00:33:33

标签： html css

我今天刚刚开始学习HTML，并想知道如何使用通用宽度，以便在每个屏幕分辨率下完美适合屏幕？

这是我当前的代码，我尝试使用百分比，但代码没有用！

<!doctype html>
<html>
<head>
<title>Home</title>
</head>

<body>

<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="70%">
<a href="">
<img src="Resource/Header.png">
</a>
</td>
</tr>
</table>

</table>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

如果您希望表格跨越屏幕的整个宽度，您应该像这样定义：

<table align="center" cellspacing="0" cellpadding="0" style="width: 100%;">
...

一般情况下，请勿使用width属性，而应使用style属性

在评论中还注意到，最好使用语义标记并将CSS放在外部文件中，但如果刚刚开始，它可能是一种很好的方法。

您可能会觉得有用的其他一些链接：

https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials

http://getbootstrap.com/ =＆gt;高级CSS框架（我建议你先学习基础知识）

答案 1 :(得分：0)

目前还不清楚你到底要做什么。一种解释是，您试图在一个占据页面宽度70％的框中左对齐图像（此处显示Resource/Header.png为300像素宽）：

在这种情况下，您需要添加两个空列并将表的宽度固定为页面的100％：

<table width="100%" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="15%"></td>
        <td width="70%"><img src="Resource/Header.png"></td>
        <td width="15%"></td>
    </tr>
</table>
JSFiddle上的

Try it 。

您也希望图像占据整个100％的单元格，即70％的页面。在这种情况下，您需要将图像的宽度固定为100％：

<table width="100%" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td width="15%"></td>
        <td width="70%"><img src="Resource/Header.png" width="100%"></td>
        <td width="15%"></td>
    </tr>
</table>
JSFiddle上的

Try it 。

...但表格用于表格数据，而不是布局。

幸运的是，我们到目前为止所取得的每一项成果都很难实现使用CSS。我们需要一个容器和一个图像：

<header>  <!-- header is a new tag in HTML 5; use something else if you want -->
    <img src="Resources/Header.png">
</header>

然后，您需要使用一些CSS来设置它：

header {
    width: 70%;
    margin: 0 auto;
}
JSFiddle上的

Try it 。

我认为margin: 0 auto;行需要一些解释。我们使用速记样式，我们首先提供垂直边距，然后是水平边距。它相当于

margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;

我们实际上并不关心margin-top和margin-bottom;真正让它做任何事情的是margin-left和margin-right。当其中一个边距为auto时，浏览器将使用该边距填充任何额外空间。当两者都是自动时，它将均匀地分布它们之间的空间，从而均匀地填充两侧并使我们的元素居中。

现在说我们想要用表格实现的后一种风格。然后我们给出img该元素中的所有空间：

header > img {
    width: 100%;
}
JSFiddle上的

Try it 。

请注意，我们只需要更改CSS，而无需更改任何HTML。这是使用CSS over tables进行布局的一个优点 - 在一个地方更改样式，更新使用这些样式的所有内容。另请注意，使用CSS的代码较短，但情况并非总是如此。

......但我们仍无法访问。

如果您有图片，始终添加alt属性。如果用户代理无法显示图像，或者用户是盲人等，则alt属性应该是图像的替代。对于标题，无论出现什么文本都可以：

<img src="Resources/Header.png" alt="Frank's Flower Shop">

对于纯装饰元素，应使用alt=""。 （是的，空alt优于无alt - 但仅限于纯装饰。）避免描述它是什么 - 而是提供可以充分替换图像的内容。 （例如，“截图”不好;“主窗口包含工具栏和内容查看区域”要好得多。）

但如果它是一个标题，搜索引擎可能会减少图像alt文本的权重，而不是它在那里。事实证明，我们可以使用CSS来实现这一目标。首先，写出与搜索引擎或具有屏幕阅读器的用户一样的HTML：

<header>
    <h1><a href="http://www.example.com/">Frank's Flowers</a></h1>
</header>

然后我们可以将图像作为背景放在h1上，然后将文本从视图中删除：

h1 {
    width: 300px;
    height: 100px;
    background: url(Resources/Header.png) no-repeat;
    text-indent: -10000px;
}

钽哒！不幸的是，将这种方法与缩放图像结合起来更加困难。在较新的浏览器中，您可以使用background-size，但这仅在CSS 3中引入。为了获得最大的兼容性，您可能需要考虑尽可能使用纯文本，并将其与装饰背景对齐，或者不对其进行缩放。 / p>

相关问题
最新问题