Latest web development tutorials

układ HTML

Układ strony, aby poprawić wygląd strony jest bardzo ważna.

Proszę uważnie zaprojektować układ strony.

Przykłady

przykłady Online

Układ strony za pomocą elementu <div>
Jak korzystać z elementu <div> do układu.

Uklad strony <table>
Jak korzystać z <table> elementu do układu.

układ strony

Większość stron treści na wiele kolumn (jak czasopisma lub gazety tego).

Większość witryn mogą korzystać z <div> lub <table> elementy, aby utworzyć wiele kolumn. CSS służy do pozycjonowania elementów lub utworzyć tło i kolorowy wygląd strony.

lampa Chociaż możemy użyć tagu tabeli HTML zaprojektować piękny wygląd, ale znacznik tabeli nie jest zalecany do stosowania jako narzędzia układu - nie narzędzia układu tabeli.

Układ HTML - za pomocą <div>

Element div jest elementem blokowym służy do grupowania elementów HTML.

W poniższym przykładzie użyto pięć elementów div stworzyć układ multi-kolumna:

Przykłady

<! DOCTYPE html> <Html> <Head> <meta charset = "utf-8"> <Title> Ten poradnik (w3big.com) </ title> </ Head> <Body> <div id = "container" style = "width: 500px"> <div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> Główny tytuł strony </ h1> </ div> <div id = "menu" style = "background-color: # FFD700; height: 200px; width: 100px; pływaka: left;"> <B> Menu </ b> Największa HTML Największa CSS <br> JavaScript </ div> <div id = "content" style = "background-color: #EEEEEE ; height: 200px; width: 400px; pływaka: left;"> tekst </ div> <div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Prawa autorskie © w3big.com </ div> </ Div> </ Body> </ Html>

Spróbuj »

Powyższy kod HTML daje następujące wyniki:

Układ HTML - za pomocą tabel

Zastosowanie HTML <tabela> jest do utworzenia układu, w prosty sposób.

Większość witryn mogą korzystać z <div> lub <table> elementy, aby utworzyć wiele kolumn. CSS służy do pozycjonowania elementów lub utworzyć tło i kolorowy wygląd strony.

lampa Nawet jeśli można użyć tabel HTML, aby stworzyć piękny wygląd, ale celem jest przedstawienie danych tabelarycznych tabeli design - nie narzędzie układ tabeli!

W poniższym przykładzie zastosowano trzy rzędy dwóch tabel - pierwsza i ostatnia linia wykorzystuje atrybut colspan span dwóch kryteriów:

Przykłady

<! DOCTYPE html> <Html> <Head> <meta charset = "utf-8"> <Title> Ten poradnik (w3big.com) </ title> </ Head> <Body> <table width = "500" border = "0"> <Tr> <td colspan = "2" style = "background-color: # FFA500;"> <H1> Główny tytuł strony </ h1> </ Td> </ Tr> <Tr> <td style = "background-color: # FFD700; width: 100px;"> <B> Menu </ b> Największa HTML Największa CSS Największa JavaScript </ td> <td style = "background-color: #eeeeee ; height: 200px; width: 400px;"> tekst </ td> </ Tr> <Tr> <td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Prawa autorskie © w3big.com </ td> </ Tr> </ Table> </ Body> </ Html>

Spróbuj »

Powyższy kod HTML daje następujące wyniki:


Układ HTML - Porady

Wskazówka: największe zalety korzystania z CSS jest to, że jeśli kod CSS są przechowywane w zewnętrznym arkuszu stylów, to strona będzie łatwiejsza w utrzymaniu.Poprzez edycję jednego pliku, można zmienić układ na wszystkich stronach. Aby dowiedzieć się więcej na temat CSS, odwiedź nasz poradnik CSS .

Wskazówka: Ze względu na tworzenie zaawansowanych układ jest bardzo czasochłonne, przy użyciu szablonu to szybkie rozwiązanie.Dzięki wyszukiwarce można znaleźć wiele darmowych szablonów stron internetowych (można użyć tych prekompilowany układ witryny i optymalizować je).

znaczniki HTML układ

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。