Baidu Space CSS에 대한 자세한 튜토리얼이 있나요?

결국 다른 사람의 주소를 클릭하면 원하는 내용을 찾을 수 없을 수도 있습니다. 튜토리얼을 읽어보세요. 우선 제가 CSS 마스터가 아니기 때문에 실수는 있을 수 없음을 밝힙니다. 이 가이드에서는 현재 제가 사용하고 있는 CSS 코드를 사용하여 배경 이미지, 플레이어, 모듈 투명도, 설정 등을 모두 다루고 있습니다. 페이지 너비 및 기타 문제. 자신의 공간을 꾸미기 위해서는 바이두 스페이스의 CSS에 익숙해지는 것 외에도 예술에 대한 기초도 갖춰야 한다는 점을 모두가 이해해야 합니다. 결국 사진은 아름다움의 핵심입니다. 또한, 초보자의 경우 바이두 공식 CSS 도움말을 먼저 살펴보는 것이 가장 좋습니다. 주소를 모르는 경우 여기를 클릭하여 CSS 코드에 해당하는 모듈을 이해하세요. 내 코드에 대해 자세히 설명했습니다. 내 댓글에서 많은 질문을 찾을 수 있습니다. 이해하지 못하는 경우 메시지를 남겨주세요. 1: 배경 그림 대부분의 사람들은 공간을 디자인할 때 바이두 공간을 상부와 하부로 구분하는데, 상부는 공간명과 공간 소개 부분을 의미하고, 하부는 네비게이션 바 아래 부분을 의미한다. 기사 내용 및 기타 작은 모듈입니다. 초보자에게는 이것이 최고의 분할 방법입니다. 공간 이름 중 이 부분은 일반적으로 공간을 꾸미기 위한 전제 조건입니다. 아름다운 사진이 있는 경우 여기에서 배경을 변경하면 공간이 완전히 새로운 모습을 연출할 수 있습니다. 여기에서 배경을 수정하는 것은 매우 간단합니다. CSS 편집 페이지를 열고 #header를 찾아 끝에 BACKGROUND를 삽입하세요. url(이미지 주소) no-repeat 0px 0px 여기에서는 배경 이미지의 여러 속성을 설명합니다. 이미지는 타일링되며 타일링 방식에는 4가지 속성이 있습니다. 반복: 기본값.

배경 이미지가 수직 및 수평으로 모두 타일링됩니다. no-repeat: 배경 이미지가 타일링되지 않습니다.peat-x: 배경 이미지가 수평으로만 타일링됩니다.peat-y: 배경 이미지가 수직으로만 타일링됩니다. 왼쪽에는 다음 두 개의 PX가 지정됩니다. 사진의 측면 거리와 상단 여백이 더 중요합니다. 원하는 위치로 사진을 조정할 수 있습니다. 여기서 주의할 점은 공간 이름 부분에 배경 이미지를 추가할 때 여기서 높이를 조정하고 TAB에서 상단과의 거리를 동시에 조정해 주세요. 높이 코드: 높이, 사진의 높이에 맞춰 높이를 조정하세요. 예: 이제 공간 이름 부분에 높이 160의 사진을 넣으려면 두 곳을 수정해야 합니다. 1: #header{ HEIGHT: 160px BACKGROUND: url (picture address) no-repeat 8px 0px;} 2 : #tab{top: 160px; left: 0px;} 상단의 배경 이미지는 여기까지입니다. 하단의 방법은 상단과 동일하지만 코드가 삽입되는 곳이 .stage 이므로 CTRL F 를 눌러 검색하시면 됩니다. 전체 배경을 설정하고 BODY에 배경 이미지 코드를 삽입할 수도 있습니다. 또 다른 매우 중요한 점은 Baidu의 모듈에는 모두 배경색이 있다는 것입니다. 이 경우 배경 이미지를 넣어도 기본적으로 가려집니다. 이를 위해서는 배경 투명도 코드를 사용해야 합니다. 투명성을 설정하려는 모듈의 코드. 특정 코드에 해당하는 모듈은 Baidu의 공식 CSS 도움말을 참조하세요. 위에 링크가 이미 있습니다. 2: 플레이어 설정에 대해 더 이상 고민하지 않고 코드는 다음과 같습니다. #phx{FILTER: Alpha(Opacity=66, FinishOpacity=26, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray (); WIDTH: 209px; HEIGHT: 45px; margin-top: 12px} 이 코드는 너비와 높이가 각각 플레이어의 너비와 높이를 변경한다는 것을 알고 있는 한 CSS의 어느 곳에나 삽입할 수 있습니다. 플레이어의 크기를 임의로 조정합니다. 세 번째: 페이지 너비를 지정하세요. 어떤 사람들은 Baidu Space 페이지가 너무 넓어 보인다고 생각하고 더 작게 디자인하고 싶어합니다. 이것은 실제로 어렵지 않습니다. 간단히 말해서 너비 코드만 알면 됩니다. 물론 더 편리한 설정을 위해 자체 코드를 추가하는 것이 좋습니다. #layout td.c2t3{패딩-오른쪽: 0px; 너비: 250} #layout td.c2t1{패딩-왼쪽: 0px; 테두리-오른쪽: #930000 0px solid;} #layout td.c2t2{width: 60px} 이 코드를 .stage 뒤에 넣을 수 있습니다. C2T3은 페이지의 오른쪽 속성을 지정하고, c2t1은 왼쪽 속성을 지정하며, c2t2는 왼쪽과 오른쪽 사이의 거리입니다. (참고: 이 코드는 공간을 두 개의 열로 나누는 데만 사용됩니다.) padding: 위쪽, 아래쪽, 왼쪽, 오른쪽을 포함하여 개체의 4개 변에 있는 내부 패치를 검색하거나 설정합니다. padding-right: 이에 대해서는 언급하지 않겠습니다. 여기서는 모두의 편의를 위해 객체의 위치를 ​​오른쪽부터 지정한다고 간주할 수 있습니다. padding-top: (위와 동일, 위쪽 지정) padding-left: (위와 동일, 왼쪽 지정) PADDING -BOTTOM: (위와 동일, 하단 참조) 미술 기초가 좋으면 여기에 해당하는 내용을 삽입할 수도 있습니다. 배경 그림이 공간을 아름답게 합니다. 아래에서는 CSS 코드를 주석으로 사용합니다. 사용을 원하시면 댓글 내용을 삭제해주세요. 참고: 실수로 일부 텍스트를 검은색으로 만들었으나 수정했습니다.

다시 변경할 수 없습니다. 선명하게 보이지 않을 경우 마우스를 이용하여 선택하신 후 다시 보시면 됩니다./* Made by Langer t a {text-꾸밈: 없음: #344500}#m_blog div.cnt a: 방문함 {텍스트 장식: 없음; 색상: #344500} #m_blog div.cnt a: hover {border-bottom: 1px #344500 점선 색상: #344500} #m_blog {padding-left: 15px; 패딩 오른쪽: 15px; 여백 상단: 20px}#m_blog div.tit{패딩 하단: 0px; 글꼴 크기: 13px; : 없음; 테두리 하단: 1px 솔리드 #4E7304; 테두리 상단: 0px TEXT-INDENT: 119px}#m_blog div.tit a{color: #4E7304; ; 글꼴 무게: 굵게; 텍스트 장식: 없음}# m_blog div.tit a: 방문함{color: #4E7304; 텍스트 장식: 없음}#m_blog div.date{글꼴 크기: -20px 0 8px 0; TEXT-INDENT: 7px; 글꼴-가중치: 굵게}#m_blog div.cnt{color: ##005533; 글꼴-크기: 15px; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-bottom: 10px;}#m_blog div.more{margin: 14px 0 16px 0; #m_blog div.more a{색상: #ffffff; 글꼴 크기: 14px; 텍스트 장식: 없음; 글꼴 무게: 굵게}#m_blog div.more a: 방문{색상: #ffffff; 글꼴 무게: 굵게}#m_blog div.opt{색상: #689411; 글꼴 크기: 12px} #m_blog div.opt a{색상: #689411; 텍스트 장식: 없음} #m_blog div .opt a: 방문함{색상: #689411; 텍스트 장식 :none}#m_blog div.line{margin-top: 17px; line-height: 17px}#m_blog div.none{padding: 100px 0 100px 0; #

1a4a8a; 글꼴 크기: 14px} #m_pro {text-align: 왼쪽; 패딩-오른쪽: 10px;} #m_pro a{color: #995C00; 텍스트 장식: 없음 ;text-align:center}#m_pro a:visited{color:#995C00;font-weight:bold;text-꾸밈:none}#m_pro div.image{text-align:center;;border-bottom:#ffffff 1px solid; padding-top: 5px; padding-bottom: 5px}#m_pro div.act{margin-top: 10px}#m_pro div.user{color: #995C00; 글꼴 크기: 12px; m_pro div.desc{color：#995C00;font-size：12px}#m_pro div.line{margin-top：17px;line-height：17px;border-top：1px solid #1A4A8A}#m_pro td{color：# 995C00; 줄 높이: 24px; 글꼴 크기: 14px}#m_album div.image{text-align: center; padding-top: 30px}#m_album div.page{color: #995C00; -align: center} #m_album div.page a{color: #995C00; 글꼴 크기: 12px} #m_album div.page a: 방문함{color: #330000} #m_links {padding-left: 18px; 18px; 텍스트 정렬: 왼쪽; 테두리 상단: 0px #995C00; 텍스트 정렬: 리프트}#m_links div.item{color: # 6E981A; LINE-HEIGHT: 21px}#m_links div. 항목 a{색상: #995C00; 글꼴 크기: 12px; 텍스트 장식: 없음}#m_links div.item a: 방문함{color: #995C00}#m_links div.linediv.line{margin-top: 5px; 높이: 8px; 테두리 상단: 1px 솔리드 #D2E9F4} #m_artclg {테두리 상단: 0px 솔리드 #5C85BB; 패딩 상단: 5px} #m_artclg {패딩-왼쪽: 18px; 왼쪽; 테두리 상단: 0px #995C00; 텍스트 정렬: 리프트}#m_artclg div.item{color: #995C00;

px; 텍스트 정렬: 왼쪽; 패딩-왼쪽: 0px} #m_artclg div.item a{color: #995C00; 글꼴 크기: 12px; 텍스트 장식: 없음} #m_artclg div.item a: 방문함 995C00; 텍스트 장식: 없음} #m_artclg div.linediv.line{margin-top: 5px; line-height: 8px; border-top: 1px solid #D2E9F4}#m_comment {padding-left: 18px; 18px; 텍스트 정렬: 왼쪽; 테두리 상단: 0px #995C00; 텍스트 정렬: 리프트}#m_comment div.item{color: #D2E9F4; 글꼴 크기: 12px;}#m_comment div.item a{color: #995C00; 글꼴 크기: 12px; } #m_comment div.item a: 방문함 { 색상: #995c00; 텍스트 장식: 없음 } #m_comment div.item a.cnt { 색상: #995C00; ;}#m_comment div.item a.cnt: 방문함{color: #995c00; text-꾸밈: 없음; 글꼴 무게: 일반; text-align: center} #m_comment div.item a.cnt: hover{color: # D2E9F4; 텍스트 장식: 밑줄; 텍스트 정렬: 왼쪽}#m_comment div.line{margin-top: 5px; line-height: 8px; border-top: 1px #m_albumlist div.note{color: 995C00; 글꼴 크기: 14px} #m_albumlist div.desc{margin-bottom: 12px; 줄 높이: 22px; 글꼴 크기: 14px} #m_albumlist div. 없음{패딩: 100px 0 100px 0; 색상: #995C00; 글꼴 크기: 14px}#m_albumlist div.line{margin-top: 10px; line-height: 16px; border-top: 1px solid #ffffff}#m_albumlist div .tit{margin：6px 0 7px 0；color：#995C00;font-size：14px}#m_albumlist div.tit a{color：#995C00;font-size：14px}#m_albumlist div.tit a：visited{color： #995C00}#m_albumlist 범위.개수{색상：#995

C00; 글꼴 크기: 12px; 글꼴 무게: 굵은 글꼴 크기: 12px}#m_albumlist a.act: 방문함{color: #995C00}#m_albumlist a.page{color: #330000; 글꼴 크기: 14px}#m_albumlist a.page: 방문함{color: #330000}#m_albumlist td .image{패딩: 5px; 테두리: 1px 솔리드 #995C00} #m_friend div.filter{margin-bottom: 10px; 패딩-상단: 10px; :27px}#m_friend div.catalog{margin-bottom: 10px; padding-left: 10px; line-height: 27px; 글꼴 크기: 14px}#m_friend div.user margin-top: 4px; 색상: #995C00; 글꼴 크기: 12px}#m_friend div.user a{color: #995C00; 글꼴 크기: 12px}#m_friend div.user a: 방문함: #995C00}# m_friend div.line{margin-top：10px; line-height：16px; border-top：1px solid #995C00}#m_mylink1 {padding-left：18px; padding-right：18px; text-align：left;border-top :0px solid #995C00; 텍스트 정렬: 리프트} #m_mylink1 div.item{color: #995C00; 글꼴 크기: 12px} #m_mylink1 div.item a{color: #995C00; 텍스트 장식 : 없음}#m_mylink1 div.item a: 방문함{color: #995C00}#m_mylink1 div.line{margin-top: 5px; line-height: 8px; border-top: 1px solid #D2E9F4}#m_mylink2 {padding-left : 18px; 오른쪽 패딩: 18px; 텍스트 정렬: 왼쪽; 테두리 상단: 0px #995C00; 텍스트 정렬: 리프트}#m_mylink2 div.item{color: #995C00; .item a{색상: #995C00; 글꼴 크기: 12px;

xt-장식: 없음}#m_mylink2 div.item a: 방문함{color: #995C00}#m_mylink2 div.line{margin-top: 5px; line-height: 8px; border-top: 1px solid #D2E9F4}#m_mylink3 { 패딩 왼쪽: 18px; 텍스트 정렬: 왼쪽; 테두리 상단: 0px #995C00; 텍스트 정렬: 리프트}#m_mylink3 div.item{color: #995C00; #m_mylink3 div.item a{색상: #995C00; 글꼴 크기: 12px; 텍스트 장식: 없음} #m_mylink3 div.item a: 방문함{색상: #995C00} #m_mylink3 div.line{margin-top: 5px; 줄 높이: 8px; 테두리 상단: 1px 솔리드 #D2E9F4}#m_mylink4 {padding-왼쪽: 18px; 패딩 오른쪽: 18px; 텍스트 정렬: 왼쪽; 테두리 상단: 0px 텍스트 정렬: 리프트 }#m_mylink4 div.item{color: #995C00; 글꼴 크기: 12px} #m_mylink4 div.item a{color: #995C00; 글꼴 크기: 12px; 텍스트 장식: 없음} #m_mylink4 div.item a: 방문 {색상: #995C00}#m_mylink4 div.line{margin-top: 5px; line-height: 8px; border-top: 1px solid #D2E9F4}#m_filed {padding-left: 18px; 정렬: 왼쪽; 테두리 상단: 0px 솔리드 #995C00; 텍스트 정렬: 리프트}#m_filed div.item{color:#995C00; 글꼴 크기: 12px}#m_filed div.item a{color:#995C00; 글꼴- size：12px}#m_filed div.item a：visited{color：#995C00}#m_filed div.line{margin-top：5px; line-height：8px;border-top：1px solid #D2E9F4}#m_setting a{color : #995C00}#m_setting a: 방문함{color: #995C00}#m_setting{line-height: 22px; color: #995C00; 글꼴 크기: 14px}#m_setting img.sel{border: 4px solid #FFDB7B}#m_setting img.unsel{border：1px solid #D2D2D2}#m_setting sp

an.tit{font-size：14px}#m_settingspan.usr{color：#995C00}#m_setting div.sel{padding-top：6px;font-size：14px;font-weight：bold}#m_setting div.line {margin-top: 20px; line-height: 16px; border-top: 1px solid #ffffff}#m_sysinfo a{color: #995C00}#m_sysinfo a: 방문함{color: #995C00}#m_sysinfo{line-height: 22px ;색상: #995C00; 글꼴 크기: 14px} #m_sysinfospan.new{색상: #FF0000; 글꼴 크기: 10px; 글꼴 계열: Arial}#m_sysinfospan.date{색상: #995C00; 14px}#m_setbase{color：#995C00;font-size：14px}#m_setbase td{color：#995C00;font-size：14px}#m_setbase div.line{margin-top：5px;line-height：8px;border -top：1px solid #ffffff}{모든 권리 보유，/jsqk}#in_comment div.tit{margin-bottom：12px;color：#995C00;font-size：14px;font-weight：bold}#in_comment div.user {margin-bottom: 6px; 색상: #995C00; 글꼴 크기: 12px} #in_comment div.user a{color: #995C00; 글꼴 크기: 12px}#in_comment div.user a: 방문함: #995C00 #in_comment div.user 스팬.날짜{색상: #995C00; 글꼴 크기: 12px} #in_comment div.desc{색상: #995C00; 글꼴 크기: 12px} #in_comment div.line {margin-top: 17px; -height: 17px; border-top: 1px solid #995C00}#in_send div.tit{margin: 10px 0 10px 0; color: #995C00; 글꼴 크기: 14px; 글꼴 무게: 굵은 글씨체}/* 수정하지 마세요. 저작권, 타인의 노동 결과를 존중하십시오. 필요한 경우 Langer에게 직접 문의하십시오*/