Tip 1: Sådan oprettes en pop op-menu
Tip 1: Sådan oprettes en pop op-menu
Ved hjælp af kompetent HTML-kode og enkle CSS-regler kan du oprette en god pop-up menu, som let kan ændres og suppleres. Når du bruger markeringssprogværktøjerne og cascading stilark, kan du sikre korrekt drift menu i alle browsere.
instruktion
1
Først skal du bygge den grundlæggende struktur af din menu. Åbn en teksteditor og opret en nummereret liste fra undermenu, som virker som en del af moderlisten. For eksempel:
Det første element Drop-down element Drop-down element2
2
Gem den oprettede liste i en separat html-fil. Opret derefter en fil med udvidelsen. Css og indtast alle parametrene i stilarket.
3
Fjern alle indrykker og markører, der bruges i den unnumberedede liste, og indstil bredden menu bruger CSS værktøjer: ul {listestil: none; bredde: 200px; }
4
Indstil den relative position af alle elementer i listen ved hjælp af positionsattributten: ul li {position: relative; }
5
Yderligere er det nødvendigt at udstede undermenu, vil hver af deres elementer vises til højre for moderselskabet menu i det øjeblik, hvor markøren er på punktet: li ul {position: absolutte; venstre: 199px; top: 0; display: none; } Den venstre attribut har en værdi en pixel mindre end bredden af menu. Dette giver dig mulighed for korrekt at placere popup-punkterne uden at skabe dobbeltgrænser. Skærmattributten bruges til at skjulemenu når du åbner siden.
6
Indstil de ønskede stilarter for links ved hjælp af de relevante css-indstillinger. Aktivér displayet: Bloker parameter, så hvert link optager hele det plads, der er reserveret til det.
7
at menu viste sig i det øjeblik, hvor markøren er over det (hover), skal du indtaste koden: li: hover ul {display: block; }
8
Angiv yderligere muligheder for visning af links og listeposter, hvis det ønskes.
9
popup menu klar. Nu er det nødvendigt at medtage attributten i .html-filen: Pop-up menu
Tip 2: Sådan laver du en popup-side
Når du opretter websteder bruges meget oftepop-up vinduer som menuer, annoncetekster mv. Desuden giver den kompakte form dig mulighed for at spare plads på siden. Alt du behøver er at skrive den korrekte kode.
instruktion
1
Oprettelse af pop-up sider kan gøresbaseret på javascript. Der er dog en enklere mulighed - ved hjælp af HTML markup sprog og CSS sprog. Komfort er, at de vinduer, der oprettes på denne måde, vil blive understøttet af de fleste browsere, uanset om de understøtter javascript.
2
Lignende kode er placeret i to udtryk, i den førstelinje indeholder et link, der er ansvarlig for at åbne vinduet, den anden linje - faktisk et pop-up vindue, onmouseover attribut siger, at vil påvirke standarden, når du holder musen over linjen forbinder markøren typen, onClick peger på det faktum, at når du klikker på et skjult vindue vil synlig: <a onmouseover = "this.style.cursor =" pointer "" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp "). style.display =" block ""> <span style = "text-decoration: underline;"> Klik her! </ span> </a>
3
Du skal angive vinduets størrelse, farven ogstørrelse på teksten, baggrunden og rammerne. Du kan angive alle disse parametre i stilattributten. Farven er angivet med kodetabellen rgb. I standard Paint-værktøjet i vinduet "Change colors" kan du finde koden for den ønskede nuance, hvor R er rød, G er grøn, og B er blå (blå). Så sort er rgb kode (0,0,0), hvid rgb (255.255.255), grå rgb (126.126.126) <div id = "popup" style = "display: none; position :. Absolut, venstre: 50px; top: 50px; border: solid sort 1px; padding: 10px; background-color: rgb (255.255.225); text-align: retfærdiggøre; font-size: 12px; width: 135px; "> post eller tekst i et popup-vindue </ div> vælgeren visning med den angivne værdi af ingen gør dit vindue usynligt.
4
Nu skal du placere disse to linjer mellem tags på din side <body> og </ body>. Derefter er popup-vinduet klar til arbejde.
5
Men med dette sæt vil du modtage hele tidenåbent vindue. Så hvis du har brug for at få et pop-up vindue kan lukkes, tilføje et link, som vil være ansvarlig for denne handling, før taggen </ div>: <br /> <div style = "text-align: right;"> <a onmouseover = "this.style.cursor =" pointer "" style = "font-size: 12px;" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp ") style.display =." none ""> <span style = "text-decoration: understrege,"> tæt </ span> </a> </ div>
6
Du vil sikkert lave et pop op-vindueikke ved at klikke som beskrevet ovenfor, men når du svæver markøren. Så den første linje skal skrives på følgende måde: <a onmouseover = "document.getElementById (" PopUp ") Style.display =." Blok "" onMouseOut = "document.getElementById (" PopUp ") style.display =" none "". onfocus = "this.blur ();"> <span style = "text-decoration: underline;"> flyt musen herhen! </ span> </a>
7
Så HTML-koden i pop-up vinduet er digmodtaget og bekendt med strukturen af dens udarbejdelse. Alt der er tilbage, er at dekorere udseendet og indholdet, hvilket naturligvis vil afhænge af dine færdigheder, formål og fantasi. Men vi skal huske, at dette er den nemmeste mulighed for at oprette et popup-vindue. Hvis du har nok programmeringsevner i javascript (MooTools, jQuery, Prototype, etc.), kan du oprette en smukkere og interessant side.
