댓글 : CSS3을 사용하여 HTML5가 수행 한 메뉴 효과. 효과를 보려면 실행하십시오
구현의 어려움은 다음과 같습니다. 1 차, 최후의 두 명의 선택기, 나중에 마진 왼쪽의 적용 : -1px;, 33% 및 34%의 기술 처리.
또 다른 어려움은 다음과 같습니다. Box-Shadow : 1px 0 0 #f1f1f1 삽입; 구현.
마지막으로:
배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, ( #f9f9f9), ( #b6b4b4)까지 ( #b6b4b4)); 배경 : -moz-linear-gradient (상단, #f9f9f9, #b6b4b4); 배경 : -o-linear-gradient (상단, #f9f9f9, #b6b4b4); #f9f9f9, #b6b4b4); 배경 : 선형 등급 (상단, #f9f9f9, #b6b4b4); 배경 : 선형 등급 (상단, #f9f9f9, #b6b4b4);
<! doctype html>
<html xmlns = "<a href ="http://www.w3.org/1999/xhtml "> </a>"xml : lang = "en">
<헤드>
<meta http-equiv = "content-type"content = "text/html; charset = utf-8"/>
<title> html5, css3 메뉴 </title>
<스타일 유형 = "텍스트/CSS">
.jikey_demo {너비 : 80%; 여백 : 0 Auto; 배경 :#f1f1f1;}
.news_info {마진-바닥 : 5px; 경계 : 1px solid #bbb; Border-Radius : 5px; Box-Shadow : 0 1px 0 #f1f1f1;}
.news_info a {display : inline-block; 너비 : 33%; 높이 : 26px; 글꼴-가족 : "Microsoft Yahei"; line-height : 26px; 텍스트-정렬 : 중심; 컬러 : #555; 테두리 : 1px solid #ccc; box-shadow : 1px 0 0 #f1f1 삽입;
.news_info A : 1 차 자녀 {너비 : 33%; Box-Shadow : None; Border-Radius : 4px 0 4px;}
.news_info A : 최후의 자녀 {너비 : 34%; 테두리 오른쪽 : 없음; 마진-왼쪽 : -2px; 국경-라디우스 : 0 4px 4px 0;}
.news_info a : 호버, .news_info a.current {color :#208edd; 배경 : -webkit-gradient (선형, 왼쪽 상단, 왼쪽 하단, (#f9f9f9), (#b6b4b4)); 배경 : -moz-linear-gradient (상단,#f9f9f9,#f9f9f9, #b6b4b4); 배경 : -o-linear-gradient (상단, #f9f9f9, #b6b4b4); 배경 : -o-linear-gradient (상단, #f9f9f9, #b6b4b4); 배경 : linear-gradient (Top, #f9f9f9, #b6b4b4); 선형 배경 (Top, #f9f9f9); #B6B4B4);}
</스타일>
</head>
<body>
<div>
<av> <a href = "/news/"> news1 </a> <a href = "/guide/"> news2 </a> <a href = "/review/"> news3 </a> </nav>
</div>
</body>
</html>