c#開發之一---前端技術html/css

蘇州IT之家群：46213669，技術交流，招聘就業，職業發展，歡迎蘇州IT人士加入。

第一部分：html

• 表單標簽：

1、  form

<form action=www.loready.cn/mothd.aspxmethod=POST>  //把表單中的內容提交到服務器中www.loready.cn/mothd.aspx文件。

</form>

2、Input

Text:文本輸入框，可以定義文本框長短，字符輸入最大數等。  

姓名：<inputtype="text"name="name"/></br>

Password:密碼輸入框，輸進去的都變成星號。

密碼：<inputtype="password"name="password"/>

Radio:單選框

性別：<inputtype="radio"name="sex"value="male"/>male

                  <inputtype="radio"name="sex"value="female "/>female

Checkbox:多選框

愛好：<inputtype="checkbox"name="hobby"value="tour"/>旅游

                  <inputtype="checkbox"name="hobby"value="book"/>看書

                  <inputtype="checkbox"name="hobby"value="sports"/>運動

Range:范圍選擇

<inputtype="range"value="high" min="1" max="10"/>

Image：圖像，將圖像作為提交按鈕，必須有alt屬性。 

                <input type="p_w_picpath" src="img_submit.gif" alt="Submit" />

Button：按鈕，僅僅只是一個按鈕而以，要使按鈕有作用，需要為按鈕定義事件觸發。

<inputtype="button"value="button1"/>

Submit：把表單數據通過get或post提交到服務器。

                  <inputtype="submit"value="提交"/>

Reset：重新填寫表單中的內容。

<inputtype="reset"value="重置"/>

Hidden:隱藏表單

<inputtype=hidden name=add value=hoge@hoge.jp>

3、textarea：文本區域，即多行多列文本框。

<textarea  name="show"rows="5"cols="60"></textarea>

4、select：下拉列表

            城市：

            <selectname="city"size="3">

                <optionselected="selected"value="suzhou">蘇州</option>  //默認選擇誰，可以多選

                <optionvalue="najin">南京</option>

                <optionvalue="wuxi">無錫</option>

                <optionvalue="changzhou">常州</option>

            </select>       

文字列表：

ulli:無序列表

<ul>

<li>coffe</li>

<li>tea</li>

<ul>

顯示結果

    。coffe    //前面帶標號，標號類型可以改，有方型，圓型等。

。tea

ul  ol有序列表

<ul>

<ol>coffe</ol>

<ol>tea</ol>

<ul>

顯示結果

1.coffe    //前面帶序號，序號可以改，不僅僅是數字，可以改成字母等。

2.tea

自定義列表

<dl>

<dt>coffe</dt>                         //定義列表內容

<dd>一種來自國外的黑色的飲料</dd>    //描述列表內容

<dt>tea</dt>

<dd>中國的傳統飲品</dd>

</dl>

顯示結果：

Coffe

一種來自國外的黑色的飲料

Tea

中國的傳統飲品

第二部分：CSS

一、CSS選擇器

1、元素選擇器

如：

html {color:black;}

p {color:gray;}

h3 {color:silver;}

2、選擇器分組

body, h3, p, table, th, td, pre, strong, em{color:gray;}

所有的元素顏色都是灰色

3、類選擇器

（1）基本格式

.important {color:red;} //擁用important類的所有標簽字體都變成紅色。

<h2>Thisheading is very important.</h2>

<p>Thisparagraph is very important.</p>

（2）結合元素選擇器

p.important {color:red;} //所有擁有important類的段落字體變成紅色。

<p>Thisparagraph is very important.</p>  //會變紅色

<h2>Thisheading is very important.</h2>  //不會變，因為標簽不是p.

（3）派生類選擇器

.fancy td {

         color:#f60;

         background:#666;

         }

擁有fancy 類的標簽下面的表格顏色背景改變。

（4）多類選擇器

.important {font-weight:bold;}  //擁有important類的標簽字體變粗。

.warning {font-style:italic;}   //擁有warning類的標簽變斜體

.important.warning {background:silver;}//同時擁有important和warning類的標簽字體變粗，變斜體的同時，還加上底紋。

<p>This paragraph is a very important warning.</p>  // 兩個類之間用空格分開

4、ID選擇器

#intro {font-weight:bold;}  //ID選擇器是唯一的,文檔中能且只能使用一次。id屬性只能在每個 HTML 文檔中出現一次

二、CSS定位

1、static(靜止定位)

不脫離文本流。無特殊定位，它是html元素默認的定位方式，即我們不設定元素的position屬性時默認的position值就是static，它遵循正常的文檔流對象，對象占用文檔空間，該定位方式下，top、right、bottom、left、z-index等屬性是無效的。

2、relative(相對定位）

不脫離文本流。相對定位相對的是它原本在文檔流中的位置而進行的偏移。隨父級標簽縮放，相對位置不變。可經由過程z-index進行層次分級.

3、absolute（絕對定位）

脫離文本流。相對于父級進行定位。但父級只能是以relative或absolute定位的父層，不能是以static定位的。如果父層是static 定位的，就向父層的父層進行查找，直到找到有以relative或absolute定位的層，如果找不到就以body原點為定位點。可以通過z-index進行層次分級

4、fixed

fixed是特殊的absolute，即fixed總是以body為定位對象的，按照瀏覽器的窗口進行定位。

5、float

Html頁面中分為塊元素和行內元素。塊元素是要占據整行，如h2~h7、p、div、ul、table。行內元素不占用整行，如span、a、input、select。

應用float屬性后的元素會脫離文本流。當float元素脫離文本流后，后邊如是塊元素，會占用float元素的文本流位置。如果float元素與塊元素發生重疊，那么float元素會覆蓋塊元素。而行內元素不會，只會緊挨在float元素前邊或后邊。

Float的屬性：

Left:元素向左浮動，直到碰到父元素的邊框，默認是body邊框，或其他float元素。

Right:元素向右浮動，直到碰到父元素的邊框，默認是body邊框，或其他float元素。

Inherit：從父元系繼承float屬性。大多數瀏覽器不支持此值。

None:默認值。不浮動。

Clear屬性：

Left: 在左側不允許浮動元素，即清空浮動元素的左側的浮動元素，但文本流內的塊元素和行內元素是可以出現的。只是如果是塊元素有可能發生重疊。

Right: 在右側不允許浮動元素，清空浮動元素的右側的浮動元素。

Both: 在兩側不允許浮動元素，清空浮動元素的兩側浮動元素。

None:默認值，允許浮動元素出現在兩側。

三、框模型概述

從外到內分別為：

Margin:外邊距

Border：邊框

Padding：內邊距

Element：元素

即元素到父元素或上一元素間會有內邊距，邊框，外邊距三層內容可以設置。

設置順序為：上，右，下，左。如只設兩個值，則上下，和左右一樣，只設一個值，則上下左右一樣。

.input{

Margin:10px 5px 3px 3px;   //內邊距分別為上10像素，右5像素，下3像素，左3像素。

}

.input{

Margin:10px 5px;   //內邊距分別為上下為10像素，左右5像素

}

.input{

Margin: 5px;   //內邊距分別為上下左右5像素

}

 蘇州IT之家群：46213669，技術交流，招聘就業，職業發展，歡迎蘇州IT人士加入。