HTML/CSS 网站格式答案

【问题标题】：HTML/CSS website formattingHTML/CSS 网站格式
【发布时间】：2015-11-13 02:52:47
【问题描述】：

我正在编写我的第一个网站，但遇到了一个（希望如此）小问题。

我正在尝试在此 img 下添加文本，但第二次添加 p 标记并添加我的段落时，就像我的网站宽度突然变糟...我将把我的 HTML 和 CSS 放在下面。请注意，我将 p 标签取出，以便您可以看到它应该的样子......我将 p 标签放入所有内容的那一刻变得一团糟。

编辑：让我试着更好地解释一下我想要做什么。第一个小提琴是我的“主页”。当用户单击“游戏预览：勇士公羊”链接时，他们将被带到另一个页面，该页面是小提琴编号 2。当我尝试在公羊播放器 IMG 下放置一段时，网站背景图像似乎放大并且“勇士”右边的文字向外拉屎……第一张图片是下面的段落，第二张是没有的。对不起，糟糕的绘画编辑，图像太大了。小提琴 1：https://jsfiddle.net/t8fveqdL/1/ 小提琴 2：https://jsfiddle.net/c1hyad70/

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>The Official Website of the Whitewater Warriors</title>
        <link rel="shortcut icon" href="images/WhitewaterWarriorsLogo - Copy.ico">
        <link rel="stylesheet" href="PREVIEW.css"> 
    </head>

    <body>
        <header>
            <img src="images/WhitewaterWarriorsLogo.png" height="150" width="150" alt="Warrior Logo">
            <hgroup>
                <h1> <span class="shadow">The Official Website of the Whitewater Warriors</span> </h1>
            </hgroup>
        </header>
        <nav id="nav_bar">
        <ul>
            <li><a href="index.html" class="current"> Home </a></li>
            <li><a href="speakers.html"> Speakers </a></li>
            <li><a href="luncheons.html"> Luncheons </a></li>
            <li><a href="tickets.html"> Tickets </a></li>
            <li><a href="about.html"> About Us </a></li>
        </ul>
        </nav>
        <section>
        <img src="images/gurley_opbd_main_111115.jpg" alt="Rams Player" width="815px">

        </section>

        <footer>
            <p>
                &copy; 2012, San Joaquin Valley Town Hall, Fresno, CA 93755
            </p>
        </footer>

    </body>
</html>

CSS：

section {
    position: relative;
    width: 815px;
    margin-bottom: 10px;
}

section img {
    position: relative;
    top: -26.5px;
    display: block;
    margin: 0 auto;
}

section p {
    padding: .5em;
}

【问题讨论】：

你可以去掉 CSS 规则部分 p {padding: .5em;}
尝试使用<div> 或<span> 而不是<p>
提供小提琴。我看不出有什么问题。
您指的是在哪个图像下？顺便说一句：第二张图片有width="815px" 而不是width="815"（没有“px”），但不应该是这样。如果您不想/可以制作小提琴也没关系，但至少链接到图片，我不想制作自己的假人，第二张图片缺少height，所以我什至不能如果我想要.
如果您没有将图片上传到 Fiddle (stackoverflow.com/questions/13172762/adding-images-in-jsfiddle)，则需要提供图片的完整路径。您还需要检查html CSS 规则。 background-repeat 既不知道center 也不知道fixed。 fixed 很可能属于以前的 background-attachment。还有center？ center 属于哪里？

标签： javascript jquery html css

【解决方案1】：

“问题”在这里：

html {
    background-image: url("images/maxresdefault.png"); 
    background-repeat: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

那里有两个“问题”：

此属性中的真正错误：
```
background-repeat: no-repeat center center fixed; 
```
您在一个属性 (background-repeat) 中设置了 background-repeat、background-position 和 background-attachment 的值，此时应该像这样分隔：
```
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
```
不是错误，而是导致问题的原因：background-size:cover 部分。您正在设置背景以适应 html 元素的大小，当您添加新段落时，文档（和 html）的大小会发生变化，并且图像会调整大小，这导致您在共享的两个图像中看到的“缩放效果”。

【讨论】：

你我的朋友，让我整晚坐在我的电脑前值得。谢谢你。有什么方法可以让背景图像保持原样（出现上述错误），还是我最好重新创建背景图像，修复错误，然后处理放大一点的图像？
如果你想让球队的名字总是在同一个位置，你可以从图片中取出它（如果你创建了图像）并像我在这个中所做的那样将它添加到 HTML JSFiddle
从头开始，我只是打算将 img 放入 html 中。感谢您的帮助！
我看到的问题是图像中的文字可能会变得混乱。有很多因素可能会影响图片（以及里面的文字）的显示方式：用户以纵向或横向模式查看网站、屏幕大小、窗口大小调整......我会将文字作为独立元素从背景图像。但这是我的意见，做最适合你的事情:)

【解决方案2】：

您可以尝试将图片添加为背景图片
background: url('images/bg.jpg');

注意：否则为更好地理解提供一个小提琴

你为什么不使用 PhotoShop 或其他任何东西来编辑图像以在其中包含文本：P 只是说

【讨论】：

不，不是那样。我已经有一个背景图片集。我正在尝试在该部分的 IMG 下添加文本，但它看起来不像在背景 IMG 中放大。我知道两者之间没有相关性，它似乎只是这样做
什么背景图片
@ZachKaplan 我认为您正在寻找类似this