網頁版面有相當多種型式(如柵欄型...)，其實只要透過 CSS 中的 float 將不同長度及寛度(width & height) 就可設計出不同的版面。對 float 真的要好好了解，它可算設版的最佳好朋友。
HTML:
<body>
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="one">5</div>
</body>
CSS:
body{
width:1000px;
height:250px;
background-color:#ddeecc;
border:2px solid black;
}
*{
margin:0;
padding:0;
}
div{
display:inline-block;
text-align:center;
font-size:20px;
border:0 solid red;
}
div:nth-child(1){
width:25%;
height:100%;
background-color:red;
float:left;
}
div:nth-child(2){
position:relative;
left:0;
width:50%;
height:30%;
background-color:rgba(0,0,255,0.3);
float:left;
}
div:nth-child(3){
width:25%;
height:100%;
background-color:#887766;
float:right;
}
div:nth-child(4){
width:50%;
height:40%;
background-color:#334455;
float:top;
}
div:nth-child(5){
width:50%;
height:30%;
background-color:#12eecc;
}
結果如下:(有空多多練習不同的變化):
HTML:
<body>
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="one">5</div>
</body>
CSS:
body{
width:1000px;
height:250px;
background-color:#ddeecc;
border:2px solid black;
}
*{
margin:0;
padding:0;
}
div{
display:inline-block;
text-align:center;
font-size:20px;
border:0 solid red;
}
div:nth-child(1){
width:25%;
height:100%;
background-color:red;
float:left;
}
div:nth-child(2){
position:relative;
left:0;
width:50%;
height:30%;
background-color:rgba(0,0,255,0.3);
float:left;
}
div:nth-child(3){
width:25%;
height:100%;
background-color:#887766;
float:right;
}
div:nth-child(4){
width:50%;
height:40%;
background-color:#334455;
float:top;
}
div:nth-child(5){
width:50%;
height:30%;
background-color:#12eecc;
}
結果如下:(有空多多練習不同的變化):
留言
張貼留言