UL과 Li를 사용 하 여 방법의 소개

하나, 분명 들여쓰기 및 글머리 기호
1, 선택을 해제 하 여 항목 들여쓰기: ul {목록-스타일: 없음; 여백-왼쪽: 0px;}
2, 분명 들여쓰기 ul {여백: 7; 목록-스타일-타입: 디스크;}
3, 분명 들여쓰기 ul {여백-왼쪽: 20px}
4, 분명 들여쓰기 ul {여백-왼쪽:-24px;} 아래 2, 변경 프로젝트 문자는 아름 다운 작은 아이콘

3 구현 방법:
1, 간단한 방법
Ul {목록-스타일-이미지: url (/ images/icon.gif);
가이 메서드는 그림의 수직 위치에서 주로 다른 브라우저의 디스플레이에서 다릅니다. 일부 브라우저 사진을 확인 하 고 목록 항목 텍스트 위치, 중간 일부 높은, 즉, 표시 됩니다 일부 불일치.

2, 복잡 한 방법 ul {목록-스타일: 없음;}
리 {배경: url (/ images/icon.gif) 아니-반복 0px 50%; 여백-왼쪽: 17px;}
위의 브라우저 비 호환성의 문제를 해결합니다. 첫째, 기본 총알을 취소 하 고 우리 자신의 배경 그림 추가. 아니-반복이이 사진을, 50% 알려줍니다 배경 이미지 왼쪽된 0px 및 50%, 상단에 수직 방향에 있어야 0px을 바둑판식으로 배열 하지 브라우저를 말했다는 사실, 중심의 수직 방향에서입니다. 우리가 추가 17px 여백 왼쪽 15px 폭 5 픽셀의 작은 아이콘 그 완전히 노출 될 텍스트, 드러나지 않을 것이 고 텍스트 사이의 작은 공간 있을 것.
3, 일반 메서드
Li {배경: url (/ images/icon.gif) 아니-반복 0px 50%; 여백-왼쪽: 17px;}
3, 바꾸기 프로젝트 문자는 작은 사각형
ul {목록-스타일-타입: 사각형;}
목록-스타일-타입 다음 값을 가질 수 있습니다:
값: 디스크 | 원 | 광장 | 소수 선도 0 | 낮은 로마 | 위 로마 | 낮은-그리스 | 낮은Er-라틴 | 위-라틴 | 아르메니아 | 그루지야어 | 낮은 알파 | 위 알파 | 없음 |
디스크 상속: 포인트
원:
스퀘어 서클:
소수 광장: 번호
소수점 앞 0: 예를 들어, 0으로 시작 하는 번호 01, 02, 03
낮은 로마 대...,: 로마 쓰기를 소문자로 I, II, III, IV, V, / 등.
위 로마: 대문자 로마 쓰기 I, II, III, IV, V, 낮은
등 / -그리스: 아랍어 텍스트 α, β, γ, 소문자로...
낮은-라틴어: 라틴어 소문자 A, B, C,... z
위-라틴어: 대문자 라틴어 A, B, C,... Z
아르메니아: 아르메니아 번호
그루지야어: 조지아 자리는, 금지, gan,..., 그, 황갈색에,에-한...
낮은 알파: 라틴어 소문자 A, B, C,... z
위 알파: 대문자 라틴어 A, B, C,... Z
없음: 없음 (취소 모든 목록 스타일)
상속: 상속 세로 가로로 설정 없이 4, 행 및 열 1,

기본.
2, 수평 배열, < 리 > 세트 왼쪽 맞춤: Li {플 로트: 왼쪽;}
2, 여러 줄 여러 열: 첫째, < 리 > 왼쪽된 맞춤 설정: Li {플 로트: 왼쪽; 두 번째 < ul >의 폭과 < 리 >의 너비를 결정 하는; 한 < 리 > 열 이며 < 리 > 번호의 첫 번째 행 < ul >의 너비와 같습니다.
5 < li >< ul > 브라우저 호환
호환 브라우저는 CSS에 추가:
목록-스타일-위치: 외부

VI, < li >< ul > 응용 프로그램 인스턴스
1, 아무 시퀀스와 테이블 (< 리 >)는 테이블 (< >) 수평 탐색 목록

HTML 코드를 만들기 위해 바꿀 수 있습니다 < ul id = " Minitabs ""
< li ><는 href = "/" > < /a >< /li >
< li >< 웹사이트는 href = "http:// blog.liugongwei.cn/admin.php# "> 내 블로그 < /a >< / 리 & gt
< li ><는 href="/star.php "> 본질 기사 < /a >< / 리 & gt
< li ><는 href = "/ links.php" > 링크 < /a >< /li >
< / CSS 코드 ul & gt

# minitabs {
높이: 29px
글꼴-크기: 12px
여백: 0px;
안쪽 여백: 0px;
국경-하단: 1px 고체 #696;
}
#minitabs li {
높이: 25px
여백: 0px
안쪽 여백: 0px;
디스플레이: 인라인;
목록-스타일-타입: 없음;
}
#minitabs는 {

플 로트: 왼쪽 라인-높이: 25px
글꼴-무게: 굵게
여백: 0px 10px 0px 10px
텍스트-12 월 연설: 없음;
색상: #9 c 9;
}
#minitabs a.active, #minitabs를: 가져가 {
국경-하단: 4px 고체 #696;
색상: #363;
}
#minitabs를: 가져가 {
색상: #696;
}
우리가 실제로 어떻게 여기는떨어진된 총알 고 기본 들여쓰기입니다. 디스플레이: 인라인 수평 방향으로 목록. 우리는 또한 목록 플 로트: 왼쪽;의 모든 요소를 하자 가로로 같은 한 줄으로 그들을 강제로 것입니다. 우리는 링크 텍스트를 굵게 표시 하 고 링크에서 기본 밑줄을 제거 하는 몇 가지 색상을 추가.
2, 행 및 열 100 행 10 행 10 열
<! 공용 DOCTYPE HTML "-//W3C//DTD XHTML 1.0 전환 / / 엉" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
< html xmlns =" http://www.w3.org/1999/xhtml "> < 머리 >

< 메타 http-equiv =" 콘텐츠 형식 " 콘텐츠 = "text/html; charset = gb2312 "/ >
< 제목 > 1 ~ 100 Css + ul + li 10에서 배열 행 10 열 < / 타이틀 >
< 유형 스타일 =" Text/css ">
#mainDiv {
폭: 490px;
padding: 10px;
배경-색상: #ccc;
오버플로우: 숨겨진;

} ul {
목록-스타일: 없음;
패딩: 0;
여백: 0;

} li {
폭: 48px;
플 로트: 왼쪽;
여백:-1px 0 0 1px;
국경: 1px 고체 #333;
텍스트-정렬: 센터;

} < / 스타일 & gt

< / 헤드 > < 몸 >

< div id = "Maindiv" > < ul >

< 스크립트 유형 = "텍스트/자바 스크립트" & Gt;
var;
위한 (i = 1; 나 < = 100; i + +) {
document.write ("< 리 >" + + "< /li >");

} < / 스크립트 > < /ul >

< / div >
< / 바디 >
< / html >
섹션 JS 중간 대신. 대체 하는 다음 코드와 순수 CSS < 스크립트 유형 = "텍스트/자바 스크립트" >< ul > < / 스크립트 >< /ul > 그것에. < ul > < 리 > 1 < /li > < 리 > 2 < /li >



... < 리 > 100 < /li >

< / ul & gt
주요 포인트:
1, 너비 < ul >와 < 리 > 폭; 결정 < 리 >가 열, 첫 번째 행을 가로 < 리 >의 합계 < ul >의 너비를 같습니다.
2, 왼쪽 맞춤 < 리 > 하: Li {플 로트: 왼쪽