<기록학습> (처음 3일) JD.com 페이지 주의사항

Training School
1~3일차
HTML을 먼저 배워보세요
지금 유행하는 것은 HTML5이고, 현재 배우고 있는 것은 HTML5 사양입니다.
(특정 기초가 있는 분들을 위한 학습)
처음 3일 동안 배운 것은 JD.com 페이지 작성 방법이었습니다. 이전에 썼던 것과 페이지가 똑같아 보였습니다. , 하지만 선생님이 말씀하신 내용에는 여전히 많은 차이가 있었습니다.
1. 프로그래머는 다른 사람이 읽기 쉽도록 표준화된 방식으로 작성하는 것이 매우 중요하므로 댓글이 매우 중요합니다.
《주의사항》
2. 페이지의 레이아웃을 먼저 신중하게 고려하고 여러 부분으로 나누어야 하며, 머리 부분과 꼬리 부분에는 CSS 파일로 작성할 수 있습니다.
3. 사용자가 주로 방문하는 곳에서는 "|"처럼 최대한 예쁘게 작성하시면 됩니다. 첫 번째 태그는

로 감싸주시면 됩니다. 그런 다음 내부 너비, 높이, 배경을 작성합니다(예:

;
.dps{
width: 1px;
height: 12px;).
background -color: #ddd;
margin-top: 9px;
padding: 0
}
li는 다른 패딩 값을 가질 수도 있고 상속됨, 여기에는 0이 설정됩니다.
단순하게 작성하고 마지막에 직접 작성하면 됩니다.
4. 예전에는 코드를 작성하고 레이아웃이 마음에 들어서 높이를 설정하는 걸 좋아했는데, 이건 쓰기 편해요. 쓰기 시작할 때, 쓰기가 끝난 후에는 조심스럽게 제거하십시오.
부동형인 경우 코드 전체 레이아웃에 의사 요소를 추가하여 부동형을 지울 수 있습니다. 그것은 .clearfix:after{}

입니다.

《페이지 메모 작성》
<1>삼각형 기호는;◇
i와 s를 모두 드래그해야 하며, 즉, 위치 추가:절대; 너비와 높이를 설정하고, set Overflow:hidden; s는 글꼴
Example.shortcut s{
글꼴:400 15px/12px consolas;
위치: 절대를 설정합니다. ;
위쪽: -6px;
오른쪽: 0;
}
.shortcut i{
너비: 15px;
높이: 8px;
위치: 절대;
right:8px;
top: 12px;
Overflow: Hidden;
}
글꼴 코드 앞뒤에 그림이나 삼각형 등을 추가하려면 꼭 남겨주세요. 공백 설정
<2> 객체의 위치 관계를 변경하는 세 가지 디스플레이가 있습니다: inline-block position
<3> -radius:0 0 0 0; 덮어쓰지 않으려면 너비를 설정하지 않도록 주의하세요. 패딩
은 .shopping-t{
position:absolute;
top: -6px; 오른쪽: 7px;
테두리 반경: 8px 7px 7px 0;
배경: 빨간색;
색상:#fff;
패딩: 0 3px;
글꼴:400 11px/15px 보통;
}

<4> 페이지가 축소됨에 따라 특정 중간 부분에서 설정 코드가 변경되는 경우 위치를 설정하세요

예:

.slogen .st{
위치: 절대;
왼쪽: 50%;
}
.slogen .sl1{
여백-왼쪽: -604px;
}
.slogen .sl2{
여백-왼쪽: -304px;
}
.slogen .sl4{
여백-왼쪽: 305px;
}

<5>a 태그는 img를 감싸는 경우가 많습니다(사진을 클릭하면 점프하면 전체 큰 사진이고, 작은 사진이나 이동할 사진은 여전히 ​​b, i 등을 사용합니다), b, i 태그 , 등을 작은 아이콘으로 설정하고 텍스트의 왼쪽과 오른쪽에 추가할 스타일은 b, i 설정 표시에 주의하세요

동시에 a가 b, i 등을 배경으로 설정하면; 이미지에 웹 크롤러 최적화를 용이하게 하기 위해 텍스트 단락을 추가할 수도 있습니다.
예를 들어 Jingdong
a{
display: inline-block;
너비: 270px;
높이: 60px;
배경: url(".. /images/logo-201305.png");
margin-top: 20px;
text-indent : -10000px;/*텍스트가 그림에서 멀리 떨어져 있음*/
}
<6>설정한 경우 특정 페이지가 다른 페이지 위에 있는 경우에는 Z-index가 사용됩니다. 페이지가 부동하는 경우 위치: 상대를 설정해야 합니다. 부동하는 경우
표준에서 벗어나므로 z-index

를 설정할 수 없습니다.