跳到主要內容

DIV版面配置

網頁版面有相當多種型式(如柵欄型...)，其實只要透過 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;
}

結果如下:(有空多多練習不同的變化):



標籤：

留言

張貼留言