상대 위치 지정 및 오프셋을 사용하여 아름다운 입력 인터페이스 만들기_CSS/HTML

상대 위치 지정 및 오프셋 속성을 사용하면 기존에 그림으로 구현해야 했던 인터페이스를 잘 구현할 수 있으며 구현도 매우 편리합니다. 예를 들어 사용자가 특정 정보를 입력해야 하는 경우 제목 표시줄 - 내용 - 확인 버튼의 구조를 사용하는 경우가 많습니다. 다음은 CSS 스타일의 상대 위치 지정 및 오프셋을 사용하여 만든 입력 인터페이스입니다. 주요 기능은 다음과 같습니다.

제목 표시줄 이미지에 위쪽 오프셋이 있습니다. 스타일: top:-10px;position:relative;를 사용하여 이미지를 컨테이너에서 분리하고 컨테이너 외부에 배치합니다(이 예에서 이미지 컨테이너는 class="main"인 div입니다). 그러나 한 가지 주목해야 할 점은 이미지 위치가 컨테이너 외부에 있더라도 여전히 컨테이너의 특정 공간을 차지한다는 것입니다. 이 예에서는 .main 선택기의 높이 속성이 어떻게 설정되든 녹색의 높이가 달라집니다. 스트라이프는 20px(이미지 높이)보다 작을 수 없습니다.
제목 표시줄의 텍스트에 대해 위쪽, 아래쪽, 왼쪽 및 오른쪽 오프셋 속성도 사용했습니다. 처음에는 텍스트를 세로로 가운데에 배치하기 위해 Vertical-align:middle 속성을 사용하려고 했지만 실패했습니다. . 텍스트는 항상 하단 라인에 맞춰 정렬되었지만 오프셋이 다시 사용되었습니다.
녹색 줄무늬는 CSS 필터를 사용해 그라데이션 효과를 내는데 아쉽게도 IE에서만 지원한다고 합니다:-(
끝에 있는 "확인" 버튼도 상대 위치 지정 및 오프셋 기술을 사용합니다.

CSS 코드:

a:link,a:active,a:visited{}{
색상: #2D4D97;
텍스트 장식: 없음;
}
a:hover {}{
텍스트 장식: 없음;
색상: #FF9900;
}
.title{}{
색상:#006600;
디스플레이:블록;
높이:20px;
너비:65%;
테두리:없음;
필터:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorStr=#FFD9E7CB,endColorStr=#00FFFFFF);
}
.title 스팬{}{
디스플레이:inline;
위치:상대;
상단:-4px;
}
.title img{}{
위치:상대;
상단 : -10px;
왼쪽: 5px;
디스플레이:inline;
여백:0px 10px 0px 0px;
패딩:0px;
높이:20px;
}
. 메인{}{
여백:10px 20px 30px 20px;
패딩: 10px 20px 10px 20px;
너비:100%;
테두리:#CCCCCC 1px solid;
}
. main .item{}{
수직 정렬:middle;
여백:5px 0 5px 0;
}
.main .foot{}{
위치:relative;
하단 :-10px;
왼쪽:80%;
디스플레이:블록;
테두리:#CCCCCC 1px 단색;
테두리-하단:없음;
너비:15%;
텍스트 -align:center;
}
.main .foot a{}{
background-color:#F3FCE0;
padding:2px;
width:100%;
}
.main .foot a:hover{}{
background-color:#D8EBFE;
padding:2px;
width:100%;
}
html code:

http://www.cnblogs.com/images/cnblogs_com/oliverhuang/addRole.gif"> 역할 기본정보를 입력해주세요

                                                                                                                                          🎜> 
 

확인