semantic实现自适应响应式公司官网首页主页效果代码-html代码-BFW代码库

semantic实现自适应响应式公司官网首页主页效果代码

代码语言：html

所属分类：响应式

代码描述：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.........完整代码请登录后点击上方下载按钮下载查看