지난 몇 년간 CSS와 XHTML을 작성했던 경험을 요약하고 모든 사람과 공유할 수 있는 "비할 데 없는 기사"로 요약한다고 상상해보세요. 불행하게도 나는 이미 나이가 많아 내가 원하는 것을 실제로 할 수 없습니다. 그래서 생각을 바꿔서 노트 형태로 발표하면, 못 쓸 걱정은 안 해도 될 것 같다고 생각했어요.
이제 타오바오 홈페이지의 작은 트릭에 대해 이야기해 보겠습니다.
카테고리 간 가로선과 세로선
오래전부터 카테고리 간 세로선은 3개뿐이었습니다. .
배경 이미지
a 태그에 패딩을 설정하고 가로, 세로 1px의 배경 이미지로 오른쪽에 배치합니다.
단점: 마지막은 배경을 숨기려면 여전히 클래스를 사용해야 합니다.
기호
는 각 a 태그 사이에 "|" 기호로 채워져 있습니다.
단점: HTML 파일이 커지고 파일 유지 관리가 번거로워지며 HTML에서는 의미가 없습니다.
a 태그 오른쪽에 있는 테두리입니다.
배경 이미지와 동일하지만 대신 border-right를 사용하세요. 단점은 위와 같습니다.
이것을 보고 누군가가 타오바오 홈페이지를 열고 Firebug를 사용하여 소스코드를 보고 어떻게 되었는지 확인했을 수도 있습니다.
사실 현재 방법은 ul의 Overflow:hidden과 li의 margin-left:-1px를 사용하는 것입니다. 이 접근 방식은 위의 단점을 동시에 피할 수 있습니다.
왜 이전에는 이런 일을 해본 적이 없는지 모르겠습니다. 이런 관행을 처음으로 발견한 것이 아닐까?
카테고리 간 수직선을 구현하기 위해 이전에 이 방법을 사용한 적이 있는 사람은 없습니다.
그런데 타오바오 홈페이지가 오픈된 직후 일부 동종 사이트에서도 홈페이지 개정에 이 방법을 사용하기도 했습니다.
그 웹사이트를 읽지 않아도 괜찮습니다. 수업은 정말 쓸 게 좀 많아요. HTML을 로드하는 것은 훨씬 더 많은 작업이 됩니다.
어쨌든 홈페이지는 1.17m의 웹페이지를 불러와야 하는데 뇌가 자동으로 막아주거든요.
모서리를 둥글게 만드는 방법
이 둥근 모서리를 만들기 위해 프런트엔드 개발자들은 너무 많은 노력을 기울였습니다. css 및 html 코드.
게시된 내용은 기존 둥근 모서리 방식을 대체하려는 경우가 많을 수 있지만 일반적인 작성 방법은 다음과 같습니다. 장점은 관리가 쉽다는 것입니다. 그림도 어느 정도 임의로 확장할 수 있습니다. 단점은 의미 없는 HTML 코드가 더 많다는 것입니다.
.c,.c i,.c i i,.c b,.c b b,.c p{
배경 이미지:url(http://www.php.cn/);/*배경 이미지*/
배경 -repeat:no-repeat;
}
.c{
width:200px;/*임시로 결정된 너비*/
background-position:0 -4px; c i{
디스플레이 :block;
높이:4px;
.c i i{
여백:0 0 4px
배경 위치:오른쪽 0;
.c b{
디스플레이:블록;
높이:4px;
배경 위치:0 하단;
배경 위치:오른쪽 하단
}
.c p{
여백:0 0 0 4px
padding:0 4px 0 0;
< /i>
누르기 버튼 버튼 버튼 버튼 버튼
; /p>
테이블의 전역 정의
caption 이 레이블은 Firefox에서 왼쪽에 1px 간격이 있습니다. 이 버그는 매우 짜증납니다. -1px 여백이라고 생각하면 됩니다.
css:
테이블{
border-collapse:collapse;
}
테이블 캡션,테이블 td,테이블 th{
border:1px solid #a2bbdd;/*테두리 색상*/
배경 :#c3d9ff;/*배경 색상*/
}
테이블 캡션{
text-align:left
border-bottom:none
margin-left:-1px; >}
>
제목
|
|
진심으로 봐야 할 두 가지 태그
약어 태그는 명사를 설명하는데는 좋지만 너무 적게 사용됩니다.(늘 사용하고 싶어서 적어두었습니다. .)
css:
acronym{cursor:help}
html:
< acronym title="Duan Zhengchun은 Jin Yong의 작품에 등장하는 또 다른 매우 이상한 캐릭터입니다. 그는 어디에서나 이상하게 자비로우며 많은 것을 가지고 있습니다. 사랑하는 사람은 다른 사람을 사랑하지만 그것은 헛된 것이 아닙니다. 연인과 단 둘이 있을 때, 이 사람은 정말 진심으로 사랑한다고 말할 수밖에 없습니다.” > . < /acronym>
h2에서 더 많은 링크를 표시하는 데 사용된 ins 태그를 본 웹사이트를 잊어버렸습니다. 나중에 책을 확인해보니 모두가 그것이 약간 부적절하고 논란의 여지가 있다고 생각했습니다.
CSS 구성 요소가 아직 작성되지 않았습니다.
html:
Title
제목 오른쪽 구현 " More" on the side
위 그림과 같은 효과를 한번 만들어 보았는데 position을 사용하여 h2 태그의 오른쪽을 상대적으로 배치하게 되었습니다. 이런 식으로 코드는 실제로 실제로 여러 줄을 사용하면 더 간단한 방법을 사용할 수 있습니다.
예를 들어 HTML 코드는 다음과 같습니다.
< a h ref=" #" >제목< /a> 20px;
}
범위{
위치:절대;
오른쪽:0;
상단:0;
디스플레이:블록;
height:20px;
}
이 방법으로 오른쪽에서 더 많은 것을 얻을 수 있습니다.
h2{
height:20px; }
span{
float:right ;
display:block;
margin:-10px 0 0 0;
height:20px;
이를 달성하기 위해 음수 margin-top을 사용합니다. 기본 부동 소수점은 줄이 h2 태그 아래로 줄바꿈하므로 자체적으로 점프하도록 합니다. 아주 간단하다고 했죠? 아주 간단하기 때문에 별도의 테스트 페이지는 공개하지 않겠습니다.
ps: 언젠가는 Blue Ideal 같은 에디터가 있어야 할 것 같습니다...
타오바오의 CSS 속성 순서 작성 표준
이전 부서의 동료들은 각자 작성 표준 세트를 가지고 있었는데, 이로 인해 서로의 CSS 코드를 읽기가 매우 어려워서 여러분에게도 도움이 될 수 있는 작성 표준 세트를 구현했습니다.
*{
/*표시 속성*/
표시
위치
float
지우기
커서
…
/*박스 모델*/
여백
패딩
너비
높이
/*Typesetting*/
vertical-align
white-space
text- 장식
텍스트 정렬
…
/*text*/
color
font
content
/*border background 테두리와 배경을 사용하는 이유 마지막에 넣는 이유는 이전보다 수정 빈도가 더 잦아질 것이기 때문에 마지막에 확인하는 것이 더 편리하기 때문입니다. 하하. */
테두리
배경
}
최종적으로 속성 쓰기 순서는 신님? 몬스터님? - 옷의 종류(비키니? 패딩자켓?) - 옷의 스타일(검은색? 흰색? 단추? 지퍼?) - 어떤 화장품과 헤어스타일을 사용하나요?
이 쓰기 표준은 브라우저 제조업체에서 권장하는 쓰기 표준이 아니므로. 그것은 표준 발기인의 대다수에 의해 인식되지 않을 수 있습니다. 그러나 몇몇 형제들은 이것이 기존 Taobao 환경과 가장 일치한다고 믿게 되었습니다.
CSS 코드의 약어
CSS 약어의 구문은 초보자에게 도움이 되며, 베테랑은 굳이 읽을 필요가 없습니다.
0px는 단위가 필요하지 않습니다. : margin:0
박스 모델의 약어이며 구문은 margin: top right lower left;입니다. 심지어 margin: top (right left) Bottom으로 축약될 수도 있습니다. 오른쪽과 왼쪽이 동일해야 합니다.
css 속성의 마지막 항목 ";"번은 생략합니다. (권장하지 않음 ^_^)
글꼴 너비를 보통 400으로 바꾸고, 굵은 글씨를 700으로 바꿉니다.
16진수 색상 값은 각 두 자리의 값이 동일할 경우 반으로 축약할 수 있습니다. 예: #000000은 #000으로 축약할 수 있습니다.
약어는 #04D입니다. border, 구문은 border:width 스타일 색상, boder:1px solid red
배경의 약어, 구문은 다음과 유사합니다: background:#f00 url(ground.gif) no -repeatfixed 0 0( 왜 고정된 글을 쓰지 않는가?)
font:italic small-capsbold 1em/140% "SimSun", sans-serif와 유사한 글꼴의 약어는 가장 간단한 글꼴로 생략할 수 있습니다. 12px "SimSun".
list 속성 약어, 구문 목록 스타일: url(image.gif) 내부에 있지만 일반적으로 사용하지 않습니다.
10개 만들기 정말 어렵네요. 쓸데없는 줄바꿈과 공백 삭제만 하나로 세어보세요.
어느 날 팀 내에서 모두가 '알 수 없는 이미지의 세로 중심 배치' 문제를 논의하던 중 갑자기 아이디어가 떠올랐습니다. vertical-align:middle 속성을 사용하여 다음과 같은 미성숙한 예를 만들었습니다.
CSS:
p{
width:140px; 🎜> height:140px;
text-indent:-8px;
text-align:center;
배경:빨간색;
*글꼴 크기:120px;
*text-indent:-60px;
img{
너비:100px;
수직 정렬 :middle;
}
HTML :
< p>& nbsp;
위치를 사용하지 않았기 때문에 브라우징을 위해 많은 수의 사진이 표시되므로 렌더링 시 프로세서가 더 많은 리소스를 소비하게 됩니다.
단점은 의미없는 nbsp;를 출력한다는 것이고, 글꼴 크기와 글꼴 들여쓰기 계산식이 그리 간단하지 않습니다(그래서 위의 숫자가 모두 만들어졌습니다^_^). 🎜> 나중에 Xiaoma는 이 아이디어를 보고 코드를 업그레이드하는 데 시간을 보냈습니다. 그는 지루한 nbsp를 :after 출력으로 대체했습니다.
CSS:
.tb-p-c{
디스플레이: 블록
너비:140px
줄 높이: 140px; 🎜> text-align:center;
*font-size:123px;
.tb-p-c img{
수직 정렬:middle; p-c:after {
내용: ".";
가시성:
글꼴 크기: 12px
여백-왼쪽:
}
HTML: >
이렇게 하면 귀찮은 nbsp가 사라집니다. 모든 사람이 수직 정렬:중간 렌더링 방법을 더 잘 이해하고 있습니다. 많은 동지들은 또한 after pseudo-class가 해킹에 사용될 수 있다는 것을 발견했습니다.
그 결과 원의 중심은 CSS를 다시 업그레이드했습니다:
CSS:
.tb-p-c {
디스플레이: 테이블-셀;
너비:140px;
텍스트-정렬:센터; 디스플레이: 블록
*글꼴 크기: 122px; 배경:빨간색
}
.tb-p-c img {
수직 정렬: 중간; 이번 업그레이드는 시간적 제약으로 인해 위 코드를 테스트하지 않았습니다. 그 이유는 렌더링에 디스플레이를 사용하기 때문입니다. 브라우저가 여러 번 렌더링할 것 같아서 테스트하지 않았습니다.
이번 토론을 통해 우리는 많은 이득을 얻었습니다. 모두가 참여한다면 우리가 발견하지 못한 방식과 관점이 더 많아질 것이라고 믿습니다. 여러분, 인색하지 마시고 더 많은 답글을 올려주시고 함께 개선해 나가세요.
