cómo hacer una ventana flotante con html y css

여러분 모두에게 좋은 날, 저는 Leandro Galvis입니다이 채널은 Making Pages라고합니다

웹 이 비디오에서 나는 어떻게하는지 보여주고 싶다 웹 페이지의 왼쪽 하단에 떠있는 창 웹 페이지를 업로드하거나 다운로드하는 것과 관계없이 항상 부동 창이 표시됩니다 그래서,이 경우 저는 메시지 만 사용하려고합니다 왼쪽 하단의 텍스트와 다른 동영상의 텍스트가 여기에 구성되어 있습니다

더 대화식, 더 많은 것을 가지기, 움직일 수있는 것, 그런 것들 그런 다음 웹 사이트의 관리 부분을 입력합니다이 이름은 서버의 이름입니다 내가 웹 사이트를 호스팅하고 wp admin으로 끝나는 폴더 우리가 들어올 때, 우리는 여기에 도착했습니다

그런 다음, 외모, 주제, 이 경우 웹 페이지를 보는 방법, 각 주제에있는 모든 내용을 다루는 것입니다 나는 어떤 주제도 될 수있는 깨끗한 비즈니스를 사용하고 있지만 그 중 일부는 주제는 다른 것보다 쉽게 ​​코드를 수정할 수 있지만이 경우에는 그 방법은 어떤 주제에 대해서도 동일합니다 그래서 나는 떠난다 나는 편집자에게 간다 에디터의 주제 나 헤더의 헤더라고 부를 수있는 파일을 찾을 것입니다

거기에, 나는 모든 머리말이 그것을 가져야한다는 머리 글자를 찾을 것입니다 여기에서 그들은 그것을 끝내고, 끝내고, 닫습니다 그럼, 그 머리 꼬리표를 완성하기 전에 뭔가를 넣을거야 다른 동영상에서 "div"라고 불리는 구조를 잘 보여줍니다 각 레이블은 무엇을 의미합니까, div는 무엇입니까, 머리는 무엇입니까, 몸은 무엇입니까? 우리는 그것을 볼 것입니다

하지만, 그럼, 글쎄, 복잡하지 않아 이 비디오에서는 div 만 쓰면 식별자를 넣을 것입니다 id는 동등하고 따옴표로 묶은 다음 이름을 입력합니다 (예 : window) 떠 다니는 준비 됐어 그리고 내가 그 부서를 닫는다

거기에 이미 div가 있습니다이 파일을 업데이트하면 여기에서 내 웹 사이트로 이동합니다 페이지가 정확히 똑같아 보이기 때문에 차이가 없습니다 그래서, 우리가 할 일은 다음과 같습니다 div 내부, div 내부, 여기 절반은, ​​나는이 텍스트 메시지를 쓰고 싶다

예를 들어, 웹 페이지 만들기 채널의 안녕 친구, 내가 간다 이렇게 떠나 이 메시지는 내가 표시하고 싶은 메시지입니다 항상 왼쪽 하단에있는 다음 파일을 업데이트하십시오 그리고 나는 웹 사이트에 와서 그것을 업데이 트하고 그것이 나온 것처럼, 그것은 나타나지 않았어, 뭔가 잘못 됐어, 여기있다, 이것은 따옴표로 들어가야한다

식별자는 따옴표로 묶어야하며, 그렇지 않다면 작동하지 않고 파일을 업데이트하고 여기에 와서 업데이트하면됩니다 이미 있습니다 여기 메시지, 채널의 안녕 친구 웹 페이지 만들기,하지만 내가 원하는 것은 항상 하단에 표시된다는 점에 유의하십시오 웹 사이트 또는 낮은, 항상 그 창은 항상 거기에있다 그래서 우리는 CSS에서 스타일이라는 것을 사용하려고합니다

봐라, 우리는 우리가 그에게 준 이름 인 "floating window"를 고려해야한다 스타일을 수정하기위한 식별자의 이름 그런 다음 여기, 스타일 시트 또는 stylecss로 이동합니다 여기에 들어가고, 여기에 있습니다

웹 사이트가 어떻게 보이는지에 대한 정보입니다 그것은 각 주제에 달려 있기 때문입니다 그래서, 저는 여기에 마지막으로 갈 것입니다 말하자면 그것은 div이고, 나는이 기호, 숫자 및 div 이름을 넣습니다 나는 그를 넣었다, 나의 경우를 위해, 나는 떠있는 창문,이 스타일 코드를 넣었다

우리는 이것을이 괄호 안에 씁니다 그리고 나서 우리는이 모든 것을 수정하려고합니다 그 메시지에 대해 내가 수정하고 싶은 위치 인 포지션이 필요합니다 글쎄, 이것은 CSS 코드, 그 코드의 속성, 기능은 매우 있습니다 위대한, 그럼, 왜냐하면 여기에 나는 세 가지를 연주 할 것이기 때문에 그것은 저에게 관심있는 것들입니다 이 운동을 위해서, 음, 글쎄, 나는 말할 것이다

음, 글쎄, 나는 코드를 작성한 다음 어떻게 표시되는지, 또한 그 메시지가 아래쪽에 보여라 하단, 0 픽셀, 나는 그 부분에서 원한다 0 픽셀 아래는 윈도우의 가장자리에서 떠있는 윈도우까지 남아 있습니다 거기에 그것을 남겨 두자 그리고 그것이있는 방법을 보자, 그 다음 그것은 벌써 나타난다 "안녕 amiigos del 채널 만들기 웹 페이지 "여기 왼쪽 하단에있는 경우, 그러나이 문자 메시지가이 그림 뒤에 나타나면 볼 수 없습니다

그럼 전체 메시지, 그리고 여기 예 웹 페이지 제작 채널의 친구 그래서, 우리가 할 일은 떠있는 창을 부품쪽으로 더 가져 오는 것입니다 웹 사이트에있는 모든 요소 앞에 우리는 z index라는 또 다른 CSS 요소를 사용하려고합니다

이 요소는 가장 큰, 그 요소는 웹 사이트의 모든 요소의 전면을 향한 것이 될 것입니다 내가 항상 앞에 있다는 것을 확인하기 위해 큰 숫자를 넣을 것입니다 5 천 파일을 업데이트하고 페이지를 살펴 보겠습니다 우리는 그것을 업데이 트하고 그것은 이미 여기에

안녕하세요 채널 친구 만들기 웹 페이지, 얼마나 많은 요소가 있더라도 항상 앞에 표시됩니다 너는 가지고있다, 정면에있는 그 메시지를 다른 비디오에 나타낼 것이다 이 창 배경을 변경하는 방법, 색을 변경하는 방법, 수행 방법을 보여 드리겠습니다

더 크고, 이미지를 배치하는 방법, 그 코드로 할 수있는 모든 것 그들은 혼자있다 css는 3 줄, html은 한 줄이면됩니다 이것이 내가 너에게 보여주고 싶었던 것인데,이 비디오를 제공했으면 좋겠다 댓글이 있으면 댓글이 달렸습니다

동영상 하단에 있습니다 댓글 섹션입니다, 그럼, 거기에 모든 것을 쓸 수 있습니다 우려 사항,이 채널을 구독하기를 바랍니다이 비디오를 좋아하시겠습니까? 다른 비디오에서 보자