們在上網的時候,經常有一些登錄界面進行輸入賬號和密碼,以及我們在網上填一些信息,這些功能的實現都是通過表單來完成的,今天我們就來講講表單。
表單不是指一個標簽,而是指一類標簽。
我們表單里所有的內容都要寫在<form></form>標簽中 form的action屬性是將表單所填的內容發送到想要發送的后臺,而method屬性有兩個值,分別是get和post。get和post的主要區別是get表單所傳的內容會在地址欄里顯示出來,并且有長度限制,而post表單所傳的內容不會在地址欄顯示出來,并且可以視為沒有長度限制。一般系統默認get。當然get和post的細區別還是有的,在這里我就不贅述了。
其中最重要的是<input>標簽,input標簽也是單標簽。input標簽的type屬性值不同,其產生的作用也不同:如:<input type="text">產生的是文本框,一般都是我們登錄時輸入的賬號那樣的文本框。<input type="password">,產生的是密碼框,一般都是我們登錄時輸入密碼的那個框框。<input type="submit">產生的是提交框,一般是我們登錄的那個按鈕。這些標簽都有value屬性,但只有提交框用最合適用,因為文本框和密碼框雖然也會展示出來,但效果卻差強人意,我們一般都用placeholder屬性替代它。
不知大家有沒有在網上做過選擇題,作者是做過的。網頁中的選擇題也是用的input。
input的type屬性值還有radio,是單選框,有幾個選項就寫幾個input,但要注意每一個input里都要寫相同的name屬性和屬性值,這樣的話瀏覽器才會知道這些是同一道題。
既然有單選題那一定也有多選題了,type的checked屬性是多選框,其和單選的用法一樣,也都要注意name一樣的為一道題,還有一個屬性是checked=“checked”,這個可以設定默認選擇的選項。
我們也一定遇到過選擇文字就能勾選而不用非得去點選框的情況,其實input選擇框只有被點擊的時候才能選中,但有的時候太小不容易點擊甚至有的根本沒有顯示出來,這樣的話用戶體驗就會非常的差,所以我們引進了一個標簽:<label></label>標簽,這個標簽可以實現點擊文字就進行選擇的功能,用法就是將input標簽和文字寫在同一個label標簽中,注意每一個選項寫一起。
我們來看一下代碼和結果:
作者已經盡量去說清楚了,歡迎大家批評指教,希望多多關注[送心]
order 盒子邊框
復合屬性。設置對象邊框的特性。
盒子邊框三要素:
① 邊框粗細
② 邊框樣式
③ 邊框顏色
語法:border: border-width | border-style | border-color ;
邊框四邊的粗細、樣式、顏色,以及上下左右每個位置的樣式屬性都是可以單獨調整的。
邊框的顏色不是必要的,如果不指定顏色,默認顏色為黑色,但必須為盒子指定寬高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
使用 border-style 可為盒子邊框設置樣式,以下示例為實線
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
}
效果:
示例 CSS 代碼
如果需要設置不同方向的樣式屬性,可以寫在一句 CSS 代碼里,比如說下面這段代碼,上下實線,左右虛線。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}
效果:
屬性值解釋none無輪廓。 border-color將被忽略,border-width計算值為0,除非邊框輪廓為圖像,即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓
使用 border-width 可為盒子邊框設置粗細,以下示例邊框為 5px 粗細
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}
效果
示例 CSS 代碼
如果需要設置不同方向的邊框粗細,可以寫在一句 CSS 代碼里。
比如說下面這段代碼,上下2px,右2px,左5px。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}
效果:
可直接輸入
顏色的英文名稱
rgb值
十六進制
使用 border-color 可為盒子邊框設置顏色,以下示例邊框顏色為紅色。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}
效果:
示例 CSS 代碼
上面有兩個示例講述如何設置不同方向的屬性,border-color 也是相同使用方法,此處就不做示例了。
如果你需要同時設置盒子的粗細、樣式、顏色,那么你可以將他們的樣式表寫在同一行代碼里。
例如:
/* CSS代碼 */
div{
border-top: 5px solid red;
}
這段代碼指定了上邊框的三個屬性:粗細、樣式、顏色
border-top 包含了:
其他同理
先來看一個示例
/* CSS代碼 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}
效果:
細心的你,一定發現了 border 的邊框四條邊交接處是斜角。
此刻我們把盒子的寬高設置為 0
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}
效果:
是不是完完全全像四個三角形一樣。
我們只需要把上邊和左右兩邊的三角形隱藏起來,它不就是一個三角形了。
為 border-color 指定 transparent 值,使盒子邊框顏色變透明
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}
效果:
把另外三條邊透明之后,就只剩一個三角形了。
完
部分資料引用自:
人可能會疑惑,我為什么專門用一節內容來說邊框和圓角。其實,不為別的,只為它們在開發中,在Web系統中,在手機頁面中,太常用了。有邊框的頁面,讓人耳目一新,一目了然;有圓角的內容,讓人賞心悅目,心曠神怡。說的有點夸張了,就這么著吧。
邊框(border)一般為長方形形狀,有上下左右四條邊,CSS邊框屬性允許你指定一個元素邊框的樣式和顏色。CSS的圓角(border-radius)方法,可給任何元素制作 "圓角"效果。
在CSS中,你可以通過border和其延伸的,如border-style,來實現邊框的效果。上邊框相關的有border-top-style樣式、border-top-color顏色、border-top-width寬度和組合了它們的border-top。下、左右邊框類似,換成對應的單詞即可。
邊框樣式(border-style)常用的有dotted(點線)、dashed(虛線)、solid(實線)、double(雙邊框)這四種,不常用的有groove(3D溝槽)、ridge(3D脊邊)、inset(3D嵌入)和outset(3D突出)。
/* --------在樣式表文件中---------- */
/*4條邊框一起設置*/
.four-border {
width: 800px;
border: 2px solid darkgreen;;
}
/*四條邊框可個性化*/
.four-style {
width: 800px;
/* 上、右、下、左*/
border-width: 1px 2px 3px 4px;
/*上、右左、下*/
border-style: solid dashed double;
/*上下和右左*/
border-color: darkgreen coral;
}
/*單條邊框設置*/
.one-style {
width: 800px;
border-top: 1px groove orangered;
border-bottom-width: 5px;
border-bottom-style: inset;
border-bottom-color: darkgreen;
}
HTML文件內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>邊框逼格</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<br/><br/>
<div class="four-border">
border統一設置四條邊框<br/>
順序為:border-width、border-style和border-color.
</div>
<br/><br/>
<div class="four-style">
四條邊框一起設置,風格可不同<br/>
順序為:上、右、下、左。<br/>
1. 只有一個值(如:border-width:2px):表示4條邊框全部一樣;<br/>
2. 有兩個值(如:border-width:2px 3px):表示上下和右左;<br/>
3. 有三個值(如:border-width:2px 3px 1px):表示上、右左、下;<br/>
4. 有四個值(如:border-width:2px 3px 1px 5px):表示上、右、下、左。
</div>
<br/><br/>
<div class="one-style">
單獨一天邊框進行設置<br/>
border-top:頂部寬度、樣式、顏色,一起設置<br/>
border-top-width:上邊框寬度;<br/>
border-top-style:上邊框樣式;<br/>
border-top-color:上邊框顏色。
<br/>
</div>
</body>
</html>
輸出結果
使用CSS的border-radius 屬性,你可以給任何元素制作 "圓角"。 border-radius統一指定4個圓角,順序為左上、右上、右下和左下。如果要特定指定某個角的話,用border-top-left-radius等方式即可。
在樣式表ys2.css文中的內容
/*4個角統一指定*/
.four-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-radius: 15px;
vertical-align: middle;
text-align: center;
}
/*單獨指定一個角*/
.one-radius {
width: 800px;
line-height: 40px;
background: #8AC007;
border-top-left-radius: 15px;
border-bottom-right-radius: 50px;
vertical-align: middle;
text-align: center;
}
在HTML文件中的內容
<br/><br/>
<div class="four-radius">
統一設置4個圓角<br/>
一個值: 四個圓角值相同;<br/>
兩個值: 左上角與右下角,右上角與左下角;<br/>
三個值: 左上角, 右上角和左下角,右下角;<br/>
四個值: 左上角,右上角,右下角,左下角。
</div>
<br/>
<div class="one-radius">
單獨指定某個角<br/>
border-top-left-radius:左上角;<br/>
border-top-right-radius:右上角;<br/>
border-bottom-right-radius:右下角;<br/>
border-bottom-left-radius:左下角。
</div>
輸出結果
不要重復造輪子,所以好多程序員一遇到問題,就喜歡搜索,我也是,哈哈哈~。CSS有指定邊框的屬性,也有圓角的屬性,將其放在一起,是不是就可以實現圓角邊框?答案毋庸置疑,答案是肯定的。
在樣式表ys2.css文件中的內容
/*圓角邊框*/
.corners {
border-radius: 50px;
border: 3px solid #8AC007;
padding: 50px;
width: 720px;
line-height: 50px;
vertical-align: middle;
text-align: center;
}
在HTML文件中的內容
<div class="corners">
邊框屬性和圓角屬性,組合成圓角邊框
</div>
輸出結果
好了,有關CSS的圓角邊框內容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉發點贊,讓更多的人看到這篇文章。你的轉發和點贊,就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙,分享多年的編程經驗。想學編程的朋友,可關注:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關注我,沒錯的。
#前端##HTML5##CSS##程序員##Web#
*請認真填寫需求信息,我們會在24小時內與您取得聯系。