매우 현실적입니다. CSS3는 정말 강력합니다. 주의해야 할 점은 여전히 동일합니다. 세부 사항을 미세 조정하는 데 어려움이 있습니다. 특히 CSS3는 매우 유연합니다. 다음에 기회가 있으면 CSS3 그라데이션에 대한 자세한 튜토리얼을 게시하겠습니다. 배경.
매우 현실적입니다. CSS3는 정말 강력합니다.
알림: IE에서 검색하지 마세요.
원저자의 디자인 스케치를 살펴보겠습니다.
간결한 생성 과정
1단계: 다음 메뉴 구조 만들기
<p id="startmenu"> <ul id="programs"> <li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa></li> <li><a href="#"><img src="chrome.png" alt="" />Google Chromea></li> <li><a href="#"><img src="safari.png" alt="" />Safaria></li> <li><a href="#"><img src="opera.png" alt="" />Operaa></li> <li><a href="#"><img src="ie.png" alt="" />Internet Explorera></li> <li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa></li> <li><a href="#"><img src="twitter_32.png" alt="" />Twittera></li> <li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa></li> <ul> <ul id="links"> <li class="icon"><img src="folder.png" alt="" /></li> <li><a href="#"><span>Documentsspan>a></li> <li><a href="#"><span>Picturesspan>a></li> <li><a href="#"><span>Musicspan>a></li> <li><a href="#"><span>Computerspan>a></li> <li><a href="#"><span>Networkspan>a></li> <li><a href="#"><span>Connect tospan>a></li> <ul> p>
win7의 시작 메뉴는 두 부분으로 구성되어 있습니다. 왼쪽에 있는 프로그램 메뉴와 오른쪽의 시스템 메뉴.
2단계: 메뉴 컨테이너 CSS
#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px; -moz-border-radius:5px;-webkit-border-radius:5px; position:relative; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#619bb9; background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
몇 가지 주의할 점이 있으니 주의하세요.
-moz-border-radius:5px;-webkit-border-radius:5px;圆角效果,这是css3中应用最广的 box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;阴影效果 background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));渐变背景
3단계: 메뉴 왼쪽에 있는 CSS
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px; box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff; -moz-border-radius:3px;-webkit-border-radius:3px;} #programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px; color:#4b4b4b; text-decoration:none; min-width:220px;} #programs a:hover {border:solid 1px #7da2ce; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#cfe3fd; background: -moz-linear-gradient(top, #dcebfd, #c2dcfd); background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));} #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}
여기서 주목할 점은 메뉴 항목을 통과하는 마우스의 효과 설정, 즉 #programs a:hover 의 스타일입니다. 이것이 바로 CSS3의 어려움이자 위력입니다. 그리고 그라데이션 배경.
4단계: 메뉴 오른쪽의 CSS 부분
#links {margin:7px; margin-top:-30px;} #links li.icon {text-align:center;} #links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative; color:#fff; text-decoration:none; min-width:120px;} #links a:hover {border:solid 1px #000; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#658da0; background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55)); background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384)); } #links a span { padding:5px; display:block; } #links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5)); background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent), color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
주의해야 할 점은 여전히 동일합니다. 특히 CSS3의 세부 사항을 미세 조정하는 데 어려움이 있습니다. 매우 유연합니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장사항:
CSS 페이지에서 왼쪽, 중간, 오른쪽 열 레이아웃 구현
위 내용은 css3을 사용하여 window7의 시작 메뉴 모방의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!