css实现自适应下拉菜单效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style type="text/css" media="all"> .index-nav { width: 100%; border-bottom: 1px solid #eeeeee; height: 50px; box-sizing: border-box; background: white; } .index-nav-frame { width: 1200px; margin: 0 auto; } .index-nav-frame-line { color: #333333; background: white; float: left; position: relative; display: block; outline: none; cursor: pointer; width: 100px; line-height: 50px; text-align: center; font-weight: 700; } .index-nav-frame-line.active { color: #b63b4d; } .index-nav-frame-line-center { opacity: 0; height: 0; position: absolute; overflow: hidden; width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */-o-transition: all 0.5s; /* Opera */ } .index-nav-frame-line-li { width: 100%; font-weight: 500; text-align.........完整代码请登录后点击上方下载按钮下载查看
网友评论0