导航特效代码HTML5+CSS3模拟apple官网导航 - bbin糖果派对手机app

资讯中心 / News

当前位置: bbin糖果派对手机app > 在线购买 > 导航特效代码HTML5+CSS3模拟apple官网导航

导航特效代码HTML5+CSS3模拟apple官网导航

浏览次数: 日期:2019-04-12

 

用HTML5+CSS3制作的网页导航特效,此代码是模仿的apple苹果官方网站的导航,比较粗糙一些,喜欢的网页教学网的网友可以自己美化代码达到自己想要的效果。 !DOCTYPEhtmlhtmlheadmetacharset=gbk/styletype=text/cssbody{font-family:Arial;font-size:12px;color:#4b4b4b;text-align:center;}*{padding:0px;margin:0px;}ul{list-style:none;}#nav{position:relative;margin-left:auto;margin-right:auto;text-align:left;width:960px;height:38px;margin-top:15px;overflow:hidden;border:0px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;box-shadow:inset001px#fff;-moz-box-shadow:inset001px#fff;-webkit-box-shadow:inset001px#fff;background:#c2c2c2;background:-moz-linear-gradient(centertop,rgba(100,100,100,1),rgba(113,113,113,)49%,rgba(90,90,90,)50%,rgba(116,116,116,1));background:-webkit-gradient(linear,centertop,centerbottom,from(rgba(100,100,100,1)),color-stop(49%,rgba(113,113,113,)),color-stop(50%,rgba(90,90,90,)),to(rgba(116,116,116,1)));background:-o-linear-gradient(top,rgba(100,100,100,1),rgba(113,113,113,)49%,rgba(90,90,90,)50%,rgba(116,116,116,1));}#navli{display:block;color:#ffffff;width:100px;height:36px;text-align:center;border-right:solid1px#5b5b5b;float:left;padding-top:8px;}#navlia{text-shadow:#0001px1px1px;color:#ffffff;font-size:13px;text-decoration:none;font-family:LucidaSansUnicodevertical-align:middle;-webkit-transition:-,,;-moz-transition:-,,;-o-transition:-,,;}#navlia:hover{-webkit-transform:scale(,1);-moz-transform:scale(,1);-o-transform:scale(,1);color:darkred;text-shadow:#1111112px2px2px;}#navinput{display:block;width:120px;float:left;margin-top:8px;background:transparent;height:20px;margin-left:15px;vertical-align:middle;font-family:sans-seriffont-size:14px;text-indent:26px;border:0px;border-bottom:inset1px#353535;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;box-shadow:inset0px2px1px#353535;-moz-box-shadow:inset0px2px1px#353535;-webkit-box-shadow:inset0px2px1px#353535;background:url(http:///files/120703/1_)no-repeatbottomleft;}/styletitleCSS3模拟apple苹果官方网站导航_网页教学网提供/title/headbodydivid=navulliahref=http:///a/liliahref=http:///Store/a/liliahref=http:///Mac/a/liliahref=http:///iPod/a/liliahref=http:///iPhone/a/liliahref=http:///iPad/a/liliahref=http:///iTunes/a/liliahref=http:///Support/a/li/ulinputtype=textid=kwvalue=//div/body/html[Ctrl+A全部选择提示:你可先修改部分代码,再按运行]上面代码中用到的图片:。

在线购买

导航特效代码HTML5+CSS3模拟apple官网导航 - bbin糖果派对手机app