이 글의 내용은 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;
}
var btn = document.getElementById('button');
btn.onclick = function(e) {
//preventDefault() 可以阻止单机链接后浏览器默认的URL跳转。
e.preventDefault();
btn.innerHTML = "正在进入..."
btn.style.border = "0";
}
먼저 3499910bf9dac5ae3c52d5ede7383485에 대한 버튼으로 ID를 추가합니다.
e.preventDefault(); //将阻止其默认的链接跳转。 btn.innerHTML = "正在进入..." //改变文本内容。 btn.style.border = "0";
위 내용은 html5에서 초대장을 만드는 방법은 무엇입니까? 초대장 작성 방법 (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!