바이두 공간 모듈 만들기
CSS 란 무엇입니까?
CSS 는 스타일 시트라는 기술입니다. Cascading Stylesheet 라고 부르는 사람들도 있습니다. 마스터 페이지를 만들 때 CSS 기술을 사용하면 페이지의 레이아웃, 글꼴, 색상, 배경 및 기타 효과를 보다 정확하게 제어할 수 있습니다. 해당 코드를 간단하게 수정하면 같은 페이지의 다른 부분이나 페이지 수가 다른 웹 페이지의 모양과 형식을 변경할 수 있습니다.
색상 선택기
색상:
밝기:
선택 색상:
2, 밝기 조정
오른쪽 그라데이션 블록에서 색상의 밝기를 조정합니다.
3, 붙여넣기 코드 복사
코드 상자에서 해당 색상의 코드를 복사하여 CSS 사용자 정의 템플릿의 원하는 위치에 붙여넣기 (CTRL+V) 하면 됩니다.
스페이스 페이지 CSS 설명
body 전체 스페이스 페이지 {background-color: # ffffff}
-- Background: # 3399cc}
# headerdiv.lc 왼쪽 배경 그림 {background: URL (temp1/hdl.jpg); 왼쪽: 20px; Line-height: 22px; Font-size: 20px; Font-family: 굵게}
# headerdiv.tita.titlink 공간 이름 링크 {color: # ffffff; Text-decoration: none}
# headerdiv.tita.titlink: visited {color: # fffff; Text-decoration: none}
# headerdiv.desc 공간 소개 {top: 33px; 왼쪽: 20px; Color: # ffffff; Font-size: 13px}
# tab line tab 메뉴 아래 수평선 {top: 89px; Background-color: # fffff}
# tabtab 메뉴 본문 {top: 67px; Background: URL (temp1/tabbg.gif) repeat-x}
# taba.on, # taba.on: Border-left: 1pxsolid # ffffff; Border-right: 1pxsolid # ffffff; Border-top: 1pxsolid # ffffff; 라인 하이트: 19px; Background-color: # f3f1f1; Color: # 197cae; Font-size: 14px}
# TABspantab 과 tab 사이의 구분자 "|" {color: # fffff; Font-size: 14px}
# Taba: link tab 선택되지 않은 상태 {color: # ffffff; Text-decoration: none; Font-size: 14px}
# Taba: visited {color: # fffff; Text-decoration: none; Font-size: 14px}
# tab2 탭 메뉴 본문 설정 {background: # dae9f5}
# tab2spap Font-size: 12px; Font-weight: bold}
# tab2atab 선택되지 않은 상태 {fon
T-size: 12px}
# tab2a: link {color: # 0000cc}
# tab2a: va P >
--------------- Font-family: arial; Text-align: left}
# comm _ infodiv.line 경계선 {margin-top: 5px; Line-height: 8px; Border-top: 1pxsolid # d2e9f4}
# comm _ infoa 링크 {color: # 3399cc}
< Font-size: 14px; Font-family: arial; Text-align: center}# pagespan 현재 페이지 번호 (클릭 불가) {padding: 3px; Color: # 000000; Font-size: 14px; Font-weight: bold}
# pagea.pc 이전 및 다음 페이지 {color: # 3399cc; Font-size: 14px; Font-weight: bold}
# pagea.pc: visited {color: # 3399cc}
Color: # 3399cc; Font-size: 14px}
# pagea.pi: visited {color: # 3399cc}
-입니다
모듈
. mod {margin-bottom: 10px}
. mod handle {cursor >
.modopt 모듈 작업 영역 (예: 새 문장 쓰기) {padding: 4px4px0 0}
. modtit 모듈 제목 영역 (예: 문장 목록) {color: Font-size: 12px; Font-weight: bold} a.modtit {color: # fffff} a.modtit: visited {color: # ffffff} < Font-size: 12px; Font-weight: bold} a.m.
Odtitlink {color: # fffff; Text-decoration: none} a.modtitlink: visited {color: # fffff; Text-decoration: none} a. modtitlink: hover {color: # ff5100; Text-decoration: underline}
. modact 운영 텍스트 링크 (예: 문장 목록) {color: # ffffff; Font-size: 12px} a.modact: link {color: # ffffff} a.modact: visited {color: # fffff: Background-color: # fffff}
. modtl 모듈의 왼쪽 위 배경 {background: URL (temp1/ptitl.gif)) Line-height: 1px}
. modtc 모듈의 위 배경 {background: URL (temp1/ptitc.gif) repeat- Line-height: 1px}
. modbl 모듈 왼쪽 아래 배경 {background-color: # fffff; Line-height: 1px}
. modbc 모듈의 배경 {background-color: # fffff; Line-height: 1px}
. mod br 모듈 오른쪽 아래 배경 {background-color: # fffff; Line-height: 1px}
------------ Font-weight: bold}
# m _ blogdiv.tit a 문장 제목 링크 {color: # 333333; Font-size: 14px; Font-weight: bold}
# m _ blogdiv.tit a: visited {color: # 333333}
# m _ blogdiv.cnt 문장 내용 {color: # 333333; Line-height: 20px; Font-size: 14px}
# m _ blogdiv.more {margin: 14px016px0}
Font-size: 14px}
# m _ blogdiv.more a: visited {color: # 3399cc}
6666; Font-size: 12px}
# m _ blogdiv.opt a 문장 작업 링크 {color: # 3399cc; Font-size: 12px}
# m _ blogdiv.opt a: visited {color: # 3399cc}
Line-height: 17px; Border-top: 1pxsolid # d2e9f4}# m _ blogdiv.none 문장 프롬프트 정보 없음 {padding: 100px0 100px0; Color: # 333333; Font-size: 14px}
------------- P >
# m _ proa: visited {color: # 3399cc}
# m _ prodiv.image 개인 프로필 {teter Color: # 333333; Font-size: 12px; Font-weight: bold}
# m _ prodiv.desc 사용자 프로필 {color: # 333333; Font-size: 12px}
# m _ prodiv.line 경계선 {margin-top: 17px; Line-height: 17px; Border-top: 1pxsolid # d2e9f4}
# m _ protd {color: # 333333; Line-height: 24px; Font-size: 14px}
------------- Font-size: 12px; Text-align: center}
# m _ albumdiv.page a {color: # 0000cc; Font-size: 12px}
# m _ albumdiv.page a: visited {color: # 0000cc}
--------------- Font-size: 12px}
# m _ linksdiv.itema 이름 (링크) {color: # 3399cc
을 눌러 섹션을 인쇄할 수도 있습니다 Font-size: 12px; Text-decoration: none}
# m _ linksdiv.item a: visited {color: # 3399cc} < Line-height: 8px; Border-top: 1px solid # d2e9f4}
--------- Font-size: 12px}
# m _ artclgdiv.item a 분류 이름 (링크) {color: # 3399cc; Font-size: 12px}
# m _ artclgdiv.item a: visited {color: # 3399cc}
--------- Font-size: 12px}
# m _ commentdiv.item a 게시자 (링크) {color: # 3399cc; Font-size: 12px}
# m _ commentdiv.item a: visited {color: # 3399cc}
# m _ commentdiv.item a.cn t: visited {color: # 333333 Text-decoration: none}
# m _ commentdiv.item a.cn t: hover {color: # 33333 Text-decoration: underline}
# m _ commentdiv.line 경계선 {margin-top: 5px; Line-height: 8px; Border-top: 1px solid # d2e9f4}
--------- Font-size: 14px}
# m _ album listdiv.desc 소개 {margin-bottom: 12px; Padding: 3px10px 3px10px; Line-height: 22px
을 눌러 섹션을 인쇄할 수도 있습니다 Background-color: # f2f2f2; Font-size: 14px}
# m _ album list div.none 사진 힌트 없음 {padding: 100px0 100px0; Color: # 333333; Font-size: 14px}
# m _ album listdiv.line 경계선 {margin-top: 10px; Line-height: 16px; Border-top: 1pxsolid # d2e9f4}
# m _ albumlistdiv.tit 사진 제목 {margin: 6px07px0; Color: # 333333; Font-size: 14px}
# m _ album listdiv.tita 사진 제목 링크 {color: # 3399cc; Font-size: 14px}
# m _ albumlistdiv.tit a: visited {color: # 3399cc}
# m _ album listspan.size 사진 크기 {color: # 999999; Font-size: 12px; Font-family: arial}
# m _ albumlist a.act 작업 영역 링크 (예: 편집, 삭제) {color: # 3399cc; Font-size: 12px}
# m _ albumlist a.act: visited {color: # 3399cc}
Font-size: 14px}# m _ albumlist a.page: visited {color: # 0000cc}
----------- Padding-left: 10px; Padding-top: 10px; 하이트: 27px; Line-height: 27px}
# m _ frienddiv.catalog {margin-bottom: 10px; Padding-left: 10px; 하이트: 27px; Line-height: 27px; Background-color: # f2f2f2; Font-size: 14px}
# m _ frienddiv.user {margin-top: 4px; Color: # 333333; Font-size: 12px}
# m _ frienddiv.usera 친구 이름 (링크) {color: # 3399cc; Font-size: 12px}
# m _ friend di
V.user a: visited {color: # 3399cc}
# m _ frienddiv.line 경계선 {margin-top:; Line-height: 16px; Border-top: 1px solid # d2e9f4}
--------- M_setting a 링크 {color: # 3399cc}
# m _ settinga: visited {color: # 3399cc} < Color: # 333333; Font-size: 14px}
# m _ settingimg.sel 템플릿 미리 보기 (선택됨) {border: 4pxsolid # ffdb7b]
#m_setting span.tit 템플릿 제목 이름 {font-size: 14px}
# m _ settingspan; Font-size: 14px; Font-weight: bold}
# m _ settingdiv.line 경계선 {margin-top: 20px; Line-height: 16px; Border-top: 1px solid # d2e9f4}
--------- M_sysinfo a 링크 {color: # 3399cc}
# m _ sysinfo a: visited {color: # 3399cc} < Color: # 333333; Font-size: 14px}
# m _ sysinfospan.new 최신 {color: # ff0000; Font-size: 10px; Font-family: arial}
# m _ sysinfospan.date 출시 시간 {color: # 666666; Font-size: 14px}
------------- Font-size: 14px}
# m _ setbasetd {color: # 333333; Font-size: 14px}
# m _ setbase div.line 경계선 {margin-top: 5px;
Line-height: 8px; Border-top: 1px solid # d2e9f4}
--------- In_comment 바디 {width: 710px}
# in _ commentdiv.tit 제목 {margin-bottom: 12px; Color: # 333333; Font-size: 14px; Font-weight: bold}
# in _ commentdiv.user 발표명 {margin-bottom: 6px; Color: # 333333; Font-size: 12px}
# in _ commentdiv.usera 발표명 (링크) {color: # 3399cc; Font-size: 12px}
# in _ commentdiv.user a: visited {color: # 3399cc}
# in _ commentdiv.desc 리뷰 내용 {color: # 333333; Font-size: 12px}
# in _ commentdiv.line 경계선 {margin-top: 17px; Line-height: 17px; Border-top: 1pxsolid # d2e9f4}
# in _ senddiv.tit 의견 (제목) {margin: 10px010px Color: # 333333; Font-size: 14px; Font-weight: bold}
------------ Font-size: 12px}
# m _ fileddiv.item a {color: # 3399cc; Font-size: 12px}
# m _ fileddiv.item a: visited {color: # 3399cc}
--------- Font-size: 12px}
# m _ mylink1div.item a {color: # 3399cc; Font-size: 12px; Text-decoration: none}
# m _ m.
Ylink1div.item a: visited {color: # 3399cc}
# m _ mylink1div.line {margin-; Line-height: 8px; Border-top: 1pxsolid # d2e9f4}
사용자 지정 모듈 2
# m _ mylink2div.item {coom Font-size: 12px}
# m _ mylink2div.item a {color: # 3399cc; Font-size: 12px; Text-decoration: none}
# m _ mylink2div.item a: visited {color: # 3399cc} < Line-height: 8px; Border-top: 1pxsolid # d2e9f4}
사용자 지정 모듈 3
# m _ mylink3div.item {coom Font-size: 12px}
# m _ mylink3div.item a {color: # 3399cc; Font-size: 12px; Text-decoration: none}
# m _ mylink3div.item a: visited {color: # 3399cc} < Line-height: 8px; Border-top: 1pxsolid # d2e9f4}
사용자 지정 모듈 4
# m _ mylink4div.item {coom Font-size: 12px}
# m _ mylink4div.item a {color: # 3399cc; Font-size: 12px; Text-decoration: none}
# m _ mylink4div.item a: visited {color: # 3399cc} < Line-height: 8px; Border-top: 1px solid # d2e9f4}
--------- Font-size: 12px}
# m _ track a {color: # 3399cc; Font-size: 12px}
# m _ track a: visited {color: # 3399cc}