Hvordan konvertere fast kolonneoppsett til en flytende
En nettside som har en fast bredde layout har koden i stilark fil som setter deler av nettstedets layout til en viss bredde i piksler. Dette betyr at området ikke vil endre størrelse til å passe skjermen på datamaskinen. En nettside med en væske-bredde layout har kode i CSS-filen som setter deler av nettstedets layout bredde til en prosentandel av den oppfatning display skjermstørrelse. Dette betyr at området vil endre størrelsen til å passe brukerens skjerm. Du kan endre en fast bredde layout til en flytende bredde layout ved å erstatte de innstilte bredder i piksler med relative bredder i prosenter.
Bruksanvisning
1 Åpne CSS-filen av oppsettet du ønsker å endre til en flytende bredde i din foretrukne HTML eller ren tekst editor.
2 Finn hoved wrapper i CSS-koden. Den viktigste omhyllingen styrer bredden på hele oppsettet. Det er vanligvis plassert nær toppen av CSS-filen, og det er velgeren navn generelt inneholder ordet "wrapper" eller "container", sammen med et ord som "Main" eller "side" for å forklare at det er den viktigste wrapper for nettstedet. I begynnelsen av velgeren navnet er en hashtag, og følgende hoved wrapper er en liste over egenskaper, inkludert "width".
For eksempel:
Hoved-wrapper {
width: 1000px;
3 Finn "width" eiendom i listen over viktigste wrapper egenskaper. Noter hva den faste bredden på hoved wrapper er i piksler, og sett bredden i piksler med "100%"
For eksempel, ville du endre dette stykke kode:
Hoved-wrapper {
width: 1000px;
til
Hoved-wrapper {
width: 100%;
4 Finn hver av de wrappers for sidefelt i CSS-filen. De er vanligvis plassert i nærheten av hoved wrapper kode og har "sidebar" som en del av velger navn.
For eksempel:
venstre sidebar-wrapper {
width: 200px;
5 Konverter bredden i piksler til den forholdsmessige andelen av nettstedet du vil sidepanelet for å dekke.
For eksempel, hvis den opprinnelige bredden av området var 1000 piksler, endrer dette stykke kode:
venstre sidebar-wrapper {
width: 200px;
til
venstre sidebar-wrapper {
bredde: 20%;
6 Lagre CSS fil med wrappers konverteres til prosenter.
7 Åpne din foretrukne FTP-klient og logg deg på live web server. Naviger til plasseringen av den gamle CSS-fil på nettstedet ditt, og laste opp CSS-filen ved å dra den fra den lokale datamaskinen siden av klienten til live server side. Slipp den på toppen av den gamle CSS-filen. Klikk "OK" for å bekrefte at du vil overskrive den gamle CSS-filen.
8 Åpne nettstedet i nettleseren din for å se at den viser riktig med den konverterte flytende layout.
Hint
- Alltid ta en sikkerhetskopi av nettstedet ditt før du endrer filer på live server i tilfelle du gjør en feil.