My Calendar

2012年4月14日 星期六

Assembly language (Intel-Based) Chapter3 Exercise 1

TITLE Subtract (Subtract.asm)

COMMENT &
Using the AddSub program from Section3.2 as a refresnce, write a program that subtract three integers using only
16-bit registers
&

include Irvine32.inc

.code
main PROC

mov ax,7000h
sub ax,2000h
sub ax,3000h
sub ax,1000h
call DumpRegs
exit
main ENDP
END main
張貼者： 於 沒有留言:
標籤：

2012年4月12日 星期四

清除float效果

Float 在設計多欄佈局時,是CSS常用的手段。但常常就會遇到的一種情況，就是用來包覆float子元素的父元素無法跟隨float子元素的高度一併延伸：


HTML 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
   <div class="left"></div>
    <div class="right"></div>
</div> 
</html>

CSS 
.container{
 margin : 0 auto;
 width: 500px;
 background: red;
 padding: 30px;
}

.left{
 background: black;
 width : 50px;
 height : 300px;
 float :left;
}

.right{
 background: green;
 width : 50px;
 height : 300px;
 float: right;
}


如果我們希望將父元素將全部子元素都包覆在裡面，可以有幾種方法清除float的效果:


使用Clear屬性的空元素
在浮动元素后使用一个空元素如<div class="clearfix"></div>，并在CSS中赋予 .clearfix{clear:both;}属性即可清除浮动。


在浮動元素後面增加<br/>標籤
<br/>吧有自帶的清楚浮動屬性

父級元素定義overflow:auto屬性
.container{
.over-flow{
   overflow: auto; zoom: 1; //zoom: 1; 處理兼容性問題
}
}
張貼者： 於 沒有留言:
標籤：

2012年4月11日 星期三

CSS float

在設計網頁版型的時候CSS float是大家都常用的屬性，特別是 DIV 區塊的浮動排版更加實用。

CSS float 語法
float : 參數

參數有 left,right和none分別是『向左浮動』，『向右浮動』和『不要浮動』

範例：我們要將兩個div做並排的效果。

 HTML 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

CSS 
.box1{  
    background: green;
    width:250px;  
    height: 50px; 
}

.box2{  
   background: red;
   width:250px;  
   height: 50px;
}

呈現效果如下












在沒有使用float 效果的時候你會發現兩個div是沒辦法並排，因為div屬於區塊元素會將整個瀏覽器盛滿。那我們現在將float :left 加到 CSS 中看會出現什麼效果。

.box1{  
    background: green;
    width:250px;  
    height: 50px; 
    float:left;
}

.box2{  
   background: red;
   width:250px;  
   height: 50px;
   float:left;
}









張貼者： 於 沒有留言:
標籤：

2012年4月8日 星期日

CSS Box Model

CSS 中有個重要的概念，就是盒子模式 (Box model)主要是用來設計和佈局時使用.  而盒子模型有兩種詮釋方式分別是W3C标准模型 和 IE6的模型。

先看看下面的圖

 IE模型


 W3C標準模型


  • Margin（外邊距） - 清除邊框區域。 Margin沒有背景顏色，它是完全透明
  • Border（邊框） - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
  • Padding（內邊距） - 清除內容周圍的區域。會受到框中填充的背景顏色影響
  • Content（內容） - 盒子的內容，顯示圖檔和字


從上面兩張圖中可以看到標準模型和IE模型的差別
  • 標準模型：盒子模型的總寬度在設定width的會分別被padding 和 border影響
  • IE模型：盒子模型的總寬度在設定width的不會被padding 和 border影響

例子： 我們需要設定總寬度為300px的div

在標準模式下設定的時候如果注意如果有設定 padding和 border 都會影響總寬度

div {  
    width:250px;  
    padding:15px;  
    border:10px solid gray;  
}

300px = 250px+ 30px (padding 左右15px) + 20px(border 左右10px)

在IE模式下寬度的計算方法如下,不會因為設定padding 和 border而影響width 所設定的寬度
div {  
    width:300px;  
    padding:15px;  
    border:10px solid gray;  
}

300px  =  300px


如果在標準模式下的瀏覽器每次設定寬度的時候都要計算，其實是很麻煩的事情所以在CSS3 提供一個box-sizing 的屬性， 可以讓我們設定成使用IE模型的計算方式。

*{
 box-sizing: border-box; 
 -moz-box-sizing: border-box;  /*Mozila Fox*/
 -webkit-box-sizing: border-box; /*Chrome */
}

有時候為了兼容較舊版本的瀏覽器的時候，且該屬性還沒制訂為標準但各家的瀏覽器已經加入支持就會需要到前綴詞來提前支援新屬性如上面的範例 -moz是火狐webkit 是Safati,Chrome
張貼者： 於 沒有留言:
標籤：

2012年4月5日 星期四

CSS margin 和 padding

在CSS當中 margin和 padding 都是常用來調整邊界的屬性。但也很容易搞混，接下來會透過圖解釋這兩個屬性。
  • margin : 調整邊界 (往外推)
  • padding : 調整內距 (往內推)
例子：我們有一個div，div裡面有一個p段落,

HTML
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
   <p>內容</p>
</div>
</body>
</html>

CSS
.container{
 border: 2px solid red;
 width: 300px;
 height: 100px;
}

1) 從瀏覽器看到的結果。


2) 內容太接近邊界，我們希望將內容往右推20px但紅色框不要移動, 這時候我們就要用padding, 

CSS      
.container{
 border: 2px solid red;
 width: 300px;
 height: 100px;
 padding-left: 20px;
}
















3)  如果我們要移動紅色框，可以使用margin. 舉例我們要將整個紅色框往下調20px;

CSS    
.container{
 border: 2px solid red;
 width: 300px;
 height: 100px;
 padding-left: 20px;
 margin-top : 20px;
}






張貼者： 於 沒有留言:
標籤：

2012年4月4日 星期三

CSS display 屬性 display:block 與 display:inline


display 是設計 CSS 版面配置中最重要的屬性，每個 HTML 元素都有一個預設的 display 值，不同的元素屬性會有不同的預設值。大部分元素的 display 屬性，預設值通常是 block 或 inline 其中一個

display:block 與 display:inline 的差異
  • display:block - 元素的顯示型態被設定為區塊元素
  • display:inline - 元素的顯示型態被設定為內行元素。


範例：將  <h1> 透過 css 設定display：block屬性 (h1 標籤預設display 屬性也是 block)

HTML 
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="css/style.css">
</head>
<body>
 <h1>標題一</h1>
 <h1>標題二</h1>
</body>
</html>

CSS 
h1{
 display: block;
}

顯示結果

範例二：將display:block 改成 dispaly:inline
CSS 
h1{
 display: inline;
}


顯示結果

張貼者： 於 沒有留言:
標籤：
訂閱： 文章 (Atom)