首页

创建您的站点文件

头部标签

身体标签

添加容器和内容

和 \

向您的网站添加样式

创建和编辑样式表的CSS.CSS'

测试您的网站

如何使用HTML和CSS创建自定义登录页面

标签： Web Site

创建您的站点文件

头部标签

身体标签

添加容器和内容

和 \

向您的网站添加样式

创建和编辑样式表的CSS.CSS'

测试您的网站

本指南将学习如何使用HTML和CSS在建设登陆页面下创建基本的"基本"。

要创建登录页面，您需要有一个文本编辑器，无论是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="css.css"/>
</head> 
<body>
 </body> 
</html>

添加容器和内容

为了帮助更好地组织您的内容，您可以使用标签来指定不同的对象，例如容器，图像，标题等。您将在稍后在样式表中调用这些不同的标签。

对于这个例子，我将使用div容器和\

和 \

标签。

<!DOCTYPE html>
<html>
<head>
    <title>Coming Soon</title>
    <link rel="stylesheet" href="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地址等测试站点来查看您的网站。

撰写者 Hostwinds Team / 十一月 24, 2018