程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> C# >> C#入門知識 >> c#開發之一---前端技術html/css

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

編輯:C#入門知識

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


第一部分: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="image" 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 [email protected]>   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;} h2 {color:silver;}   2、選擇器分組   body, h2, p, table, th, td, pre, strong, em{color:gray;} 所有的元素顏色都是灰色     3、類選擇器 (1)基本格式 .important {color:red;} //擁用important類的所有標簽字體都變成紅色。   <h1>Thisheading is very important.</h1>   <p>Thisparagraph is very important.</p>       (2)結合元素選擇器 p.important {color:red;} //所有擁有important類的段落字體變成紅色。   <p>Thisparagraph is very important.</p>  //會變紅色   <h1>Thisheading is very important.</h1>  //不會變,因為標簽不是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頁面中分為塊元素和行內元素。塊元素是要占據整行,如h1~h6、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像素 }

  1. 上一頁:
  2. 下一頁: