HTML에 대한 기본 지식 CSS 스타일 시트 및 스타일 속성에 대한 자세한 소개-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에 대한 기본 지식 CSS 스타일 시트 및 스타일 속성에 대한 자세한 소개

php中世界最好的语言

Jan 22, 2018 am 10:43 AM

html 기본 지식

이번에는 CSS 스타일 시트와 스타일 속성에 대한 자세한 소개를 전해드리겠습니다. CSS 스타일 시트와 스타일 속성 사용 시 주의 사항을 살펴보겠습니다. 시간.

1. 위치: 고정됨

일부 웹사이트의 오른쪽 하단에 있는 팝업 창과 같은 위치(브라우저에 상대적인 위치)를 잠급니다.

2. 위치: 절대

절대 위치:

1. 외부 레이어에는 위치: 절대(또는 상대)가 없으며 아래 그림과 같이 p는 브라우저를 기준으로 배치됩니다. 브라우저의 오른쪽 테두리에서 떨어진 거리, 아래쪽 테두리는 20픽셀입니다.

2. 외부 레이어의 위치는 절대(또는 상대)입니다. 그러면 p는 아래 그림과 같이 외부 테두리를 기준으로 위치가 지정됩니다(d의 오른쪽 테두리에서 50픽셀, d의 아래쪽 테두리에서 20픽셀). ).

3. 위치: 상대

상대 위치:

아래와 같이 이 p가 포함된 p의 특정 위치를 기준으로 고정됩니다. 외부 레이어에 포함되어 있지 않으면 상대 위치는 브라우저를 기준으로 고정됩니다.

4. 레이어링(z-index)

Z축 방향으로 레이어링하는 것은 레이어 수가 많을수록 종이 더미로 나뉘는 것으로 이해될 수 있습니다.

위의 상대 예에서 aa가 a를 덮는 것을 볼 수 있습니다. 이는 나중에 작성된 코드의 표시 수준이 더 높기 때문입니다. 그러면 코드 순서를 변경하지 않고 어떻게 aa를 덮을 수 있습니까? 다음과 같습니다:

5. float: 왼쪽, 오른쪽

왼쪽 및 오른쪽에 대한 위치(왼쪽, 위쪽)를 지정할 필요가 없으며 브라우저에 직접적으로 상대적입니다. 아우터가 래핑된 경우 아우터 p를 기준으로 한 줄을 제외한 위치의 왼쪽 위 또는 오른쪽 위가 표시됩니다.

추가: 1.

overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；
<p >
</p>   //截断流

로그인 후 복사

2. 커서: 포인터 마우스가 가리킬 때의 모양

3. 반투명 효과:

    <p class="box">透明区域<p>
             在样式表中的代码为：
             .box
             {
             opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
             }

로그인 후 복사

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style type="text/css">  
.a   
{   
    border:5px solid blue;   
    width:1000px;   
    height:100px;   
    margin:10px;   
    left:150px;   
    top:80px;   
    position:absolute;}   
.b   
{   
    border:5px solid blue;   
    width:240px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:200px;   
    position:absolute;}   
.c   
{   
    border:5px solid blue;   
    width:740px;   
    height:300px;   
    margin:10px;   
    left:410px;   
    top:200px;   
    position:absolute;}   
.d   
{   
    border:5px solid blue;   
    width:740px;   
    height:200px;   
    margin:10px;   
    left:410px;   
    top:520px;   
    position:absolute;}   
.e   
{   
    border:5px solid blue;   
    width:240px;   
    height:1500px;   
    margin:10px;   
    left:150px;   
    top:420px;   
    position:absolute;}   
.f   
{   
    border:5px solid blue;   
    width:240px;   
    height:150px;   
    margin:10px;   
    left:150px;   
    top:1940px;   
    position:absolute;}   
.g   
{   
    border:5px solid blue;   
    width:740px;   
    height:1350px;   
    margin:10px;   
    left:410px;   
    top:740px;   
    position:absolute;}       
.h   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2110px;   
    position:absolute;}   
.i   
{   
    border:5px solid blue;   
    width:1000px;   
    height:200px;   
    margin:10px;   
    left:150px;   
    top:2330px;   
    position:absolute;}   
</style>  
</head>  
  
<body bgcolor="#F0F0F0">  
<p class="a">a</p>  
<p class="b">b</p>  
<p class="c">c</p>  
<p class="d">d</p>  
<p class="e">e</p>  
<p class="f">f</p>  
<p class="g">g</p>  
<p class="h">h</p>  
<p class="i">i</p>  
</body>  
</html>

로그인 후 복사

이 사례를 읽고 나면 방법을 익히셨을 것입니다. 중국 웹사이트의 PHP 기타 관련 기사에 주목해주세요!