css3選擇器與圓角,怎樣用css把文本框變成圓角?
border-radius屬性可以實現元素的圓角。
如下css可以實現文本框(單行、多行)的圓角: input[type=text],textarea{border-radius:3px;border:1px solid #000;} border-radius用法如下: border-radius 屬性是一個簡寫屬性,用于設置四個 border-*-radius 屬性。該屬性允許為元素添加圓角邊框 語法: border-radius: 1-4 length|% / 1-4 length|%; 按此順序設置每個 radius 的四個值。如果省略 bottom-left,則與 top-right 相同。如果省略 bottom-right,則與 top-left 相同。如果省略 top-right,則與 top-left 相同。單位一般用px和百分比較多,其他單位也可html如何設置單行文本框圓角為正方形?
p{border-top-left-radius: 4px;//左上border-top-right-radius: 4px;//右上border-bottom-left-radius: 4px;//左下border-bottom-right-radius: 4px;//右下}下面為簡寫:
p{border-radius: 4px 0px 0px 0px ;//分別對應的左上 右上 右下 左下(順時針記就對了)}
CSS技術實現網頁滑動門效果?
所謂滑動門技術,就是標簽像一個滑動門一樣,可以根據內容的大小自由滑動。下面通過一個圖片來說明其原理:
這種技術幾年前用的比較多,那時候設計風格還不是現在這種扁平化。
當然現在扁平化也可以使用這種技術,只是用的人越來越少了。
像圓角之類的css3就可以實現, 除非那種特殊的的形狀。
原理就是這樣,你自己動手做一遍吧,有問題歡迎交流,也可以自行百度。
html的操作要領?
1、html文本框怎么用css變圓角
border-radius屬性可以實現元素的圓角。如下css可以實現文本框(單行、多行)的圓角:
input[type=text],textarea{border-radius:3px;border:1px solid #000;}
border-radius用法如下:
border-radius 屬性是一個簡寫屬性,用于設置四個 border-*-radius 屬性。
該屬性允許為元素添加圓角邊框
語法:
border-radius: 1-4 length|% / 1-4 length|%;
按此順序設置每個 radius 的四個值。
如果省略 bottom-left,則與 top-right 相同。
如果省略 bottom-right,則與 top-left 相同。
如果省略 top-right,則與 top-left 相同。
單位一般用px和百分比較多,其他單位也可
2、HTML中如何設置文本框的大小
邊框的大小,可以使用CSS樣式控制,如:
<textarea id="txtCon" >content</textarea>
<style type="text/css">
#txtCon{width:100px; height:20px;}
</style>
1
2
3
4
1
2
3
4
也可以使用文本框自己的屬性,定義文本框的行和列控制大小,如:
<textarea id="txtCon" rows="100" cols="100" >content</textarea>
1
1
3、在html中如何實現將本網頁中文本框中的值傳遞到另一個網頁的用戶名密碼框中,并實現登陸
在html網頁中,一個按鈕,兩個文本框,在
頁面必須是跳轉過去的才行。例如另一個頁面是page.html那么你跳轉的時候 page.html?username=tony&password=123 跳轉到這個地址,
然后到另一個頁面的時候在腳本里面寫
<SCRIPT language=JavaScript>
var url = window.location.href;
1
2
1
2
然后var username = url.split("?")[1].split("&")[0].split("=")[1] //這樣就獲取到用戶名了。
var password = url.split("&")[1].split("=")[1];
1
1
然后把值賦給你的密碼文本框
document.getElementById("txtpassword").value = password;
document.getElementById("txtusername").value=username;
< /SCRIPT>
1
2
3
1
2
3
然后驗證用戶名和密碼就可以了。
4、HTML中讓表單input等文本框為只讀不可編輯的方法
有時候,我們希望表單中的文本框是只讀的,讓用戶不能修改其中的信息,如使<input type="text" name="input1" value="中國"> 的內容,"中國"兩個字不可以修改。實現的方式歸納一下,有如下幾種。
方法1: οnfοcus=this.blur() 當鼠標放不上就離開焦點
<input type="text" name="input1" value="中國" onfocus=this.blur()>
1
1
方法2:readonly
<input type="text" name="input1" value="中國" readonly>
<input type="text" name="input1" value="中國" readonly="true">
1
2
1
2
方法3: disabled
<input type="text" name="input1" value="中國" disabled="true">
1
1
完整的例子:
<input name="ly_qq" type="text" tabindex="2" onMouseOver="this.className='input_1'" onMouseOut="this.className='input_2'" value="123456789" disabled="true" readOnly="true" />
1
1
disabled=“true” 此果文字會變成灰色,不可編輯。
readOnly=“true” 文字不會變色,也是不可編輯的
css屏蔽輸入:
<input style="ime-mode: disabled">
1
1
有兩種方法第一:disabled="disabled"這樣定義之后被禁用的 input 元素既不可用,也不可點擊。第二:readonly=“readonly” 只讀字段是不能修改的。不過,用戶仍然可以使用 tab 鍵切換到該字段,還可以選中或拷貝其文本;