在网页设计中,内容居中是一个常见的需求,它可以使网页看起来更加美观、整洁。在 HTML 中,我们可以使用多种方法来实现内容居中的效果。
1. 使用 margin 属性: 可以通过将 margin-left 和 margin-right 设置为 auto 来将元素水平居中: div {margin: 0 auto;} 或者可以将元素的 left 和 right 设置为 0 ,然后将 margin-left 和 margin-right 设置为 auto : div {position: absolute; left: 0; right: 0; margin: 0 auto;} 或者可以将元素的 left 和 width 设置为 50% ,然后将 margin-left 设置为负的一半 width 的值: div {position: absolute; left: 50%; width: 200px; margin-left: -100px;} //200px 为元素的宽度
2. 使用 text-align 属性: 通过将 text-align 设置为 center 来水平居中文本内容: p {text-align: center;} 通过将 text-align 设置为 justify 来水平居中文本内容: p {text-align: justify;} 通过将 display 设置为 table 来水平居中文本内容: p {display: table; margin: 0 auto;} 通过 flexbox 来水平居中文本内容: .container {display: flex; justify-content: center;} //justify-content 用于水平对齐元素。
article
元素表示自包含HTML文档中的内容。
以下代码显示了正在使用的 article
元素。
<!DOCTYPE HTML>
<html>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1Like</h1>
<h2>H2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">XML</h1>
This is a test.
<section>
<h1>HTML</h1>
This is a test.
</section>
</section>
<footer>
<nav>
Nav
</nav>
</footer>
</article>
</body>
</html>
section
元素是HTML5的新功能,表示文档的一部分。
section
元素应用于包含内容将在文档的大纲或目录中列出。
段元素通常包含一个或多个内容段落和标题,但标题是可选的。
以下代码显示了正在使用的section
元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<section>
<hgroup>
<h1>H1</h1>
<h2>H2</h2>
</hgroup>
This is a test.
<section>
<h1>H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
</body>
</html>
nav
元素表示文档的一个部分包含到其他页面或同一页面的其他部分的链接。
此元素标识文档的主要导航部分。
以下代码显示了使用 nav
元素。
<!DOCTYPE HTML>
<html>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by www..cn</h2>
</hgroup>
<nav>
<h1>Contents</h1>
<ul>
<li><a href="#fruitsilike">XML</a></li>
<ul>
<li><a href="#morefruit">HTML</a></li>
</ul>
<li><a href="#activitiesilike">CSS</a></li>
<ul>
<li><a href="#tritypes">Java</a></li>
<li><a href="#mytri">Javascript</a></li>
</ul>
</ul>
</nav>
</header>
<section>
<header>
<hgroup>
<h1 id="fruitsilike">Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1 id="morefruit">Inner H1</h1>
This is a test.
<section>
<h1>More information</h1>
This is a test.
</section>
</section>
</section>
<section>
<header>
<h1 id="activitiesilike">Activities</h1>
</header>
<section>
<p>This is a test.</p>
<h1 id="tritypes">Java</h1>
This is a test.
<section>
<h1 id="mytri">Javascript</h1>
</section>
</section>
</section>
<nav>
More Information: <a href="http://www..cn">Learn More About</a>
<a href="http://www..cn">Learn More About</a>
</nav>
<footer id="mainFooter">
©2011, www..cn. <a href="http://www..cn">Visit</a>
</footer>
</body>
</html>
details
元素创建一个节,用户可以展开该节以获取有关主题的更多详细信息。
details
元素通常包含一个摘要元素,用于为详细信息部分创建标签或标题。
以下代码显示如何使用摘要和详细信息元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
details {
border: solid thin black;
padding: 5px
}
details>summary {
font-weight: bold
}
</style>
</head>
<body>
<article>
<h1>H1</h1>
</header>
<section>
<p>This is a test.</p>
<details>
<summary>Summary</summary>
<ol>
<li>XML</li>
<li>HTML</li>
<li>CSS</li>
</ol>
</details>
</section>
</article>
</body>
</html>
header
元素表示节的标题。它可以包含任何您想要表示为头部的内容。
头部元素通常包含一个 h1?h6
元素或一个 hgroup
元素,它还可以包含节的导航元素。
footer
元素是页眉的补充,表示部分的页脚。
页脚通常包含关于版块的摘要信息,并且可以包括作者的详细信息,权限信息。
您可以在以下代码中看到页眉和页脚元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<header>
<hgroup>
<h1>H1</h1>
<h2>by www..cn</h2>
</hgroup>
</header>
<section>
<header>
<hgroup>
<h1>Section h1</h1>
<h2>Section h2</h2>
</hgroup>
</header>
This is a test.
<section>
<h1>Inner Section h1</h1>
This is a test.
<section>
<h1>More information</h1>
This is test.
</section>
</section>
</section>
<footer id="mainFooter">
©2015, www..cn. <a href="http://www..cn">Visit</a>
</footer>
</body>
</html>
aside
元素表示仅与周围元素相关的内容。这类似于书或杂志中的侧边栏。
内容与页面,文章或部分的其余部分有关,但它不是主要流程的一部分。
下面的代码添加和样式 aside
元素。
<!DOCTYPE HTML>
<html>
<head>
<style>
article {
border: thin black solid;
padding: 10px;
margin-bottom: 5px
}
aside {
width: 40%;
background: white;
float: right;
border: thick solid black;
margin-left: 5px;
}
aside>section {
padding: 5px;
}
aside>h1 {
background: white;
color: black;
text-align: center
}
</style>
</head>
<body>
<article>
<header>
<hgroup>
<h1 id="fruitsilike">H1</h1>
<h2>H2</h2>
</hgroup>
</header>
<aside>
<h1>Why</h1>
<section>
This is a test:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ol>
</section>
</aside>
</article>
</body>
</html>
以下代码显示了一个应用于某些文本的 HTML 元素的简单示例。I like codeweb/code and CSS.起始标记为code,结束标记为/ code。标...
HTML统一资源定位器 (Uniform Resource Locators) URL 是一个网页地址。URL 可以由字母组成,如 ".cn",或互联网协议(IP)地址...
AJAX - onreadystatechange 事件当发送一个请求后,客户端需要确定这个请求什么时候会完成,因此,XMLHttpRequest对象提供了on...
头部头部包含文档标题、作者和版本信息。头部可选但是必须在文档的顶部。= 使用 AsciiDoc 编写文档 =Joe Bloggs jbloggs@mymail....
原文出处: http://chengway.in/post/ji-zhu/core-data-by-tutorials-bi-ji-siRaywenderlich家《Core Data by Tutorials》这本书...