sql初学者指南_Web设计初学者指南：第3部分-优快云博客

sql初学者指南

在本系列的最后一部分中，我们将在我们的网站上添加一个新页面，在这里我们将尝试一些HTML元素，并扩展我们CSS知识。

此系列中也可用：

制备

我们将在网站上添加一个新页面，该页面将用作测试不同HTML元素并学习使用CSS设置样式的沙箱。我们将这个页面称为“ html-elements.html”，因此我们要做的第一件事是在导航菜单中添加指向该页面的链接。

在“ html-from-scratch.html”文件中，找到导航（<nav>）部分：

<nav> 
	  <ul> 
	    <li><a href="my-first-webpage.html">Home</a></li> 
	    <li><a href="http://net.tutsplus.com">Nettuts</a></li> 
	    <li><a href="http://www.google.com">Google</a></li> 
	  </ul> 
	</nav>

并将中间链接（Nettuts）替换为指向“ html-elements.html”文件的链接；将链接文本设置为“元素”：

<li><a href="html-elements.html">Elements</a></li>

现在，复制“ my-first-webpage.html”文件并将其命名为“ html-elements.html”。

突出显示当前页面

在新HTML文件中，删除<section>标记之间的所有内容，以删除页面中的所有主要内容。我们将很快填写新内容。首先，我们需要在导航中区分当前我们当前位于哪个页面上，每个链接看起来都相同，这会导致各种可用性问题。

为了将指向当前页面的链接与其他链接区分开，我们将<current>类添加到<li>中，该类包含指向当前页面的链接。

因此，在“ my-first-webpage.html”页面上，将第一个链接更改为：

<li class="current"><a href="my-first-webpage.html">Home</a></li>

然后在“ html-elements.html”上将中间链接更改为：

<li class="current"><a href="html-elements.html">Elements</a></li>

这使我们可以使用“ nav .current a”定位当前页面的链接。在CSS文件中，找到以下样式：

nav a:hover { 
	  text-decoration: underline; 
	}

将选择器更改为：

nav a:hover, nav .current a {

您可以使用选择器来定位多个元素，方法是用逗号（，）分隔每个元素。现在，如果您在浏览器中查看每个网页，则相应的链接应带有下划线。

文字元素

在新页面的<section>内，粘贴以下内容。它包含一些新HTML元素：

<h2>Text Elements</h2> 
	<p> 
	  Pellentesque habitant morbi tristique <strong>senectus et netus</strong> 
	  et <em>malesuada fames ac</em> turpis egestas. 
	  <q>Vestibulum tortor quam, feugiat vitae, ultricies eget</q> 
	  <cite>Dan Harper, 2012</cite>.<br /> 
	  Donec eu libero sit amet quam egestas semper. Aenean 
	  <a href="http://example.com">ultricies mi vitae</a> 
	   est. Mauris placerat eleifend leo. 
	</p>

忽略文本本身，它只是Lorem Ipsum占位符文本，自1500年代以来一直在印刷行业中使用。

在第3行，我们具有<strong>标记，默认情况下，该标记使浏览器中的文本变为粗体。使用强使文本突出。较旧HTML版本使用<b>标记。但是此后不推荐使用。坚持<strong>。

第4行引入了<em> ，它通过使文本变为斜体来强调文本。使用它可以使文本突出显示-但不如<strong>那样突出。较旧HTML版本使用<i>标记；但是，像<b>一样，此名称已弃用。

在下面的代码行中，我们演示<q>在文本中标记一个小引号。它会自动将其中的文本用引号引起来。

<cite>与<q>标记相关，应用于在文本中添加引号的引用。

大报价

我们已经看到了如何使用<q>标记在文本中插入小引号，但是HTML还为大引号提供了<blockquote> ，例如Nettuts +

这就是Nettuts +上<blockquote>的内容

在前面的文本之后，将以下内容添加到新HTML中：

<h2>Large Quotes</h2> 
	<blockquote> 
	  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p> 
	  <p><cite>Joe Bloggs, 2010</cite></p> 
	</blockquote> 
 
	<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
	Donec eu libero sit amet quam egestas semper.</p>

在这里，你可以看到，我们有内部的<BLOCKQUOTE>段落。我们还可以使用内部的<cite>标记添加引文。

将以下CSS样式添加到样式表中以对blockquote进行样式设置：

blockquote { 
	  border-left: 2px solid #999; 
	  margin-left: 30px; 
	  padding-left: 10px; 
	}

最近，在大引用的左侧添加小边框已成为一种普遍趋势。

清单

<h4>Header Level 4</h4> 
	<ul> 
	  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
	  <li>Aliquam tincidunt mauris eu risus.</li> 
	  <li>Vestibulum auctor dapibus neque.</li> 
	</ul> 
 
	<ol> 
	  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
	  <li>Aliquam tincidunt mauris eu risus.</li> 
	  <li>Vestibulum auctor dapibus neque.</li> 
	</ol>

在这里，您可以看到无序列表（<ul>）和有序列表（<ol>）的使用。

您可以使用list-style-type CSS属性更改项目符号的样式 。例如，我们可以使用以下命令将用于有序列表的项目符号从十进制数字更改为罗马数字：

section ol li { 
	  list-style-type: lower-roman; 
	}

在“部分”的“有序列表”中定位“列表项”。

不喜欢无序列表上使用的传统圆形项目符号吗？正方形呢：

section ul li { 
	  list-style-type: square; 
	}

有关可以使用的所有不同样式，请参见W3Schools上的此页面。

桌子

您可能已经读过，不应在网站中使用表格。严格来说，这是指使用表格创建网站的布局，因为我们现在使用CSS来创建布局。

表仅应用于表格数据 。

要标记表，请使用<table>标记。然后使用<tr>标记创建表中的每一行。然后，每一行可以是两种类型的单元格之一：

标题单元格标记列中的顶部单元格；
包含正常数据的标准单元格 。

建立表格

首先将以下代码添加到您的页面：

<table> 
	  <tr> 
	    <th>Column #1</th> 
	    <th>Column #2</th> 
	    <th>Column #3</th> 
	  </tr> 
	</table>

您可以在这里看到我们创建了一个新表，其中只有一行。然后，该行包含三个标有“列＃1”至“列＃3”的标头单元。

让我们向表中添加一些内容–在</ table>标记之前添加以下内容：

<tr> 
	  <td>Lorem ipsum</td> 
	  <td>Dolor sit amet</td> 
	  <td>Consectetuer al</td> 
	</tr> 
 
	<tr> 
	  <td>Adipiscing elit</td> 
	  <td>Habitant morbi</td> 
	  <td>Tristique senectus</td> 
	</tr> 
 
	<tr> 
	  <td>Lorem ipsum</td> 
	  <td>Dolor sit amet</td> 
	  <td>Consectetuer al</td> 
	</tr> 
 
	<tr> 
	  <td>Adipiscing elit</td> 
	  <td>Habitant morbi</td> 
	  <td>Tristique senectus</td> 
	</tr>

造型桌子

内容在那里，而且绝对是一张桌子，但让我们为其添加一些样式。

首先，我们希望表格占据其容器的整个宽度。我们还需要删除表格中的边框，以便我们可以正确设置行和单元格的样式。将以下内容添加到您CSS文件中：

table { 
	  border-collapse: collapse; 
	  width: 100%; 
	}

现在，通过将标题单元格的背景色设置为深灰色，将文本颜色设置为白色，使标题单元格突出：

th { 
	  background-color: #222; 
	  color: #fff; 
	}

向每个单元格添加一个小的填充，以及一个边框，以帮助分隔每个单元格，并具有以下内容：

th, td { 
	  border: 1px solid #444; 
	  padding: 5px; 
	}

最后，我们将在表中添加一些斑马线（交替的行背景色）：

tr:nth-child(even) { 
	  background-color: #fdfdfd; 
	} 
 
	tr:nth-child(odd) { 
	  background-color: #f1f1f1; 
	}

在这里，我们使用新CSS3 ：nth-child（odd）和：nth-child（even）选择器来定位每个偶数行和每个奇数行。

这是一个包装！

到目前为止，您应该在如何使用HTML标记简单网页方面有扎实的基础，并且应该了解如何使用CSS来定位和设置页面上特定HTML元素的样式。我们已经介绍了很多内容，但是您仍然处在浅水区。继续探索Tuts + Premium，以了解更多信息！

翻译自: https://code.tutsplus.com/tutorials/the-beginners-guide-to-web-design-part-3--pre-8959

sql初学者指南