Need help? Chat now!

Hostwinds 博客

寻找结果为:


Hostwinds教程:如何在没有站点构建应用程序Pt的情况下构建基本的博客网站。 3 特色图片

Hostwinds教程:如何在没有站点构建应用程序Pt的情况下构建基本的博客网站。 3

通过: Hostwinds Team  /  十二月 28, 2018


主管编码博客系列的第3部分在这里,人们!在第1和第2部分,我们为我们的博客网站带来了一个使用HTML的HTML和三个网页的主页,用于使用HTML的三个假设博客文章。进入CSS!CSS是一种编程语言,与您的HTML代码一起工作,以使您的网站看起来更好,更加自定义。我们在这里得到了如此多的涵盖,所以紧张!在我们开始创建我们的第一个CSS文档之前,我们将备注如何将CSS文档链接到我们的HTML文档。这很容易!

哦还有 在我们开始之前 将CSS文档链接到我们的HTML文档,请签署以下链接到本博客系列的第1部分,本博客系列的第2部分,以及我们以前博客帖子的形式的"Hostwinds HTML炒作2:标记"的撰写谈话"和"Hostwinds CSS聊天。"

Hostwinds教程:如何在没有站点构建应用程序的情况下构建基本的博客网站Pt.1

Hostwinds教程:如何在没有站点构建应用程序Pt的情况下构建基本的博客网站。 2

Hostwinds HTML Hype第2部分:标签讨论

Hostwinds CSS聊天

P.S.要重申这一点,我们正在创建的博客网站是基本的。希望我们将能够在我们的网站上不断扩展,并慢慢使博客帖子更加美丽/动态/神奇的博客文章。对于所有意图和目的,本博客系列旨在为您提供网站建设的基本面。好的,现在让我们潜入!

第一件事首先:将CSS文档链接到HTML文档

在您的四个HTML文档中添加此代码,在您的四个HTML文档中添加此代码:

记得推保!要审查,我们的四个HTML文档如此时刻:

1.网站首页:

我的博客网站

我的博客网站

博客文章1标题

如果愿意,可以在此处放置博客文章的简短摘要

博客文章2标题

如果愿意,可以在此处放置博客文章的简短摘要

博客文章3标题

如果愿意,可以在此处放置博客文章的简短摘要

感谢您访问此博客网站!

2. Blog Post 1网页:

我的博客网站| 博客1

我的博客网站

博客文章1标题

以下是您可以放置要添加到您的博客帖子的所有文本。

感谢您访问此博客网站!

3. Blog Post 2网页:

我的博客网站| 博客2

博客文章2标题

以下是您可以放置要添加到您的博客帖子的所有文本。

感谢您访问此博客网站!

4. Blog Post 3网页:

我的博客网站| 博客3

博客文章3标题

以下是您可以放置要添加到您的博客帖子的所有文本。

感谢您访问此博客网站!

重要通知: 当我在这些博客文章中插入的代码块太长而无法容纳在窗口中时,将鼠标悬停在该区域上时,该代码的最底部会出现一个小的滚动条。 您可以将滚动条向右滑动以查看整个代码块。

现在,我们将一步一步一步地采用此整个CSS情况。

如何初始设置CSS文档

第1步: 在现在的同一文件夹和文本编辑器中创建一个新文件夹(您在第1部分中将索引和文本编辑器放入相同的文件夹和文本编辑器)。命名文件夹"CSS"。接下来,在该文件夹中创建一个新文件,并将文件"style.csss"命名为您的style.css文档将修改所有您的HTML文档。

第2步: 现在我们可以引用(或"目标")所有标签,我们想要修改如下:

身体{} nav {} h4 {} h3 {} img {} p {} pumpl {}按钮:hover {}页脚{} diver {} .readnext {} #thankyou {}

只是一个提醒:在继续第3步之前,请查看有关CSS选择器,属性,属性值和常规语法的博客文章,如果您还没有在那个竞技场中进行良好。

第三步: 我们希望我们的主页和网页的背景是占用整个页面的图像。您可以选择您喜欢成为您的背景的任何形象,但我们将为本教程命名为"your_background_image.png"的背景图像。而且,我们将在我们的背景中制作云的美丽形象。要使此图片我们的网页"背景"并使其在每个网页中占用整个页面,我们将在"身体"选择器中插入"背景图像"和"背景大小"属性文件的顶部。

注意:您的CSS(和HTML)应该按照顺序在页面上出现,然后是第二个,依此类推。

另一个注意:你可能会问自己,"为什么"/images/your_background_image.jpg的前面有两个时期?"好捕获!你可能记得我们在这个博客系列的第1部分中有关于相关文件路径的讨论。当我们在本博客文章的开头使用相对文件路径时,我们只使用了"/css/style.css"参考的一个时段。这是因为"CSS"文件夹在同一内部我们的index.html文件的文件夹。"/images/your_background_image.jpg"前面有两个句点,因为我们正在告诉浏览器在我们的"CSS"文件夹中,我们的样式.CSS文档是,然后脱离那个"CSS"文件夹,然后进入名为"映像"的不同文件夹,然后抓住名为"your_background_image.jpg"的图像文件。

接下来,我们希望在导航栏中更改链接文本("博客主页")的字体,并使链接文本全部大写。因此,迄今为止的文件应该如下所示:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

第4步: 我们要更改所有标题的字体,使它们的文本全部大写,使标题文本居中,并将文本颜色更改为深蓝色。

接下来,我们将确保图像全部居中,更改它们的宽度,将边框放在周围,并使其边界围绕两侧。使用这些添加,文档如下所示:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

步骤5: 沿着!让我们更改段落的字体和颜色,同时将介绍文本段落。

之后,我们将修改主页上的按钮。要使它们居中,我们将使用以下属性:

display: block;margin-left: auto;margin-right: auto;

要更改背景颜色,要使文本大写,要更改字体系列和字体大小,请将按钮内的文本置,以添加按钮之间的侧面和按钮内的文本之间的空间,给按钮a纯黑色边框,并围绕按钮的角落,我们将生成以下代码:

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

该文档现在应如下所示:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

步骤6: 这部分很酷!要更改主页按钮的颜色并使它们几乎看起来有点看 - 当有人用鼠标悬停在鼠标上时,我们会键入以下代码:

button:hover { background-color: #00a1f5; opacity: .5;}

现在让我们修改我们的页脚和最终div标签。我们将更改变页脚文本(AKA更改字体系列,字体大小,字体颜色和文本对齐),页脚的背景颜色,并通过在此CSS代码中键入,在上面的页脚和区域之间添加一些空间:

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

我们还将修改我们在第1部分中创建的一个标签以了解更好的标记如何工作。我们将在我们的index.html页面中的打开和关闭标签之间的内容的背景进行三种颜色的梯度。这将允许我们看看打开和结束标签之间的代码块嵌套的内容。熊在这里,人们,因为这实际上不会在我们的主页上看起来超级美学。我们将在STYLE.CSS文档的底部添加以下CSS代码,以便我们可以创建此渐变背景:

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

步骤7: 查看整个CSS文档,并确保它看起来很可爱:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

步骤8: 您可以从本博客系列的第2部分记住这一点,但唯一的区别(外部标题和打开和关闭标签之间的文本的一部分,说"博客文章1"而不是"博客文章2"或"博客文章3")在博客帖子之间一个网页和两个博客文章2和3的网页是后者网页包含一个链接,允许用户查看下一个博客文章(博客文章的网页不需要此链接,因为它是最新的博客文章)。在第2部分中,我们将"README"类添加到博客文章的3和3个HTML文档的页脚内的标记。我们现在将在此CSS文档中定位该类以使其文本大写,添加"阅读下一个博客文章"链接之间的空间,并使"感谢您访问此博客网站"!在"阅读下一个博客文章"链接而不是下面(默认情况下)浮动。

要实现这些修改,我们将在CSS文档的底部添加以下块代码:

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

步骤9: 请记住,当我们在第1部分中的index.html文档中添加了该ID到嵌套在我们的index.html文档之间的标记之间的标记?我们这样做是这样我们可以更好地了解IDS如何工作以及如何以CSS为目标。开始了!首先,让我们在STYLE.CSS文档的底部键入以下代码:

#ThankYou { text-transform: uppercase; color: #0b053f;}

现在,我会解释一下。首先,"谢谢你"前面的Hashtag告诉浏览器这是一个ID。只给出

标记在index.html中,ID"Chankyyou"并定位在CSS中的ID,以使该特定段落的文本全部大写和海军蓝色,我们确保只有主页的页脚中的段落以这种方式更改。博客文章1,2和3的网页上页面页面上的相同段落将不会大写,不会是那个海军蓝色。在将上面的代码添加到STYLE.CSS页面后,请继续前进并检查您的网页以查看此区分。

现在,我们的CSS文档将如下所示:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

进入步骤10!

等一下!首先,一个"第三个"

P.S.我不能强调这一点:在更复杂的网站,类,标签和ID中是至关重要的,经常使用。

好的,现在进入第10步!

步骤10: 测试您更新的网站和网页!转到File Explorer,右键单击"index.html"文件,然后单击"打开"。接下来,请选择您首选的Internet浏览器(我推荐谷歌Chrome)。单击"读博客文章"按钮,并注意我们使用CSS的网页的更改。

主页

博客文章1网页

博客文章2网页

博客文章3网页

CSS彩色画布

在结束时,CSS使网站更美观地令人愉悦和动态。 我们希望您能从本辅导博客系列中获利,我们希望继续在未来的博客帖子中开发这个网站。 该计划是让我们的网站在我们前进时更加互动,更加优雅。 SPOILER ALERT:我们甚至可能会在某些时候扔进混合中的一点JavaScript。 我们希望您享受一周的剩余时间。

撰写者 Hostwinds Team  /  十二月 28, 2018