Heim > Artikel > Web-Frontend > So erstellen Sie ein einfaches Einzelseitenlayout in HTML (Code-Sharing)

So erstellen Sie ein einfaches Einzelseitenlayout in HTML (Code-Sharing)

奋力向前Original: 2021-08-09 16:27:018592Durchsuche

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS eine einfache und schöne Navigationsleiste erstellen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit CSS eine einfache und schöne Navigationsleiste erstellen. Im folgenden Artikel erfahren Sie, wie Sie mithilfe von HTML ein einfaches Seitenlayout erstellen.

Die meisten Webseiten im Internet sind in HTML geschrieben, und HTML wird mit CSS-Layout kombiniert, um eine einfache und schöne Webseite zu erstellen.

Codebeispiel

<!DOCTYPE html>
<html>
<head>
<title>css网页布局 </title>
<meta charset="utf-8">

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
  background-color: #f1f1f1;
  }

.topnav {
  overflow: hidden;
  background-color: #f61137;
}

.topnav a {
  float: left;
  color: #0017f9;
  padding: 10px 100px;
  text-decoration: none;
}

.topnav a:hover {
 background-color:#7efe51;
 

</style>
</head>
	
	
<body>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
      <img src="//static.runoob.com/images/demo/demo1.jpg" alt="#" width="800"    style="max-width:90%">
    </a>
	  </div>
	</div>
 <div class="topnav">
  <a href="#">图片</a>
  <a href="#">视频</a>
  <a href="#">关于</a>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
      <img src="//static.runoob.com/images/demo/demo4.jpg" alt="#" width="800"    style="max-width:90%">
	</a>
	</div>
</div>
</body>
</html>

Die Codewiedergabe ist wie folgt:

So erstellen Sie ein einfaches Einzelseitenlayout in HTML (Code-Sharing)

Codeschritte:

1. Starten Sie den HTML-Quellcode, Die Tag-Sprache ist [Start-Tag] und [End-Tag], die Mitte ist der Inhalt des Tags, zuerst geben wir Kopf und Ende ein. 标签语言有【开始标签】和【结束标签】，中间为标签的内容，先我们输入头和尾。

<html>
</html>

2、一个简单的 HTML 文档，带有最基本的必需的元素。在中间加入标题<title></title>标签，在title标题中加入网页标题名：css面页布局，可以不写。

<html>
<head>
<title>css网页布局 </title>
</head>
</html>

3、网页布局<style></style> 标签用于为 HTML 文档定义样式信息，创建高级的布局非常耗时，使用模板是一个快速的话，搜索引擎可以找到很多免费的网站模板。

<html>
<head>
<title>css网页布局 </title>
</head>
<style>...网页布局...
</style>
</html>

4、

<html>

<head>
<title>css网页布局</title>
</head>

<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

2. Ein einfaches HTML-Dokument, mit den grundlegendsten notwendigen Elementen. Fügen Sie das Titel-Tag <title></title> in der Mitte hinzu und fügen Sie den Titelnamen der Webseite in den Titeltitel ein: CSS-Seitenlayout, Sie müssen es nicht schreiben.

rrreee3. Das Tag „Webseiten-Layout“ wird zum Definieren von Stilinformationen für HTML-Dokumente verwendet und ist eine sehr zeitaufwändige Möglichkeit viele kostenlose Website-Vorlagen. rrreee

4. Das -Element enthält den gesamten Inhalt des Dokuments, wie Text, Hyperlinks, Bilder, Tabellen und Listen usw. 🎜rrreee🎜Empfohlenes Lernen: 🎜Html-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein einfaches Einzelseitenlayout in HTML (Code-Sharing). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 搜索引擎

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was tun, wenn bestimmte HTML-Zeichen nicht eingegeben werden können?Nächster Artikel：Was tun, wenn bestimmte HTML-Zeichen nicht eingegeben werden können?

In Verbindung stehende Artikel

Mehr sehen