Ultimele tutoriale de dezvoltare web

HTML Responsabil Web Design


Pagina dvs. de web ar trebui să arate bine și să fie ușor de utilizat, indiferent de dispozitiv.


Ce este receptivă Web Design?

Responsive Web Design face pagina web arata bine pe toate dispozitivele (desktops, tablets, and phones) - (desktops, tablets, and phones) .

Responsive Web Design este despre utilizarea CSS si HTML pentru a redimensiona, ascunde, micșora, mări sau mutați conținut pentru a face sa arate bine pe orice ecran:


Creează-ți propriul design receptivă

O modalitate de a crea un design receptiv, este să-l creați-vă:

Exemplu

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
</style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>
Încearcă - l singur »

Utilizarea W3.CSS

O altă modalitate de a crea un design receptiv, este de a utiliza o foaie de stil receptiv, cum ar fi W3.CSS

W3.CSS face ușor de a dezvolta site-uri care arata frumos la orice dimensiune; desktop, laptop, tabletă sau telefon:

W3.CSS Demo

Redimensionarea această pagină receptiv!

Londra

Londra este capitala Angliei.

Acesta este cel mai populat oraș din Regatul Unit, cu o zonă metropolitană de peste 13 milioane de locuitori.

Paris

Paris este capitala Frantei.

Zona din Paris este una dintre cele mai mari centre de populație din Europa, cu mai mult de 12 milioane de locuitori.

Tokyo

Tokyo este capitala Japoniei.

Acesta este centrul Tokyo zona Greater, și zona metropolitană cel mai populat din lume.

Exemplu

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<body>

<div class="w3-container w3-orange">
  <h1>W3.CSS Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</div>

</body>
</html>
Încearcă - l singur »

Pentru a afla mai multe despre W3.CSS, citiți Tutorial W3.CSS .