|
[tr][td]HTML5加上CSS3做出的按钮会有怎样的效果，试试才知道
请看如下代码： [代码] [HTML]代码 view source print? [table] [tr] [td]1[/td] [td] [/td][/tr][/table] [table] [tr] [td]2[/td] [td] [/td][/tr][/table] [table] [tr] [td]3[/td] [td] Home [/td][/tr][/table] [table] [tr] [td]4[/td] [td] Categories [/td][/tr][/table] [table] [tr] [td]5[/td] [td] About [/td][/tr][/table] [table] [tr] [td]6[/td] [td] Portfolio [/td][/tr][/table] [table] [tr] [td]7[/td] [td] Contact [/td][/tr][/table] [table] [tr] [td]8[/td] [td] [/td][/tr][/table] [table] [tr] [td]9[/td] [td][/td][/tr][/table] [代码] [CSS]代码 view source print? [table] [tr] [td]01[/td] [td]nav { [/td][/tr][/table] [table] [tr] [td]02[/td] [td] display: block; [/td][/tr][/table] [table] [tr] [td]03[/td] [td] width: 100%; [/td][/tr][/table] [table] [tr] [td]04[/td] [td] overflow: hidden; [/td][/tr][/table] [table] [tr] [td]05[/td] [td]} [/td][/tr][/table] [table] [tr] [td]06[/td] [td] [/td][/tr][/table] [table] [tr] [td]07[/td] [td]nav ul { [/td][/tr][/table] [table] [tr] [td]08[/td] [td] margin: 80px 0 20px 0; [/td][/tr][/table] [table] [tr] [td]09[/td] [td] padding: .7em; [/td][/tr][/table] [table] [tr] [td]10[/td] [td] float: left; [/td][/tr][/table] [table] [tr] [td]11[/td] [td] list-style: none; [/td][/tr][/table] [table] [tr] [td]12[/td] [td] background: #444; [/td][/tr][/table] [table] [tr] [td]13[/td] [td] background: rgba(0,0,0,.2); [/td][/tr][/table] [table] [tr] [td]14[/td] [td] -moz-border-radius: .5em; [/td][/tr][/table] [table] [tr] [td]15[/td] [td] -webkit-border-radius: .5em; [/td][/tr][/table] [table] [tr] [td]16[/td] [td] border-radius: .5em; [/td][/tr][/table] [table] [tr] [td]17[/td] [td] -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; [/td][/tr][/table] [table] [tr] [td]18[/td] [td] -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; [/td][/tr][/table] [table] [tr] [td]19[/td] [td] box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; [/td][/tr][/table] [table] [tr] [td]20[/td] [td]} [/td][/tr][/table] [table] [tr] [td]21[/td] [td] [/td][/tr][/table] [table] [tr] [td]22[/td] [td]nav li { [/td][/tr][/table] [table] [tr] [td]23[/td] [td] float:left; [/td][/tr][/table] [table] [tr] [td]24[/td] [td]} [/td][/tr][/table] [table] [tr] [td]25[/td] [td] [/td][/tr][/table] [table] [tr] [td]26[/td] [td]nav a { [/td][/tr][/table] [table] [tr] [td]27[/td] [td] float:left; [/td][/tr][/table] [table] [tr] [td]28[/td] [td] padding: .8em 1.5em; [/td][/tr][/table] [table] [tr] [td]29[/td] [td] text-decoration: none; [/td][/tr][/table] [table] [tr] [td]30[/td] [td] color: #555; [/td][/tr][/table] [table] [tr] [td]31[/td] [td] text-shadow: 0 1px 0 rgba(255,255,255,.5); [/td][/tr][/table] [table] [tr] [td]32[/td] [td] font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica; [/td][/tr][/table] [table] [tr] [td]33[/td] [td] letter-spacing: 1px; [/td][/tr][/table] [table] [tr] [td]34[/td] [td] text-transform: uppercase; [/td][/tr][/table] [table] [tr] [td]35[/td] [td] border-width: 1px; [/td][/tr][/table] [table] [tr] [td]36[/td] [td] border-style: solid; [/td][/tr][/table] [table] [tr] [td]37[/td] [td] border-color: #fff #ccc #999 #eee; [/td][/tr][/table] [table] [tr] [td]38[/td] [td] background: #c1c1c1; [/td][/tr][/table] [table] [tr] [td]39[/td] [td] background: -moz-linear-gradient(#f5f5f5, #c1c1c1); [/td][/tr][/table] [table] [tr] [td]40[/td] [td] background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#c1c1c1)); [/td][/tr][/table] [table] [tr] [td]41[/td] [td] background: -webkit-linear-gradient(#f5f5f5, #c1c1c1); [/td][/tr][/table] [table] [tr] [td]42[/td] [td] background: -o-linear-gradient(#f5f5f5, #c1c1c1); [/td][/tr][/table] [table] [tr] [td]43[/td] [td] background: -ms-linear-gradient(#f5f5f5, #c1c1c1); [/td][/tr][/table] [table] [tr] [td]44[/td] [td] background: linear-gradient(#f5f5f5, #c1c1c1); [/td][/tr][/table] [table] [tr] [td]45[/td] [td] } [/td][/tr][/table] [table] [tr] [td]46[/td] [td] [/td][/tr][/table] [table] [tr] [td]47[/td] [td]nav a:hover, nav a:focus { [/td][/tr][/table] [table] [tr] [td]48[/td] [td] outline: 0; [/td][/tr][/table] [table] [tr] [td]49[/td] [td] color: #fff; [/td][/tr][/table] [table] [tr] [td]50[/td] [td] text-shadow: 0 1px 0 rgba(0,0,0,.2); [/td][/tr][/table] [table] [tr] [td]51[/td] [td] background: #fac754; [/td][/tr][/table] [table] [tr] [td]52[/td] [td] background: -moz-linear-gradient(#fac754, #f8ac00); [/td][/tr][/table] [table] [tr] [td]53[/td] [td] background: -webkit-gradient(linear, left top, left bottom, from(#fac754), to(#f8ac00)); [/td][/tr][/table] [table] [tr] [td]54[/td] [td] background: -webkit-linear-gradient(#fac754, #f8ac00); [/td][/tr][/table] [table] [tr] [td]55[/td] [td] background: -o-linear-gradient(#fac754, #f8ac00); [/td][/tr][/table] [table] [tr] [td]56[/td] [td] background: -ms-linear-gradient(#fac754, #f8ac00); [/td][/tr][/table] [table] [tr] [td]57[/td] [td] background: linear-gradient(#fac754, #f8ac00); [/td][/tr][/table] [table] [tr] [td]58[/td] [td]} [/td][/tr][/table] [table] [tr] [td]59[/td] [td] [/td][/tr][/table] [table] [tr] [td]60[/td] [td]nav a:active { [/td][/tr][/table] [table] [tr] [td]61[/td] [td] -moz-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; [/td][/tr][/table] [table] [tr] [td]62[/td] [td] -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; [/td][/tr][/table] [table] [tr] [td]63[/td] [td] box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset; [/td][/tr][/table] [table] [tr] [td]64[/td] [td]} [/td][/tr][/table] [table] [tr] [td]65[/td] [td] [/td][/tr][/table] [table] [tr] [td]66[/td] [td]nav li:first-child a { [/td][/tr][/table] [table] [tr] [td]67[/td] [td] border-left: 0; [/td][/tr][/table] [table] [tr] [td]68[/td] [td] -moz-border-radius: 4px 0 0 4px; [/td][/tr][/table] [table] [tr] [td]69[/td] [td] -webkit-border-radius: 4px 0 0 4px; [/td][/tr][/table] [table] [tr] [td]70[/td] [td] border-radius: 4px 0 0 4px; [/td][/tr][/table] [table] [tr] [td]71[/td] [td]} [/td][/tr][/table] [table] [tr] [td]72[/td] [td] [/td][/tr][/table] [table] [tr] [td]73[/td] [td]nav li:last-child a { [/td][/tr][/table]
[图片] 输出效果 图片：182944tqug4gzy4yqw44rf.jpg  希望这些代码能够对大家的开发有一定的帮助和提示，也同时希望各位能够与HTML5中国网站共同探讨学习，使大家的技术更加纯熟。 本文由HTML5中国网站小编整理发布，转载请注明出处。 [/td][/tr] |
|||||||||||
