집 > 기사 > 웹 프론트엔드 > html5에서 초대장을 만드는 방법은 무엇입니까? 초대장 작성 방법 (코드 예)

html5에서 초대장을 만드는 방법은 무엇입니까? 초대장 작성 방법 (코드 예)

青灯夜游앞으로: 2018-10-26 17:06:0110400검색

이 글의 내용은 HTML5로 초대장 만드는 방법을 소개하는 것인가요? 초대장을 만드는 방법(코드 예) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

목적: 이 간단한 초대장을 만드는 것은 초보자가 웹 개발을 시작할 수 있도록 하기 위한 것입니다.

페이지를 만들기에 앞서 초대장 전체의 전체적인 모습을 살펴보겠습니다.

1. 먼저 HTML 코드를 작성합니다

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">
　　　<title>邀请函</title> 
</head>  
<body> 
　　<div id="container">
　　　　<h1>hello world</h1>
　　　　<p>欢迎来到虚拟世界，在这里发挥你的想象力，探索无限的可能。</p> 
　　　　<a href="#" id="button">点击进入</a>
　　</div>
</body>
</html>

#🎜 🎜 #Description:

aba7b36f87decd50b18c7e3e3c150106: 문서의 선언과 같은 모양입니다.

100db36a723c770d327fc0aef2ce13b1 태그: html의 시작을 나타내고, 73a6ac4ed44ffec12cee46588e518a5e은 html의 끝을 나타냅니다.

93f0f5c25f18dab9d176bd4f6de5d30e 태그: html5 페이지의 다양한 속성에 대한 설명과 구성 정보가 포함되어 있습니다. 따라서 어느 정도는 '신분증'으로 간주할 수 있습니다.

0b06b01d593eb6158ab14a0c0e15c90d 태그의 문자 세트를 사용하여 설정하고 UTF-8로 문자 인코딩을 지정합니다. "유니버설 코드" 입니다.

b2386ffb911b14667cb8f0f91ea547a7 태그: 브라우저의 메뉴 표시줄에 표시되는 페이지 제목입니다.

6c04bd5ca3fcae76e30b72ad730ca86d 태그: 시청자에게 표시되는 모든 콘텐츠 정보를 포함합니다.

dc6dce4a544fdca2df29d5ac0ea9906b 태그: 컨테이너와 동일한 공통 블록 수준 요소로 div+css 레이아웃에 자주 사용됩니다. 여기서는 페이지 위치를 조정하는 데 사용합니다.

4a249f0d628e2318394fd9b75b4636b1 태그: 제목이며 1부터 6까지 6개의 레벨이 있습니다.

e388a4556c0f65e1904146cc1a846bee 태그: 단락을 나타냅니다.

3499910bf9dac5ae3c52d5ede7383485 태그: 링크입니다.

2. 페이지를 아름답게 만듭니다: CSS

1 페이지에 배경 이미지를 추가합니다. 🎜🎜 #

html,body{
    height: 100%;
}body {
    background: url(images/1.jpg) center center;
    background-size: cover;
}

웹페이지에 배경 이미지를 추가할 때 선택한 배경 이미지의 픽셀이 비교적 크고 브라우저 창에 맞지 않을 수 있으므로 본문의 배경 속성을 가로 및 세로 중앙에 배치합니다. 세로 방향(가운데), 브라우저는 기본적으로 본문에 height 속성을 제공하지 않으므로 height: 100% 속성을 본문과 본문의 부모(html)로 설정해야 합니다. 배경 이미지를 적응적으로 전체 화면에 채우려면 본문에 background-size:cover 속성을 설정하세요.

2. 웹페이지에 글꼴 스타일 추가

html,body{
    height: 100%;
    font-family: sans-serif;
    color: #801449;
}

font-family: 속성으로 글꼴을 변경할 수 있습니다.

color: 글꼴 색상을 변경할 수 있습니다. CSS에는 상속 메커니즘이 있으므로 후속 요소에는 이 속성이 있습니다.

3. 초대장의 내용 영역 위치를 조정합니다.

body {
    background: url(images/1.jpg) center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    position: relative;
}#container {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

우선, 우리는 margin: 0;padding: 0;을 사용합니다. 이는 페이지 요소에 대해 브라우저에서 미리 설정한 기본 여백 값 중 일부를 명확히 할 수 있는 매우 일반적인 관행입니다. , CSS 독립 제어를 더욱 정확하게 만듭니다.

여기에서는 id 선택기(#+id 이름)를 사용하고 너비를 100%로 설정합니다. text-ailgn:center를 사용하여 텍스트를 가로로 가운데에 맞춥니다.

그렇다면 어떻게 수직 플레이를 달성할 수 있을까요? 여기서는 위치 지정이 사용됩니다. 절대 위치 지정을 기반으로 하는 컨테이너의 상위 속성을 제어해야 합니다. 컨테이너를 절대 위치 지정하려면 해당 부모(본문)를 상대 위치 지정으로 설정해야 합니다. 그런 다음 이 속성을 사용하여 상단에서 상단 50%를 멀리 만듭니다.

아직 끝나지 않았습니다. html5의 변환 속성을 사용하여 TranslateY(-50%)를 설정할 수 있습니다. 즉, 높이를 절반만큼 위로 이동할 수 있습니다.

이렇게 하면 전체 컨테이너가 페이지 중앙에 표시됩니다.

4. 콘텐츠 라벨의 일부 텍스트 글꼴과 크기를 설정합니다.

h1 {
    font-size: 54px;
    text-transform: uppercase;
    margin-bottom: 20px;
}p {
    font-size: 21px;
    margin-bottom: 40px;
}a {
    font-size: 18px;
    color: #8f3c3c;
}

설명:

text-transform:uppercase: 텍스트가 대문자로 변환됩니다.

margin-bottom:20px : 여기에는 상자 모델이 포함됩니다. 이는 아래쪽 테두리의 너비가 20px임을 의미합니다.

5. 초대 버튼을 만드세요.

a {
    font-size: 18px;
    color: #8f3c3c;
    border: 1px solid #c66c6c;
    border-radius: 3px;
    padding: 10px 100px;
    text-decoration: none;
}

border: 테두리를 설정합니다. 이 속성의 세 가지 매개변수는 각각 테두리 너비 1px, 실선 및 색상을 나타냅니다.

border-radius: 테두리에 3px 둥근 모서리를 설정합니다.

패딩: 위쪽 및 아래쪽 패딩은 10px이고 왼쪽 및 오른쪽 패딩은 100px입니다.

text-꾸밈:none : 링크의 밑줄이 제거됩니다.

전체 CSS 파일:

 html,body{
    height: 100%;
    font-family: sans-serif;
    color: #801449;
}
body {
    background: url(images/1.jpg) center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    position: relative;
}
#container {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
h1 {
    font-size: 54px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
p {
    font-size: 21px;
    margin-bottom: 40px;
}
a {
    font-size: 18px;
    color: #8f3c3c;
    border: 1px solid #c66c6c;
    border-radius: 3px;
    padding: 10px 100px;
    text-decoration: none;
}

# 🎜🎜#3. 페이지에 대한 상호 작용을 만듭니다

var btn = document.getElementById('button');
btn.onclick = function(e) {
    //preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。
    e.preventDefault();     
    btn.innerHTML = "正在进入..."
    btn.style.border = "0";
}

먼저 3499910bf9dac5ae3c52d5ede7383485에 대한 버튼으로 ID를 추가합니다.

document.getElementById(id 이름)를 사용하여 a 링크를 가져와 변수 btn에 할당합니다.

그런 다음 btn에 독립형 속성을 추가하고 실행 함수를 호출합니다.

 e.preventDefault(); //将阻止其默认的链接跳转。
btn.innerHTML = "正在进入..." //改变文本内容。
btn.style.border = "0";

위 내용은 html5에서 초대장을 만드는 방법은 무엇입니까? 초대장 작성 방법 (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：간단한 파쿠르 게임을 구현하는 방법은 무엇입니까? (자세한 코드 설명)다음 기사：간단한 파쿠르 게임을 구현하는 방법은 무엇입니까? (자세한 코드 설명)