How to create a simple single-page layout in HTML (code sharing)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to create a simple single-page layout in HTML (code sharing)

奋力向前

Aug 09, 2021 pm 04:27 PM

html

In the previous article "Teach you step by step to use CSS to create a simple and beautiful navigation bar (detailed code explanation)", I introduced you how to use CSS to create a simple and beautiful navigation bar. The following article will introduce to you how to use HTML to create a simple page layout. Let's see how to do it together.

How to create a simple single-page layout in HTML (code sharing)

Most web pages on the Internet are written in html, and html is combined with css layout to create a simple and beautiful web page.

Code example

<!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/imghw/default1.png"  data-src="//static.runoob.com/images/demo/demo1.jpg"  class="lazy"   alt="#"    style="max-width:90%"  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/imghw/default1.png"  data-src="//static.runoob.com/images/demo/demo4.jpg"  class="lazy"   alt="#"    style="max-width:90%"  style="max-width:90%">
	</a>
	</div>
</div>
</body>
</html>

Copy after login

The code rendering is as follows:

How to create a simple single-page layout in HTML (code sharing)

Code steps:

1. Start the HTML source code. <html>The tag language includes [start tag] and [end tag], and the middle is the content of the tag. First we enter the head and tail.

<html>
</html>

Copy after login

2. A simple HTML document, <head>with the most basic necessary elements. Add the title <title> tag in the middle, and add the page title name in the title title: css page layout, you don’t need to write it.

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

Copy after login

3. Web page layout<style> Tags are used to define style information for HTML documents. Creating advanced layouts is very time-consuming. Using templates is a quick way to be found by search engines. Lots of free website templates.

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

Copy after login

4, <body> elements contain all the content of the document, such as: text, hyperlinks, images, tables and lists, etc.

<html>

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

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

</html>

Copy after login

Recommended learning: Html video tutorial

The above is the detailed content of How to create a simple single-page layout in HTML (code sharing). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn