1. 程式人生 > >HTML+CSS·經常使用的設計方法

HTML+CSS·經常使用的設計方法

鏈接樣式 wrapper 居中 marquee body right 塊元素 選擇 重置

                HTML+CSS·經常使用的設計方法:

======================================================
= margin【外】 =

= padding【內】 =
= = * { margin:0px; padding:0px; }
= = .wrapper{ margin:0 auto; }
= margin: 0 auto; (設置網頁左右居中)
= margin: 60px auto; (設置網頁【上下60px】左右居中) =
= =類別選擇器:class------.p{10:52 2016-5-16 }
= c :【&copy】 =ID選擇器:id----------#p{ }
= “”:【&quat】 =
= 空格:【&nbsp】 =
======================================================


首行縮進2個字符:【text-indent:2em;】

網頁居中:【margin:0_auto】
左右合並:【colspan】
上下合並:【rowspan】
默認選中:【checked】

(塊元素:<p><h><table>-----獨處一行)
浮動:float:left;}

==============================================================================================================
【未訪問過的鏈接樣式】==a:link { text-decoration:underline; color:#900b09;}【下劃線/紫色】
【被訪問過的鏈接樣式】==a:visited { text-decoration:none; color:#900b09;} 【無下劃線/紫色】
【鼠標懸浮時的鏈接樣式】==a:hover { text-decoration:underline;color:#ff0000;} 【下劃線/紅色】
【鼠標點擊時的鏈接樣式】==a:active { text-decoration:underline;color:#ff0000;} 【下劃線/紅色】
==============================================================================================================
{
文件框: <input type="text" size=10/>
密碼框: <input tyle="password" size=10/>
多行文本框: <textarea> </textarea>
單選按鈕: <input type="radio"/>
復選框: <input type="checkbox"/>
下拉選擇框: <select><option> </option></select>
普通按鈕: <input type="button">
提交按鈕: <input type="submit">
重置按鈕: <input type="reset">

}

001--------------------------------------------【滾動標簽】

<marquee(滾動標簽) direction="right" behavior(滾動方式)="scroll" scrollamount(滾動速度)="10"scrolldelay="10">
</marquee>


001--------------------------------------------HTML 水平線

<hr /> 標簽在 HTML 頁面中創建水平線。

hr 元素可用於分隔內容。:-----------------

<body>
<p>hr 標簽定義水平線:</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>

==========================================================

002--------------------------居中排列。

<body>

<h1 align="center">This is heading 1</h1>

<p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。</p>

</body>

==========================================================
003-------------------------把圖像作為鏈接

<body>
<p>
您也可以把圖像作為鏈接來使用:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>

==========================================================

HTML+CSS·經常使用的設計方法