用心打造
VPS知识分享网站

如何使用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="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地址等测试站点来查看您的网站。

赞(0)
未经允许不得转载;国外VPS测评网 » 如何使用HTML和CSS创建自定义网页登录页面?
分享到