Verwenden Sie CSS3, um das Startmenü von Windows7 zu imitieren

Ganz realistisch, CSS3 ist wirklich leistungsstark. Auf welche Punkte geachtet werden sollte, ist immer noch die Feinabstimmung der Details, insbesondere die Erstellung des Farbverlaufs. CSS3 ist sehr flexibel. Wenn ich die Gelegenheit dazu habe, werde ich ein detailliertes Tutorial zum CSS3-Farbverlauf veröffentlichen Hintergrund.

Ganz realistisch, CSS3 ist wirklich leistungsstark.
Freundliche Erinnerung: Bitte surfen Sie nicht unter IE.
Werfen wir einen Blick auf die Entwurfsskizze des ursprünglichen Autors:

Prägnanter Erstellungsprozess

Schritt 1: Erstellen Sie die folgende Menüstruktur

<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>

Das Startmenü von Win7 besteht aus zwei Teilen, dem Programmmenü auf der linken Seite und dem Systemmenü auf der rechten Seite.

Schritt 2: Menü-Container-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)); }

Es gibt mehrere Punkte, die Anlass zur Sorge geben, auf die Sie achten können:

-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));渐变背景

Schritt 3: CSS auf der linken Seite des Menüs

#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;}

Bemerkenswert ist hier die Effekteinstellung der Maus über dem Menüpunkt, also der Stil in #Programmen a:hover Dies ist die Schwierigkeit und auch die Stärke von CSS3, das immer noch abgerundete Ecken, Schatten und Verlaufshintergründe bietet.

Schritt 4: CSS-Teil auf der rechten Seite des Menüs

#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))); }

Die Punkte, auf die man achten muss, sind immer noch die gleichen. Die Schwierigkeit liegt in Ordnung -Optimierung der Details, insbesondere der Produktion von Verlaufshintergrund, ist in CSS3 sehr flexibel.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS, um ein großes Dropdown-Menü zu implementieren

CSS-Seitenlayout mit links , mittlere und rechte Spalte Implementierung von

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um das Startmenü von Windows7 zu imitieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!