???跺????浠??ㄥ?? Java Web 灏?椤圭??寮??????跺??锛????藉?ㄨ?捐?″??绔????跺?????娌℃??濂界??甯?灞????插僵????锛?璺??ュ?版???璇存?灏辨?????????㈡??杈? 楂?澶т?锛?
?ｄ?骞蟲?舵??浠?灏辮?娉ㄦ??绉?绱???宸辯??绱???浜?锛?涓??㈣?涓?HTML缃?椤佃??ユ?浠ュ?????????插僵??????瑙??哄ソ锛???浠ユ?惰??????浠?涓?璧風??涓?锛?
杩?琛?缁??? 锛?
婧?浠ｇ?? 锛?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3 input杈??ユ??????規??</title>
<style type="text/css">
input{
transition:all 0.30s ease-in-out; <!-- -->
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border:#35a5e5 1px solid;
border-radius:3px;
outline:none;
}
input:focus{
box-shadow:0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
a{
text-decoration:none;
background:rgba(81, 203, 238, 1);
color:white;padding: 6px 25px 6px 25px;
font:12px '寰?杞???榛?';
border-radius:3px;
-webkit-transition:all linear 0.30s;
-moz-transition:all linear 0.30s;
transition:all linear 0.30s;
}
a:hover{background:rgba(39, 154, 187, 1);}
</style>
</head>
<body>
<div style="width:520px;height:34px;margin:40px auto 0 auto;">
<input type="text" placeholder="?ㄦ?峰??????浠跺?闆??" style="height:25px"/>
<input type="password" placeholder="璇瘋??ュ????" style="height:25px"/>
<a href="#">?婚??</a>
</div>
<div style="text-align:center;margin:350px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>???ㄦ?瑙????IE8??360??FireFox??Chrome??Safari??Opera???叉父????????涓???涔?绐?. </p>
</div>
</body>
</html> - shadow锛?浣??ㄤ?color??x??y????blur锛?妯＄?锛?灞??э?濡?锛?text-shadow
- moz-transition:height 2s; ? ?/* ?煎?矽?????? Firefox 4 */
- -webkit-transition:height 2s; ? ? /* ?煎??Safari and Chrome */
- -o-transition:width 2s; ? ? /* ?煎??Opera */
- 涓句?锛?
- 姣?濡?浣?????transition:width 2s;
- ?煎?矽??????????锛?-moz-transition:width 2s;
- ?煎??afari??Chrome 锛?-webkit-transition:width 2s;
- ?煎??Opera 锛?-o-transition:width 2s;
- transition-timing-function ???ㄦ?
- ??璁鎬??規???堕?寸???ㄨ??繪?瑰??灞??у?肩?????㈤????锛?6涓????藉?鹼?
- ease锛?锛???娓??????榛?璁ゅ?鹼?ease?芥?扮????浜?璐?濉?灏??茬嚎(0.25, 0.1, 0.25, 1.0)锛?
- linear锛?锛?????锛?锛?linear ?芥?扮????浜?璐?濉?灏??茬嚎(0.0, 0.0, 1.0, 1.0)锛?
- ease-in锛?(????)锛?ease-in ?芥?扮????浜?璐?濉?灏??茬嚎(0.42, 0, 1.0, 1.0)锛?
- ease-out锛?锛?????锛?锛?ease-out ?芥?扮????浜?璐?濉?灏??茬嚎(0, 0, 0.58, 1.0)锛?
- ease-in-out锛?锛??????跺??????锛?锛?ease-in-out ?芥?扮????浜?璐?濉?灏??茬嚎(0.42, 0, 0.58, 1.0)锛?
- cubic-bezier锛?锛?璇ュ?煎??璁鎬??昏??瀹?涔?涓?涓??堕?存?茬嚎锛?浜?瑙ｃ??
- border-radius锛???瑙?灞??э?
- 灞??у?艱???達?1 - 4
- 涓句? 锛??border-radius : 25px 10px 50px 0; // 025px锛?宸??瑙?锛???10px锛??充?瑙?锛???50px锛??充?瑙?锛???0宸??瑙?(椤烘?堕??椤哄?)
- outline锛?杞?寤?锛?
- 缁??朵???绱??ㄥ?寸??涓??＄嚎锛?浣?浜?杈規?杈圭???澶??達???璧峰?扮???哄??绱???浣??ㄣ??杞?寤?绾誇?????绌洪?達?涔?涓?涓?瀹????╁艦??
- ??浠ユ??浠ヤ?椤哄?璁劇疆濡?涓?灞???/li>
- outline-color
- outline-style
- outline-width
- text-decoration
- ????涓繪?娴?瑙??ㄩ?芥???? text-decoration 灞??с??
- text-decoration 灞??ц?瀹?娣誨???版??????淇?楗般??
- 淇?楗扮??棰??茬??"color" 灞??ц?劇疆??
- rgba
- RGBA??浠ｈ〃Red锛?绾㈣?詫? Green锛?缁胯?詫? Blue锛????詫??? Alpha???插僵绌洪??/li>
- R锛?绾㈣?插?箋??姝ｆ?存??| ?懼????/li>
- G锛?缁胯?插?箋??姝ｆ?存??| ?懼????/li>
- B锛????插?箋??姝ｆ?存?? ?懼????/li>
- A锛?????搴???????~1涔???/li>
- :hover ???╁??/li>
- ?ㄤ????╅???????娴??ㄥ?ㄤ??㈢????绱???
- :hover ???╁?ㄥ???ㄤ???????绱?锛?涓??????炬?ャ??
- :link ???╁?ㄨ?劇疆??????琚?璁塊??椤甸?㈢???炬?ョ???峰???
- :visited ???╁?ㄧ?ㄤ?璁劇疆????宸茶?璁塊????椤甸?㈢???炬?ワ?
- :active ???╁?ㄧ?ㄤ?娲誨?ㄩ?炬?ャ??
- ??CSS 瀹?涔?涓?锛?:hover 蹇?椤諱?浜? :link ?? :visited 涔???锛?濡???瀛??ㄧ??璇?锛?锛?杩??鋒?峰????界??????
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)