Desidero creare un layout semplice come di seguito.Layout DIV HTML
qualcuno può dirmi come posso raggiungere questo obiettivo? Per favore perdona la "franchezza", io vengo da uno sfondo in C# quindi lo sviluppo di un'interfaccia utente web è leggermente scoraggiante per me.
Aggiornamento: Mi diverto a giocare con CSS e CSS ma non produco quello che voglio.
Questo può aiutare:
<body>
<div style="border: 1px solid; float: right; width: 25%; height: 1000px;" id="1">one</div>
<div style="border: 1px solid; height: 250px; width: 74%;" id="1">two</div>
<div style="border: 1px solid; width: 35%; float: right; height: 750px;" id="1">three</div>
<div style="border: 1px solid; width: 35%; height: 750px;" id="1">four</div>
</body>
Two column div layout with fluid left and fixed right column
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
Questi collegamento dirvi come gestire il layout due colonne. Per prima cosa basta fare in modo che due colonne siano Left e Right, dopodiché, fallo di nuovo per le colonne Left.
Un sistema di griglia CSS, come 960.gs o Twitter's bootstrap aiuterà in modo massiccio a far funzionare i layout come desiderato.
Mentre potremmo scrivere tutto il codice necessario per implementare questo layout, non sarebbe vantaggioso per voi se non conoscete il CSS. Possiamo tuttavia indicarti la giusta direzione.
Questo può essere ottenuto utilizzando la regola Float con CSS. Here's a link
Si dovrebbe avere una buona conoscenza di base dell'HTML per disporre questo semanticamente. Codecademy ti guiderà attraverso HTML e CSS se hai bisogno di aiuto con tutto questo.
<HTML>
<HEAD>
<TITLE>Working with div</TITLE>
<META CHARSET="UTF-8" />
</HEAD>
<BODY>
<link rel=stylesheet href="div.css" type="text/css">
<div class="a2">two</div>
<div class="a1">one</div>
<div class="VerticalSpace"></div>
<div class="a3">three</div>
<div class="HorizontalSpace"></div>
<div class="a4">four</div>
</BODY>
</HTML>
e il contenuto del file di div.css è
.a1, .a2, .a3, .a4
{
border: 4px solid;
}
.VerticalSpace, .HorizontalSpace
{
border: 0px;
float: left;
}
.a2
{
height: 250px;
float: left;
width: 74%;
}
.a3
{
height: 350px;
float: left;
width: 35%;
}
.a4
{
height: 350px;
float: left;
width: 35%;
}
.a1
{
height: 617px;
width: 23%;
float: right;
}
.VerticalSpace
{
width: 60%;
height: 10px;
}
.HorizontalSpace
{
height: 350px;
width: 4%;
}
perché qualcuno ha dato -1 per questa domanda? Per favore, spiegamelo – MikroDel
@MikroDel Ho dato la domanda a -1 perché è molto ampia e vauge - probabilmente dovresti cercare su Google "colonne con css" piuttosto che chiedere qui – Sean
per un commento) Ora sa cosa è sbagliato – MikroDel