Latest web development tutorials

Responsive Web Design - Grid View

Co to jest widok siatki?

Wiele stron internetowych jest konstrukcja oparta na siatce, co oznacza, że ​​strona jest oparta na układzie kolumnowym.

Użyj widoku siatki pomaga nam projektować strony internetowe. To pozwala nam dodać element strony staje się łatwiejsze.

Responsive widoku siatki jest zwykle 12, szerokość 100%, gdy okno przeglądarki jest zmieniany automatycznie wysuwana.

Responsive widoku siatki

Tworzenie widoku siatki elastycznej

Następnie stworzyć elastyczne widoku siatki.

Najpierw upewnij się, że wszystkie elementy HTML mają właściwościbox-zaklejania i ustawić border-box.

Upewnić się marże i granic zawarte między szerokości i wysokości elementu.

Dodaj następujący kod: 

* {
    box-sizing: border-box;
}

Zobacz więcej box-zaklejanie proszę kliknąć: CSS3 własność box-zaklejania .

Poniższy przykład pokazuje prosty czułe stronę internetową, która zawiera dwie kolumny:

Przykłady

.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

Spróbuj »

Przykłady obejmują dwóch powyższych.

System Siatka 12 może lepiej kontrolować czułe internetowej.

Po pierwsze, możemy obliczyć procent każdej kolumny: 100% / 12 = 8,33%.

Określone w każdejklasie kolumny class = "współpracownicy" służy do określenia każda kolumna ma kilka rozpiętości:

CSS:

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

Spróbuj »

Wszystkie kolumny pozostaje płynny, odstępy (dopełnienie), aby 15px:

CSS:

[Class = * "współpracownicy"] {
float: left;
padding: 15px;
border: 1px solid red;
}

Każdy wiersz z użyciem pakietu <div>. Wszystkie kolumny należy dodać do 12:

<Div class = "wiersz">
<Div class = "COL-3 "> ... </ div>
<Div class = "kol-9 "> ... </ div>
</ Div>

Zachowanie kolumna pozostaje płynny i dodać jasną float:

CSS:

.row: after {
content: "";
clear: both;
display: block;
}

Możemy dodać trochę stylu i koloru, niech wyglądają lepiej:

Przykłady

html {
font-family: "Lucida Sans" , bezszeryfową;
}
.header {
background-color: # 9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8 pikseli;
margin-bottom: 7px;
background-color: # 33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba (0,0,0,0.12), 0 1px 2px rgba (0,0,0,0.24);
}
.menu li: hover {
background-color: # 0099cc;
}

Spróbuj »