css 다 중 줄 뉴스 모드

그림 보기:이런 효과,심지어 3 열 4 열 뉴스 모듈 까지 예전 에 저 는 table 을 사 용 했 습 니 다.css 보다 편리 하 다 고 생각 했 습 니 다.나중에 a 의 변동 을 먼저 보 낸 후에 원래 ul 을 사용 하면 더욱 쉽게 제어 할 수 있 습 니 다.먼저 코드 를 보 겠 습 니 다.
인용:.news{}.news li{ list-style:none; clear:both} .news li a#n1{ text-decoration:none; float:left; line-height:22px;} .news li a#n2{ text-decoration:none; float:right; color:#999} .news li a#n3{ float:right; padding-right:20px;color:#999} .news li a#n1:hover{ text-decoration:underline;} .news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;} a\#n1 은 뉴스 제목 이 고 왼쪽 은 움 직 이 며 n2 와 n3 는 클릭 횟수 와 발표 날짜 이 며 오른쪽 은 움 직 이 고 거 리 는 20px 입 니 다.li 에 서 는 모든 변동 을 제거 해 야 합 니 다.테스트 지원 ie6,ie7,ff,opera.예제,3 열:이것 은 3 열

li>왼쪽 열,뉴스 제목 항목점 발표 날짜
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.88882008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.88882008-08-08
• >>weilaixu.cn 의 성대 한 온라인88882008-08-08
• >>>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.88882008-08-08
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]예제,2 열:이것 은 2 열
li>왼쪽 열,뉴스 제목 항목클릭 횟수
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 을 열렬 히 축하합니다.성대 한 상선2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]예시,점선:점선
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]예시,서로 다른 배경 색:다른 배경 색
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 륭 을 열렬 히 축하합니다.재 접속2008-08-08
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]예제,테두리:테두리
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.2008-08-08
• >>weilaixu.cn 성대 한 온라인 축하2008-08-08
• >>weilaixu.cn 의 성대 한 출시 를 열렬 히 축하합니다.