HTML로 간단한 단일 페이지 레이아웃을 만드는 방법(코드 공유)-HTML 튜토리얼-php.cn

HTML로 간단한 단일 페이지 레이아웃을 만드는 방법(코드 공유)

奋力向前

풀어 주다： 2021-08-09 16:37:09

원래의

8622명이 탐색했습니다.

이전 글 "CSS를 사용하여 간단하고 아름다운 네비게이션 바를 만드는 방법을 단계별로 가르쳐주세요(자세한 코드 설명)"에서는 CSS를 사용하여 간단하고 아름다운 네비게이션 바를 만드는 방법을 소개했습니다. 다음 기사에서는 HTML을 사용하여 간단한 페이지 레이아웃을 만드는 방법을 소개합니다.

HTML로 간단한 단일 페이지 레이아웃을 만드는 방법(코드 공유)

인터넷의 대부분의 웹페이지는 html로 작성되어 있는데, html에 CSS 레이아웃을 결합하여 심플하고 아름다운 웹페이지를 만들어냅니다.

코드 예

<!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>

로그인 후 복사

코드 렌더링은 다음과 같습니다.

HTML로 간단한 단일 페이지 레이아웃을 만드는 방법(코드 공유)

코드 단계:

1 HTML 소스 코드 <html>를 시작합니다. 태그 언어는 [ 시작 태그]와 [끝 태그]이며 가운데가 태그의 내용이며 먼저 머리글과 꼬리를 입력합니다. <html>标签语言有【开始标签】和【结束标签】，中间为标签的内容，先我们输入头和尾。

<html>
</html>

로그인 후 복사

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

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

로그인 후 복사

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

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

로그인 후 복사

4、<body>

<html>

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

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

</html>

로그인 후 복사

2. 가장 기본적인 필수 요소가 포함된 간단한 HTML 문서 . 제목 <title> 태그를 중간에 추가하고 제목 제목에 웹페이지 제목 이름을 추가합니다. CSS 페이지 레이아웃이므로 작성할 필요가 없습니다.

rrreee3. 웹 페이지 레이아웃 <style> 태그는 HTML 문서의 스타일 정보를 정의하는 데 사용됩니다. 템플릿을 사용하면 검색 엔진이 빠르게 찾을 수 있습니다. 많은 무료 웹사이트 템플릿. rrreee

4. 요소에는 텍스트, 하이퍼링크, 이미지, 표, 목록 등 문서의 모든 내용이 포함됩니다. 🎜rrreee🎜추천 학습: 🎜Html 비디오 튜토리얼🎜🎜

위 내용은 HTML로 간단한 단일 페이지 레이아웃을 만드는 방법(코드 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

HTML로 간단한 단일 페이지 레이아웃을 만드는 방법(코드 공유)