要自定义创建登录页面，您需要有一个文本编辑器，无论是CPANEL文件管理器，NotePAD ++或您选择的任何文本编辑器中提供的文本编辑器。如果您使用的是CPANEL等控制面板，则会将这些文件添加到域名的Public_html目录或文档root中。如果您未使用控制面板，则最有可能将这些文件添加到/ var / www / html，尽管域名文档根的位置可能会有所不同。
创建您的站点文件
让我们首先创建索引.html文件并在文本编辑器中打开它。
为何指数？
在域文件夹（或public_html）中设置Apache的方式，如果存在这些文件并将此文件作为文件夹的主页，则读取您的DirectoryIndex，例如index.htm，index.html或index.php。如果这些文件中没有一个，那么它将显示一个索引列表。您可以通过您的.htaccess文件更改目录索引。
您的HTML本质上是您网站页面的结构，因此您需要确保它设置正确。
对于此示例，您需要识别HTML脚本，标题和正文。您可以使用以下”标签”来执行此操作
<html>
<head></head>
<body></body>
</html>
标签是我们如何在HTML文档中识别不同元素，通常成对出现。大多数标签都有一个开始\ <>和一个结束，一些标签将没有第二个标记，并且将以/>结束，这被称为”空元素”，主要看出在链接和图像上。
头部标签
这是您存储不是内容的数据，例如站点元数据，文档标题，字符集，内联样式，脚本链接和其他元信息。我们将在我们的头部使用两个不同的标签：
标记 – 此标记将更改选项卡中显示的内容
链接标记 – 这是您将在其中附加任何外部样式或脚本的位置。我们将使用它来添加样式表到我们的网站
身体标签
这是您的网站内容将要去的地方。如果我们想，我们将能够直接添加测试。例如，如果我们添加”Hello World！”在我们的HTML中，它将如下所示：
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
添加此代码并使用浏览器访问您的域名后，网页如下所示：
接下来，让我们在HTML中连接样式表。如上所述，您可以通过添加将样式表链接到HTML文档的头部来附加样式表。完成后，它应该如下所示：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.hostwinds.cn/tutorials/css.css"/>
</head>
<body>
</body>
</html>
添加容器和内容
为了帮助更好地组织您的内容，您可以使用标签来指定不同的对象，例如容器，图像，标题等。您将在稍后在样式表中调用这些不同的标签。
对于这个例子，我将使用div容器和\
和 \
标签。
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="https://www.hostwinds.cn/tutorials/css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
在添加样式表之前，网页如下所示：
向您的网站添加样式
创建和编辑样式表的CSS.CSS’
现在，让我们创建一个.css文件。这应该与上面的文件名匹配，因此我们的示例是CSS.CSS。您可以调用您在样式表中的HTML文档中通过标记标记的不同元素。
在这个例子中，我们有4个不同的元素：身体，div，h1和p。 下面，我们可以看到如何使用这些标签来更改背景，中心，并更改文本的大小。 我们还将演示如何添加文本阴影以帮助清晰。
这是我们的CSS.css文件：
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
您可以添加许多不同的属性您可以添加到您的样式表中。 在本文中，我们刚刚涵盖了一些基本选择。
许多不同的属性需要略微不同的结构，具体取决于它的变化。
测试您的网站
现在您可以查看新的着陆页！如果您还没有将域指向托管，您可以使用Hosts.cx或专用IP地址等测试站点来查看您的网站。
