Question

我是制作HTML的初学者。我只是在高中。

我们的任务是建立一个网站，我希望它看起来像下面的图片。我们只允许使用记事本来创建它，不允许应用程序。（像Adobe Dreamweaver）我在背景中放置图片时遇到问题（参见图像，红色部分带箭头）。我也想知道如何插入图片以及如何在其周围包装文本。我怎样才能在记事本中取消它？

提前致谢！

HERE'S THE PICTURE

Answer 1

请使用此：

  $('.numbers').focusout(function() {
    var numbers = /^[-+]?\d+$/;
    if ($(this).val().match(numbers)) {
      validInput('.numbers');
      $('.valid-checked').addClass("checked").css("color", "rgb(36,199,90)");
      $('.invalid-checked').removeClass("invalid");
    } else {
      $('.invalid-checked').addClass("invalid").css("color", "rgba(255, 0, 0, 0.92)");
      $('.valid-checked').removeClass("checked");
    }
});

将paper.gif替换为您自己的背景图片

Answer 2

有几种方法可以做到这一点。首先，如果你想要一个图像到达左边的红色和右边的红色，你必须这样做：

<div class="mainDiv">
   <div class="greenDiv">
      And here goes the content of your webiste
   </div>
</div>

将图像放在红色上的CSS：

.mainDiv {
  background-image: url("folder/file.png");
  background-repeat: no-repeat; //if you dont want it to be reppeated.
}

如果您不熟悉css，可以在div mainDiv内使用它，如下所示：<div class="mainDiv" style="background-image:url('folder/file.png'); background-repeat:no-repeat;"></div>

但是，如果你想为每个红色使用一个图像，你必须将它们分成两个div，如下所示：

<div class="leftRed" style="background-image:url('folder/img1.png'); background-repeat:no-repeat;"></div>
<div class="greenDiv"></div>
<div class="rightRed" style="background-image:url('folder/img2.png'); background-repeat:no-repeat;"></div>

Answer 3

我不知道从哪里开始，但你需要学习很多东西（这是件好事！）。我清理了您的代码并在background-image元素中添加body，因为这就是您想要实现的目标。

background-image: url('http://i.imgur.com/AzeiaRY.jpg');

不推荐使用align="center。不要使用它来获得有效的标记。请使用<style>中的<head>使用text-align: center;或更好地使用an external stylesheet。它是对另一个文件的引用，用于将样式添加到文档的body。

您可以在Mozilla Developer Network找到有关 CSS入门？的更多信息。

<html>

<head>
<title> My First HTML File</title>

<style type="text/css">

body { 
background-image: url('http://i.imgur.com/AzeiaRY.jpg'); 
border: 30px solid red;
color: #fff; /*colour of text*/
margin-left: 50px;
margin-right: 50px;
font-style: normal;
font-family: Gisha, Verdana, Lucida Console, Helvetica;
font-size: 12pt;
}


</style>



</head>

<body>

<h4>Home Page</h4>
<hr>

<br>

<p style="text-align: center;">
<a href="url" style="color:white"> Home</a> | 
<a href="url" style="text-decoration:none; color:white">About </a>| 
<a href="url" style="text-decoration:none; color:white">Portfolio</a> | 
<a href="url" style="text-decoration:none; color:white">Contact </a>
</p>



<br><br>
<h2  style="text-align: center;"> WELCOME to my website!</h2>


<p> some info </p>



<br>
<br>


</body>

</html>

在边距内添加背景图片

3 个答案: