Chcę utworzyć prosty układ, jak poniżej.Układ HTML DIV
Czy ktoś mógłby mi powiedzieć, w jaki sposób można to osiągnąć? Proszę wybaczyć "szczerość", pochodzę z tła C#, więc rozwijanie WEB UI jest dla mnie nieco zniechęcające.
Aktualizacja: jestem żonglerka wokół „S i CSS, ale nie produkuje, co chcę.
To może pomóc:
<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/
Te łącza powiedzieć, jak radzić sobie w układ dwóch kolumn. Najpierw po prostu zrób to, aby mieć dwie kolumny Lewą i Prawą, po czym wykonaj to ponownie dla lewych kolumn.
System gridowy CSS, taki jak 960.gs lub Twitter's bootstrap, pomoże w znacznym usprawnieniu działania układów.
Chociaż możemy napisać cały kod potrzebny do wdrożenia tego układu, nie byłoby to korzystne, jeśli nie znasz CSS. Możemy jednak wskazać ci właściwy kierunek.
Można to osiągnąć za pomocą reguły Float z CSS. Here's a link
Dobra podstawowa znajomość HTML powinna być również dobra do semantycznego układania tego. Codecademy poprowadzi cię przez HTML i CSS, jeśli potrzebujesz pomocy z tym wszystkim.
<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>
a zawartość pliku div.css jest
.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%;
}
dlaczego ktoś dał -1 na to pytanie? Wyjaśnij to – MikroDel
@MikroDel Podałem pytanie -1, ponieważ jest bardzo szerokie i vauge - prawdopodobnie najlepiej byłoby użyć google "kolumny z css" niż pytać tutaj – Sean
thaks za komentarz) Teraz on lub ona wie, co było nie tak – MikroDel