vscode练习使用开发纯css的三级水平导航菜单。先上图：

1、html5布局

  1.  <html>
  2.  
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>水平导航菜单</title>
  6.      <link rel="stylesheet" href="reset.css">
  7.      <link rel="stylesheet" href="style.css">
  8.  </head>
  9.  
  10.  <body>
  11.      <header class="header">
  12.          <nav class="menu radius">
  13.              <ul class="nav">
  14.                  <li><a href="#">首页</a></li>
  15.                  <li>
  16.                      <a href="#">菜单项</a>
  17.                      <ul>
  18.                          <li>
  19.                              <a href="#">二级菜单项</a>
  20.                              <ul>
  21.                                  <li><a href="#">三级菜单项</a></li>
  22.                                  <li><a href="#">三级菜单项</a></li>
  23.                                  <li><a href="#">三级菜单项</a></li>
  24.                                  <li><a href="#">三级菜单项</a></li>
  25.                                  <li><a href="#">三级菜单项</a></li>
  26.                              </ul>
  27.                          </li>
  28.                          <li>
  29.                              <a href="#">二级菜单项</a>
  30.                              <ul>
  31.                                  <li><a href="#">三级菜单项</a></li>
  32.                                  <li><a href="#">三级菜单项</a></li>
  33.                                  <li><a href="#">三级菜单项</a></li>
  34.                                  <li><a href="#">三级菜单项</a></li>
  35.                                  <li><a href="#">三级菜单项</a></li>
  36.                              </ul>
  37.                          </li>
  38.                          <li>
  39.                              <a href="#">二级菜单项</a>
  40.                              <ul>
  41.                                  <li><a href="#">三级菜单项</a></li>
  42.                                  <li><a href="#">三级菜单项</a></li>
  43.                                  <li><a href="#">三级菜单项</a></li>
  44.                                  <li><a href="#">三级菜单项</a></li>
  45.                                  <li><a href="#">三级菜单项</a></li>
  46.                              </ul>
  47.                          </li>
  48.                          <li>
  49.                              <a href="#">二级菜单项</a>
  50.                              <ul>
  51.                                  <li><a href="#">三级菜单项</a></li>
  52.                                  <li><a href="#">三级菜单项</a></li>
  53.                                  <li><a href="#">三级菜单项</a></li>
  54.                                  <li><a href="#">三级菜单项</a></li>
  55.                                  <li><a href="#">三级菜单项</a></li>
  56.                              </ul>
  57.                          </li>
  58.                          <li>
  59.                              <a href="#">二级菜单项</a>
  60.                              <ul>
  61.                                  <li><a href="#">三级菜单项</a></li>
  62.                                  <li><a href="#">三级菜单项</a></li>
  63.                                  <li><a href="#">三级菜单项</a></li>
  64.                                  <li><a href="#">三级菜单项</a></li>
  65.                                  <li><a href="#">三级菜单项</a></li>
  66.                              </ul>
  67.                          </li>
  68.                          <li>
  69.                              <a href="#">二级菜单项</a>
  70.                              <ul>
  71.                                  <li><a href="#">三级菜单项</a></li>
  72.                                  <li><a href="#">三级菜单项</a></li>
  73.                                  <li><a href="#">三级菜单项</a></li>
  74.                                  <li><a href="#">三级菜单项</a></li>
  75.                                  <li><a href="#">三级菜单项</a></li>
  76.                              </ul>
  77.                          </li>
  78.                      </ul>
  79.                  </li>
  80.                  <li>
  81.                      <a href="#">菜单项</a>
  82.                      <ul>
  83.                          <li>
  84.                              <a href="#">二级菜单项</a>
  85.                              <ul>
  86.                                  <li><a href="#">三级菜单项</a></li>
  87.                                  <li><a href="#">三级菜单项</a></li>
  88.                                  <li><a href="#">三级菜单项</a></li>
  89.                                  <li><a href="#">三级菜单项</a></li>
  90.                                  <li><a href="#">三级菜单项</a></li>
  91.                              </ul>
  92.                          </li>
  93.                          <li>
  94.                              <a href="#">二级菜单项</a>
  95.                              <ul>
  96.                                  <li><a href="#">三级菜单项</a></li>
  97.                                  <li><a href="#">三级菜单项</a></li>
  98.                                  <li><a href="#">三级菜单项</a></li>
  99.                                  <li><a href="#">三级菜单项</a></li>
  100.                                  <li><a href="#">三级菜单项</a></li>
  101.                              </ul>
  102.                          </li>
  103.                          <li>
  104.                              <a href="#">二级菜单项</a>
  105.                              <ul>
  106.                                  <li><a href="#">三级菜单项</a></li>
  107.                                  <li><a href="#">三级菜单项</a></li>
  108.                                  <li><a href="#">三级菜单项</a></li>
  109.                                  <li><a href="#">三级菜单项</a></li>
  110.                                  <li><a href="#">三级菜单项</a></li>
  111.                              </ul>
  112.                          </li>
  113.                          <li>
  114.                              <a href="#">二级菜单项</a>
  115.                              <ul>
  116.                                  <li><a href="#">三级菜单项</a></li>
  117.                                  <li><a href="#">三级菜单项</a></li>
  118.                                  <li><a href="#">三级菜单项</a></li>
  119.                                  <li><a href="#">三级菜单项</a></li>
  120.                                  <li><a href="#">三级菜单项</a></li>
  121.                              </ul>
  122.                          </li>
  123.                          <li>
  124.                              <a href="#">二级菜单项</a>
  125.                              <ul>
  126.                                  <li><a href="#">三级菜单项</a></li>
  127.                                  <li><a href="#">三级菜单项</a></li>
  128.                                  <li><a href="#">三级菜单项</a></li>
  129.                                  <li><a href="#">三级菜单项</a></li>
  130.                                  <li><a href="#">三级菜单项</a></li>
  131.                              </ul>
  132.                          </li>
  133.                          <li>
  134.                              <a href="#">二级菜单项</a>
  135.                              <ul>
  136.                                  <li><a href="#">三级菜单项</a></li>
  137.                                  <li><a href="#">三级菜单项</a></li>
  138.                                  <li><a href="#">三级菜单项</a></li>
  139.                                  <li><a href="#">三级菜单项</a></li>
  140.                                  <li><a href="#">三级菜单项</a></li>
  141.                              </ul>
  142.                          </li>
  143.                      </ul>
  144.                  </li>
  145.                  <li>
  146.                      <a href="#">菜单项</a>
  147.                      <ul>
  148.                          <li>
  149.                              <a href="#">二级菜单项</a>
  150.                              <ul>
  151.                                  <li><a href="#">三级菜单项</a></li>
  152.                                  <li><a href="#">三级菜单项</a></li>
  153.                                  <li><a href="#">三级菜单项</a></li>
  154.                                  <li><a href="#">三级菜单项</a></li>
  155.                                  <li><a href="#">三级菜单项</a></li>
  156.                              </ul>
  157.                          </li>
  158.                          <li>
  159.                              <a href="#">二级菜单项</a>
  160.                              <ul>
  161.                                  <li><a href="#">三级菜单项</a></li>
  162.                                  <li><a href="#">三级菜单项</a></li>
  163.                                  <li><a href="#">三级菜单项</a></li>
  164.                                  <li><a href="#">三级菜单项</a></li>
  165.                                  <li><a href="#">三级菜单项</a></li>
  166.                              </ul>
  167.                          </li>
  168.                          <li>
  169.                              <a href="#">二级菜单项</a>
  170.                              <ul>
  171.                                  <li><a href="#">三级菜单项</a></li>
  172.                                  <li><a href="#">三级菜单项</a></li>
  173.                                  <li><a href="#">三级菜单项</a></li>
  174.                                  <li><a href="#">三级菜单项</a></li>
  175.                                  <li><a href="#">三级菜单项</a></li>
  176.                              </ul>
  177.                          </li>
  178.                          <li>
  179.                              <a href="#">二级菜单项</a>
  180.                              <ul>
  181.                                  <li><a href="#">三级菜单项</a></li>
  182.                                  <li><a href="#">三级菜单项</a></li>
  183.                                  <li><a href="#">三级菜单项</a></li>
  184.                                  <li><a href="#">三级菜单项</a></li>
  185.                                  <li><a href="#">三级菜单项</a></li>
  186.                              </ul>
  187.                          </li>
  188.                          <li>
  189.                              <a href="#">二级菜单项</a>
  190.                              <ul>
  191.                                  <li><a href="#">三级菜单项</a></li>
  192.                                  <li><a href="#">三级菜单项</a></li>
  193.                                  <li><a href="#">三级菜单项</a></li>
  194.                                  <li><a href="#">三级菜单项</a></li>
  195.                                  <li><a href="#">三级菜单项</a></li>
  196.                              </ul>
  197.                          </li>
  198.                          <li>
  199.                              <a href="#">二级菜单项</a>
  200.                              <ul>
  201.                                  <li><a href="#">三级菜单项</a></li>
  202.                                  <li><a href="#">三级菜单项</a></li>
  203.                                  <li><a href="#">三级菜单项</a></li>
  204.                                  <li><a href="#">三级菜单项</a></li>
  205.                                  <li><a href="#">三级菜单项</a></li>
  206.                              </ul>
  207.                          </li>
  208.                      </ul>
  209.                  </li>
  210.                  <li>
  211.                      <a href="#">菜单项</a>
  212.                      <ul>
  213.                          <li>
  214.                              <a href="#">二级菜单项</a>
  215.                              <ul>
  216.                                  <li><a href="#">三级菜单项</a></li>
  217.                                  <li><a href="#">三级菜单项</a></li>
  218.                                  <li><a href="#">三级菜单项</a></li>
  219.                                  <li><a href="#">三级菜单项</a></li>
  220.                                  <li><a href="#">三级菜单项</a></li>
  221.                              </ul>
  222.                          </li>
  223.                          <li>
  224.                              <a href="#">二级菜单项</a>
  225.                              <ul>
  226.                                  <li><a href="#">三级菜单项</a></li>
  227.                                  <li><a href="#">三级菜单项</a></li>
  228.                                  <li><a href="#">三级菜单项</a></li>
  229.                                  <li><a href="#">三级菜单项</a></li>
  230.                                  <li><a href="#">三级菜单项</a></li>
  231.                              </ul>
  232.                          </li>
  233.                          <li>
  234.                              <a href="#">二级菜单项</a>
  235.                              <ul>
  236.                                  <li><a href="#">三级菜单项</a></li>
  237.                                  <li><a href="#">三级菜单项</a></li>
  238.                                  <li><a href="#">三级菜单项</a></li>
  239.                                  <li><a href="#">三级菜单项</a></li>
  240.                                  <li><a href="#">三级菜单项</a></li>
  241.                              </ul>
  242.                          </li>
  243.                          <li>
  244.                              <a href="#">二级菜单项</a>
  245.                              <ul>
  246.                                  <li><a href="#">三级菜单项</a></li>
  247.                                  <li><a href="#">三级菜单项</a></li>
  248.                                  <li><a href="#">三级菜单项</a></li>
  249.                                  <li><a href="#">三级菜单项</a></li>
  250.                                  <li><a href="#">三级菜单项</a></li>
  251.                              </ul>
  252.                          </li>
  253.                          <li>
  254.                              <a href="#">二级菜单项</a>
  255.                              <ul>
  256.                                  <li><a href="#">三级菜单项</a></li>
  257.                                  <li><a href="#">三级菜单项</a></li>
  258.                                  <li><a href="#">三级菜单项</a></li>
  259.                                  <li><a href="#">三级菜单项</a></li>
  260.                                  <li><a href="#">三级菜单项</a></li>
  261.                              </ul>
  262.                          </li>
  263.                          <li>
  264.                              <a href="#">二级菜单项</a>
  265.                              <ul>
  266.                                  <li><a href="#">三级菜单项</a></li>
  267.                                  <li><a href="#">三级菜单项</a></li>
  268.                                  <li><a href="#">三级菜单项</a></li>
  269.                                  <li><a href="#">三级菜单项</a></li>
  270.                                  <li><a href="#">三级菜单项</a></li>
  271.                              </ul>
  272.                          </li>
  273.                      </ul>
  274.                  </li>
  275.  
  276.              </ul>
  277.          </nav>
  278.      </header>
  279.  
  280.  </body>
  281.  
  282.  </html>

2、导航菜单核心样式表style.css

  1.  .header{
  2.      width:960px;
  3.      margin-left: auto;
  4.      margin-right: auto;
  5.      margin-top:30px;
  6.      margin-bottom:30px;
  7.  }
  8.  .menu{
  9.      background-color:#333333;
  10.      position: relative;
  11.      font-size: 14px;
  12.  }
  13.  .nav > li{
  14.      display: inline-block;
  15.      position: relative;
  16.  }
  17.  .nav > li > a{
  18.      padding-top:0.5em;
  19.      padding-bottom:0.5em;
  20.      padding-left: 2em;
  21.      padding-right: 2em;
  22.      text-decoration:none;
  23.  }
  24.  .nav > li:hover > a{
  25.      background-color:rgb(255, 255,0);
  26.      color:rgb(0, 0, 0);
  27.  }
  28.  .nav a{
  29.      color:#f5f5f5;
  30.      display: block;
  31.      text-decoration: none;
  32.  }
  33.  .nav  ul{
  34.      display: none;
  35.      position:absolute;
  36.      background-color:transparent;
  37.  }
  38.  .nav  ul li{
  39.      position:relative;
  40.  }
  41.  .nav  ul li + li{
  42.      border-top: 1px solid rgb(70, 70, 70);
  43.  }
  44.  
  45.  .nav > li:hover > ul{
  46.      display: block;
  47.      padding-top: 0.4em;
  48.  }
  49.  .nav > li > ul > li > a{
  50.      padding-top:0.4em;
  51.      padding-bottom:0.4em;
  52.      width: 10em;
  53.      padding-left: 1em;
  54.      padding-right: 1em;
  55.      background-color: rgb(50, 50, 50);
  56.  }
  57.  .nav > li > ul > li:hover > a{
  58.      background-color:rgb(255, 255,0);
  59.      color:rgb(0, 0, 0);
  60.  }
  61.  .nav > li > ul > li > ul{
  62.      left:100%;
  63.      top:;
  64.  }
  65.  .nav > li:last-child > ul > li > ul{
  66.      left:-100%;
  67.      top:;
  68.  }
  69.  .nav > li > ul > li:hover >ul {
  70.      display: block;
  71.  }
  72.  .nav > li > ul > li > ul > li > a{
  73.      padding-top:0.4em;
  74.      padding-bottom:0.4em;
  75.      width: 10em;
  76.      padding-left: 1em;
  77.      padding-right: 1em;
  78.      background-color: rgb(50, 50, 50);
  79.  }
  80.  .nav > li > ul > li > ul > li:hover > a{
  81.      background-color:rgb(255, 255,0);
  82.      color:rgb(0, 0, 0);
  83.  }

3、全局样式表reset.css

  1.  article,
  2.  aside,
  3.  details,
  4.  figcaption,
  5.  figure,
  6.  footer,
  7.  header,
  8.  hgroup,
  9.  main,
  10.  nav,
  11.  section,
  12.  summary {
  13.      display: block;
  14.  }
  15.  
  16.  audio,
  17.  canvas,
  18.  video {
  19.      display: inline-block;
  20.  }
  21.  
  22.  audio:not([controls]) {
  23.      display: none;
  24.      height:;
  25.  }
  26.  
  27.  [hidden],
  28.  template {
  29.      display: none;
  30.  }
  31.  
  32.  html {
  33.      -ms-text-size-adjust: 100%;
  34.      -webkit-text-size-adjust: 100%;
  35.  }
  36.  
  37.  a {
  38.      background: transparent;
  39.  }
  40.  
  41.  a:focus {
  42.      outline: thin dotted;
  43.  }
  44.  
  45.  a:active,
  46.  a:hover {
  47.      outline:;
  48.  }
  49.  
  50.  abbr[title] {
  51.      border-bottom: 1px dotted;
  52.  }
  53.  
  54.  b,
  55.  strong {
  56.      font-weight: bold;
  57.  }
  58.  
  59.  dfn {
  60.      font-style: italic;
  61.  }
  62.  
  63.  hr {
  64.      -moz-box-sizing: content-box;
  65.      box-sizing: content-box;
  66.      height:;
  67.  }
  68.  
  69.  mark {
  70.      background: #ff0;
  71.      color: #000;
  72.  }
  73.  
  74.  code,
  75.  kbd,
  76.  pre,
  77.  samp {
  78.      font-family: monospace, serif;
  79.      font-size: 1em;
  80.  }
  81.  
  82.  pre {
  83.      white-space: pre-wrap;
  84.  }
  85.  
  86.  q {
  87.      quotes: "\201C" "\201D" "\2018" "\2019";
  88.  }
  89.  
  90.  small {
  91.      font-size: 80%;
  92.  }
  93.  
  94.  sub,
  95.  sup {
  96.      font-size: 75%;
  97.      line-height:;
  98.      position: relative;
  99.      vertical-align: baseline;
  100.  }
  101.  
  102.  sup {
  103.      top: -0.5em;
  104.  }
  105.  
  106.  sub {
  107.      bottom: -0.25em;
  108.  }
  109.  
  110.  img {
  111.      border:;
  112.  }
  113.  
  114.  svg:not(:root) {
  115.      overflow: hidden;
  116.  }
  117.  
  118.  figure {
  119.      margin:;
  120.  }
  121.  
  122.  fieldset {
  123.      border: 1px solid #c0c0c0;
  124.      margin: 0 2px;
  125.      padding: 0.35em 0.625em 0.75em;
  126.  }
  127.  
  128.  legend {
  129.      border:;
  130.      padding:;
  131.  }
  132.  
  133.  button,
  134.  input,
  135.  select,
  136.  textarea {
  137.      font-family: inherit;
  138.      font-size: 100%;
  139.      margin:;
  140.  }
  141.  
  142.  button,
  143.  input {
  144.      line-height: normal;
  145.  }
  146.  
  147.  button,
  148.  select {
  149.      text-transform: none;
  150.  }
  151.  
  152.  button,
  153.  html input[type="button"],
  154.  input[type="reset"],
  155.  input[type="submit"] {
  156.      -webkit-appearance: button;
  157.      cursor: pointer;
  158.  }
  159.  
  160.  button[disabled],
  161.  html input[disabled] {
  162.      cursor: default;
  163.  }
  164.  
  165.  input[type="text"]:hover,
  166.  input[type="text"]:focus,
  167.  input[type="text"]:active {
  168.      border: 1px solid #CCC;
  169.  }
  170.  
  171.  input[type="checkbox"],
  172.  input[type="radio"] {
  173.      box-sizing: border-box;
  174.      padding:;
  175.  }
  176.  
  177.  input[type="search"] {
  178.      -webkit-appearance: textfield;
  179.      -moz-box-sizing: content-box;
  180.      -webkit-box-sizing: content-box;
  181.      box-sizing: content-box;
  182.  }
  183.  
  184.  input[type="search"]::-webkit-search-cancel-button,
  185.  input[type="search"]::-webkit-search-decoration {
  186.      -webkit-appearance: none;
  187.  }
  188.  
  189.  button::-moz-focus-inner,
  190.  input::-moz-focus-inner {
  191.      border:;
  192.      padding:;
  193.  }
  194.  
  195.  textarea {
  196.      overflow: auto;
  197.      vertical-align: top;
  198.  }
  199.  
  200.  table {
  201.      border-collapse: collapse;
  202.      border-spacing:;
  203.  }
  204.  
  205.  body,
  206.  div,
  207.  ol,
  208.  ul,
  209.  li,
  210.  h1,
  211.  h2,
  212.  h3,
  213.  h4,
  214.  h5,
  215.  h6,
  216.  p,
  217.  span,
  218.  th,
  219.  td,
  220.  dl,
  221.  dd,
  222.  form,
  223.  fieldset,
  224.  legend,
  225.  input,
  226.  textarea,
  227.  select {
  228.      margin: 0 auto;
  229.      padding:;
  230.      border:;
  231.  }
  232.  
  233.  /* Global */
  234.  
  235.  body {
  236.      color: #444;
  237.      background: #FFF;
  238.      font: 12px/24px "Microsoft Yahei", Arial, Verdana, Tahoma, Sans-Serif;
  239.  }
  240.  
  241.  ul,
  242.  ol,
  243.  li {
  244.      list-style: none;
  245.  }
  246.  
  247.  table,
  248.  td,
  249.  th,
  250.  input {
  251.      font-size: 12px;
  252.  }
  253.  
  254.  h1,
  255.  h2,
  256.  h3,
  257.  h4,
  258.  h5,
  259.  h6 {
  260.      font-weight: normal;
  261.  }
  262.  
  263.  h1 {
  264.      font-size: 28px;
  265.  }
  266.  
  267.  h2 {
  268.      font-size: 18px;
  269.  }
  270.  
  271.  h3 {
  272.      font-size: 16px;
  273.  }
  274.  
  275.  h4 {
  276.      font-size: 14px;
  277.  }
  278.  
  279.  h5,
  280.  h6 {
  281.      font-size: 12px;
  282.  }
  283.  
  284.  .inner {
  285.      overflow: hidden;
  286.  }
  287.  
  288.  .clearfix {
  289.      clear: both;
  290.      font-size: 1px;
  291.      width: 1px;
  292.      height:;
  293.      visibility: hidden;
  294.      margin-top: 0px!important;
  295.      *margin-top: -1px;
  296.      line-height: 0
  297.  }
  298.  
  299.  .radius {
  300.      border-radius: 3px;
  301.      -moz-border-radius: 3px;
  302.      -webkit-border-radius: 3px;
  303.  }
  304.  
  305.  .opacity {
  306.      opacity: 0.5;
  307.      filter: "alpha(opacity=50)";
  308.      filter: alpha(opacity=50);
  309.  }
  310.  
  311.  .folio-thumb img {
  312.      width: 100%;
  313.      -webkit-backface-visibility: hidden;
  314.      -moz-backface-visibility: hidden;
  315.      -ms-backface-visibility: hidden;
  316.      backface-visibility: hidden;
  317.      -webkit-transition-duration: 0.7s;
  318.      -moz-transition-duration: 0.7s;
  319.      -ms-transition-duration: 0.7s;
  320.      -o-transition-duration: 0.7s;
  321.  }
  322.  
  323.  .folio-thumb:hover img {
  324.      -webkit-transform: scale(1.3);
  325.      -moz-transform: scale(1.3);
  326.      -o-transform: scale(1.3);
  327.      -ms-transform: scale(1.3);
  328.  }
  329.  
  330.  .mediaholder {
  331.      overflow: hidden;
  332.  }
  333.  
  334.  a:link,
  335.  a:visited {
  336.      color: #444;
  337.      outline:;
  338.      text-decoration: none;
  339.  }
  340.  
  341.  a:hover {
  342.      color: #005BB5;
  343.      text-decoration: underline;
  344.      /* -webkit-transition:color 0.4s ease; -moz-transition:color 0.4s ease; -o-transition:color 0.4s ease; -ms-transition:color 0.4s ease; transition: color 0.4s ease;*/
  345.  }

纯css实现的三级水平导航菜单的更多相关文章

  1. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  2. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  4. 纯HTML+CSS带说明的黄色导航菜单

    HoverTree带说明的CSS菜单:纯HTML+CSS结构链接带说明的黄色导航 在线体验效果:http://hovertree.com/texiao/css/1.htm 代码如下,保存到HTML文件 ...

  5. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

  7. jquery水平导航菜单展示

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

  9. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

随机推荐

  1. MaterialImageView

    https://github.com/zhaozhentao/MaterialImageView

  2. VC2010 利用 def 文件生成 dll 文件的方法

    近期有个需求,要生成一个dll 文件.文件里的函数都是採用 stdcall 函数调用约定,可是不希望函数名被修饰(add 被修饰成 add@8). 这时就要用def 文件了. 比方我有以下两个函数: ...

  3. [IT学习]GIT 学习

    最近开始了解GIT.有一些不错的资源记录在下面: 1.GIT for teams A book about teams cooperation. 2.GIT https://learngitbranc ...

  4. 原创教程之——reactjs 组件入门教程

    在学习react之前,希望你有以下准备: react的安装ECMAScript 6基础 本文不讲解react的安装步骤,若需了解请移步官方网站(https://reactjs.org/),那里讲解非常 ...

  5. ubuntu12.04 64位系统配置jdk1.6和jdk-6u20-linux-i586.bin下载地址

    1:下载地址http://code.google.com/p/autosetup1/downloads/detail?name=jdk-6u20-linux-i586.bin&can=2&am ...

  6. YTU 2914: xiaoping学构造函数

    2914: xiaoping学构造函数 时间限制: 1 Sec  内存限制: 128 MB 提交: 148  解决: 90 题目描述 xiaoping刚接触类的构造和析构函数,对于构造函数的编写比较困 ...

  7. YTU 1008: 童年生活二三事

    1008: 童年生活二三事 时间限制: 1000 Sec  内存限制: 64 MB 提交: 842  解决: 592 题目描述 Redraiment小时候走路喜欢蹦蹦跳跳,他最喜欢在楼梯上跳来跳去. ...

  8. 【T^T 1736】【FJUTOJ 1077】排座位

    http://59.77.139.92/problem.php?id=1077 水题,小心PE // <1736.cpp> - 11/12/16 17:17:52 // This file ...

  9. Masonry tableviewCell布局

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  10. Codeforces 633H. Fibonacci-ish II

    题目大意: 一个数列 q次询问 每次询问l r 将数列中l-r的位置排序去重后的数列成为b 输出 sigma b i * F i (其中F i为斐波那契数列中的第i项) 思路: 由于要去重 考虑权值线 ...