semantic实现自适应响应式 公司官网首页主页效果代码
代码语言:html
所属分类:响应式
代码描述:semantic实现自适应响应式 公司官网首页主页效果代码
代码标签: semantic 自适应 响应式 公司 官网 主页 首页
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <!-- Site Properties --> <title>Homepage - Semantic</title> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/reset.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/site.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/container.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/grid.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/header.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/image.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/menu.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/divider.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/dropdown.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/segment.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/button.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/list.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/icon.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/sidebar.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/transition.css"> <style type="text/css"> .hidden.menu { display: none; } .masthead.segment { min-height: 700px; padding: 1em 0em; } .masthead .logo.item img { margin-right: 1em; } .masthead .ui.menu .ui.button { margin-left: 0.5em; } .masthead h1.ui.header { margin-top: 3em; margin-bottom: 0em; font-size: 4em; font-weight: normal; } .masthead h2 { font-size: 1.7em; font-weight: normal; } .ui.vertical.stripe { padding: 8em 0em; } .ui.vertical.stripe h3 { font-size: 2em; } .ui.vertical.stripe .button + h3, .ui.vertical.stripe p + h3 { margin-top: 3em; } .ui.vertical.stripe .floated.image { clear: both; } .ui.vertical.stripe p { font-size: 1.33em; } .ui.vertical.stripe .horizontal.divider { margin: 3em 0em; } .quote.stripe.segment { padding: 0em; } .quote.stripe.segment .grid .column { padding-top: 5em; padding-bottom: 5em; } .footer.segment { padding: 5em 0em; } .secondary.pointing.menu .toc.item { display: none; } @media only screen and (max-width: 700px) { .ui.fixed.menu { display: none !important; } .secondary.pointing.menu .item, .secondary.pointing.menu .menu { display: none; } .secondary.pointing.menu .toc.item { display: block; } .masthead.segment { min-height: 350px; } .masthead h1.ui.header { font-size: 2em; margin-top: 1.5em; } .masthead h2 { margin-top: 0.5em; font-size: 1.5em; } } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script src="//repo.bfw.wiki/bfwrepo/css/semantic/components/visibility.js"></script> <script src="//repo.bfw.wiki/bfwrepo/css/semantic/components/sidebar.js"></script> <script src="//repo.bfw.wiki/bfwrepo/css/semantic/components/transition.js"></script> <script> $(document) .ready(function() { // fix menu when passed $('.masthead') .visibility({ once: false, onBottomPassed: function() { $('.fixed.menu').transition('fade in'); }, onBottomPassedReverse: function() { $('.fixed.menu').transition('fade out'); } }) ; // create sidebar and attach to menu open $('.ui.sidebar') .sidebar('attach events', '.toc.item') ; }) ; </script> </head> <body> <!-- Following Menu --> <div class="ui large top fixed hidden menu"> <div class="ui container"> <a class="active item">Home</a> <a class="item">Work</a> <a class="item">Company</a> <a class="item">Careers</a> <div class="right menu"> <div class="item"> <a class="ui button">Log in</a> </div> <div class="item"> <a class="ui primary button">Sign Up</a> </div> </div> </div> </div> <!-- Sidebar Menu --> <div class="ui vertical inverted sidebar menu"> <a class="active item">Home</a> <a class="item">Work</a> <a class="item">Company</a> <a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0