018 전투 상자

A : PS

1. 통치자

　　Ctrl 키 + r에 : 눈금자 쇼

　　그런 다음 오른쪽 선택 픽셀.

　　공간 드래그를 누르고

　　사용 피펫 색상

　　선택에서 사각형 도구를 경계 사용하여, 당신은 선거구의 크기를 알 수 있습니다

　　Ctrl + D를 사용하여, 당신은 선택을 취소 할 수 있습니다

　　보조 라인 등의 모바일 도구 스크라이브 라인, 심장의 계산 버전

　　그림에서와 같이 로고를 잘라하는 데 사용되는 도구 분할.

2. 슬라이스 도구를 사용하여

　　도구 조각의 사용을합니다.

　　슬라이스 한 후, 웹 모든 형식을 저장.

　　당신은 정리 조각을 사용하여,이보기 메뉴를 사용할 수 있습니다, 주로 시간이 특히 큰 조각에 사용

II : 케이스

1.html

1  <! DOCTYPE html로 > 
2  < HTML LANG = "EN" > 
3  < 선두 > 
4      < 메타 캐릭터 = "UTF-8" > 
5      < 타이틀 > 문헌 </ 타이틀 > 
6      < 링크 REL = "스타일" HREF = "CSS / 인덱스 .CSS "  /> 
7  </ 헤드 > 
8  < 본문 > 
9      <! - 헤더部分->
     클래스 = "헤더" > 
11          < DIV 클래스 = "내부" > 
12              < DIV 클래스 = "로고" > 
13                  <! - 在로고上加一个连接-> 
(14)                  < HREF = "#" > < IMG의 SRC = "이미지 / logo.png" 높이 = "63px" ALT = "로고" > </ > 15 </ DIV > 16 < DIV 클래스 = "탐색" >17 <! - NAV 링크 -> 18 <
             
             
                 
                 UL > 
19                      < 리 > < HREF = "#" >首页</ > </ 리 > 20 < 리 > < HREF = "#" >商城</ > </ 리 > 21 < 리 > < HREF = "#" >门店</ > </ 리 > 22 < 리 > < HREF = "#" >플랫폼 </ > </ 리
                     
                     
                     > 
23                      < 리 > < HREF = "#" >联盟</ > </ 리 > 24 < 리 > < HREF = "#" >关于云道</ > </ 리 > 25 </ UL > (26) </ DIV > 27 </ DIV > 28 </ DIV > (29) <! - 배너部分-> 30 <DIV의 클래스 = "배너" >
                     
                 
                     
         
     
     
     
             플랫폼에 많은 뛰어난 디자이너는 등등 자신의 공개 번호, 주 디자인 지식, 경험 및 디자인 산업 정보를 설정합니다. 더 높은 품질의 콘텐츠를 통합 할뿐만 아니라, 사용자 플랫폼, UI 디자인 공공 소유 즈 출시 중국에게 더 나은 독서 경험을 가지고. 좋은 디자인 지식 생태계를 만들어 함께 뛰어난 UI 디자이너와 함께 작업하고자하는 중국. </
     
     
     
         
             
                 
             
             P > 
40          </ DIV > 
41      
42      </ DIV > 
43  </ 바디 > 
44  </ HTML >

2.css

1  * {
 2      마진 : 0;
3      심 : 0;
4  }
 5  체 {
 6      배경색 : #fafafa;
7  }
 8  .nav 리튬 {
 (9)      목록 스타일 : 없음;
10      플로트 : 왼쪽;
11      마진 : 0 20 픽셀;
12  }
 13  
14  / *顶部导航栏* /
 15  .header {
 16      신장 63px;
17      배경색 : #fff;
18  }
 19  .inner {
 20      신장 63px;
21      폭 : 1157px;
(22)     여백 : 0 자동
 23입니다      : #의 e5c5f6 * / / 배경 - * 컬러
 24      라인 - 높이 : 63px; / * 라인이 높은 상속, 그것은 리 *이 /가 될 것이다
 (25)  }
 (26)가  .logo {
 27      높이 : 63px;
 28      부동 소수점 : 왼쪽;
 29  }
 30  .nav {
 31은      신장 63px;
 32      플로트 : 오른쪽;
 33이다  }
 (34) 인  
35  .nav 리튬 {A
 36      색상 : # 333;
 37      문자 장식 : 없음;
 38이다  }
 39  .nav 리 A : 호버 {
 40      ; 컬러 207adf #
 41이다  }
 (42)은  
43 인 .banner {
 44      신장 350px;
45      배경 : 홈페이지 (../ 이미지 / banner.jpg 이미지) 노 반복 상단 중앙;
46  }
 47  .service {
 48      / * 탑 마진 : 75px * /
 49      폭 : 1157px;
50      높이 500 픽셀;
51      여백 : 25 픽셀 자동 0;
52      / * 배경색 : 핑크 * /
 53  }
 54  .service-HD {
 55      경계 위쪽 : 1 픽셀 검은 점선;
56      마진 : 0 x 25 픽셀; 
57  }
 58  .service의 HD-H3 {
 59      폭 : 103px;
60      신장 20 픽셀;
(61)     여백 : 0 자동;
(62)      마진 탑 : -8px;
63  }
 64  .service HD-P는 {
 65      폰트 사이즈 : 16px;
(66)      색 : # 666;
67      라인 높이 : 26px;
68      텍스트 정렬 : 센터;
(69)      의 폭 : 900px;
70      여백 : 15 픽셀 자동 0;
71 }

3. 효과

추천