1. 首页
  2. 问题列表
  3. CSS和SASS Nav问题
提问者：小点点

CSS和SASS Nav问题


我一直在使用HTML中的Sass和CSS为我试图创建的网站创建一个导航栏，但只有导航栏的第一个项目显示出来，并且向左对齐。我是一个相当新的编码，所以它可能是一些非常基本的东西，但我正试图找到一种方法，有一个响应工作导航栏。我的HTML中包含JavaScript，因为我正在使用GitHub.io实现我的网站。我还通过Ruby将sass转换为css。有人知道我做错了什么吗？

正如您在图片中看到的，导航栏中显示的只有关于我的一面。酒吧的其余部分不见了

再次感谢大家提前给予的帮助。这个站点对学习更多关于编码的知识有很大的帮助，所以再次提前表示感谢。

以下是HTML：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
    <meta name="author" content="Clark Fennell">
    <meta name="description" content="Clark Fennell's Website">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/stylesass.css">
    <link rel="stylesheet" type="text/css" href="/css/.sass-cash/f438d035db857854fbdbe4096cf1f690c6912d06/style.sassc">
    <link rel="stylesheet" href="https://maxcdn.bottstrapcdn.com/bottstrap/3.3.7/css/bootstrap.min.css">
    <!--[if lt IE 9]><link rel="stylesheet" href="ie.css"><![endif]-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bottstrap/3.3.7/js/bootstrap.min.js">
    </script>
    <script type="text/JavaScript" src="/JS/mywebjscript.js">
    </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<Title>Clark Fennell's Website</title>
</head>
<header>
<div class="title">
        <p class="heading">CLARK FENNELL</p>
        <p class="heading2">WEBSITE</p>
        <script type="text/javascript">
          $(function () {
            count = 0;
            wordsArray = ["UX/UI DESIGNER", "FRONT-END DEVELOPER", "WEB DESIGNER", "SOFTWARE DEVELOPER"];
            setInterval(function () {
              count++;
              $("#word").fadeOut(400, function () {
                $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400).addClass("small-heading");
              });
            }, 2000);
          });
        </script>
    <div id="word" class="small-heading">UX/UI DESIGNER</div>
</div>
</div>
<br>
<div>
<script type="text/javascript">
$(document).ready( function() {
  $('#content-reveal').hide();
  $('#aboutme').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>ABOUT ME</h2><br><p>Age: 29<br>Location: Leeds<br><br>I am a developer specialising in HTML, CSS, JAVA, JaveScript, SQL, Command Line, Ruby and many more.<br><br>I am also well equpit at using Adobe programs, such as, PhotoShop, Dreamweaver, Illistrator, InDesign, and other software as well.<br><br>I like to board and video games, watching indepentdant professional wrestling & a nice cup of tea.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#myhtmlcss').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>HTML & CSS</h2><br><p>This site is just one example of my HTML, CSS & SCSS skills. The code for this website, plus plenty of other examples, are on my <a href="https://www.github.com/clarkfennell">GITHUB</a>.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#myjscript').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>JAVASCRIPT</h2><br><p>Below is a a Random Colour Generator created with JavaScript code. The code for this is located on my <a href="Https://github.com/clarkfennell/Random-Color-Generator-React-JS-Example">GITHUB</a></p><p>For more JavaScript, JQuery and AngularJS, please visit my <a href="https://www.github.com/clarkfennell">GITHUB</a>.</p></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#mycv').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>MY CV</h2><br><img src="/images/NEWCVClarkFennell.jpg"></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
  $('#mycv').click( function() {
      $('#content-reveal').fadeOut( 500, function() {
          $('#content-reveal').html( '<div class="maindiv"><h2>CONTACT</h2></div>' );
          $('#content-reveal').fadeIn( 500 );
      } );
  } );
} );
</script>
<ul class="PrimaryNav with-indicator">
  <li class="Nav-item" id="aboutme">ABOUT ME</li>
  <li class="Nav-item" id="myhtmlcss">HTML & CSS</li>
  <li class="Nav-item is-active" id="myjscript">JAVASCRIPT</li>
  <li class="Nav-item" id="mycv">MY CV</li>
  <li class="Nav-item" id="contactme">CONTACT</li>
</ul>
</div>
</header>
</body>

这里有一个谎言：

$menu-items: 5
$width: (100/$menu-items) * 1%

$background-color: #121212
$indicator-color: #363151

.PrimaryNav
  list-style: none
  margin: 50px auto
  max-width: 720px
  padding: 0
  width: 100%


.Nav-item
  background: #363151
  display: block
  float: left
  margin: 0
  padding: 0
  text-align: center
  width: $width


  &:first-child
    border-radius: 3px 0 0 3px


  &:last-child
    border-radius: 0 3px 3px 0


  &.is-active a
    color: $indicator-color


  a
    color: $background-color
    display: block
    padding-top: 20px
    padding-bottom: 20px
    text-decoration: none

    &:hover
      color: $indicator-color



.with-indicator
  position: relative

.Nav-item:last-child
  &:before, &:after
    content: ''
    display: block
    position: absolute


  &:before
    width: 0
    height: 0
    border: 6px solid transparent
    border-top-color: $color-indicator
    top: 0
    left: 12.5%
    margin-left: -3px


  &:after
    width: $width
    background: $indicator-color
    top: -6px
    bottom: -6px
    left: 0
    z-index: -1



$menu-items: 5
$menu-items-loop-offset: $menu-items - 1
$width: (100/$menu-items) * 1%

.with-indicator
  @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after
      left:($width*$i)-$width
    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before
      left:($width*$i)+($width/2)-$width



  @for $i from 1 through $menu-items-loop-offset
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after
      left:($width*$i)-$width !important
    .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before
      left:($width*$i)+($width/2)-$width !important


.Nav-item
    &:last-child
      &:hover, &.is-active
        &:before
          left: (100%-$width)+($width/2) !important
        &:after
          left: 100%-$width !important

以下是CSS：

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
@font-face {
    font-family: "Etna";
    src:url("/Fonts/enta.eot");
    src:url("/Fonts/enta.otf") format("opentype"),
            url("/Fonts/etna.woff") format("woff"),
            url("/Fonts/etna.svg") format("svg"),
            url("/Fonts/etna.ttf") format("ttf");
}

@import url('https//fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Titllium+Web');

html, body {
    background-color: #EEEAE3;
    font-family: 'Titllium Web', sans-serif;
}

h2 {
        font-size: 1.15em;
        color: #24282B;
        font-family: 'Etna', Helvetica, sans-serif;
        text-align: left;
}

p {
    font-size: 1em;
    color: #24282B;
    text-align: left;
    font-family: 'Titllium Web', sans-serif;
}

.heading {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 3.50em;
}

.heading2 {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 1.70em;
}

.small-heading {
    font-family:'Etna', San-serif;
    text-align: center;
    color: #363151;
    font-size: 1.15em;
}

.copywrite {
    font-size: 0.6em;
    opacity: 0.25:
}

#wrapper {
    width: 450px;
    height: 281px;
    margin: 0 auto 10px;
    align-items: center;
}

#aboutme {background-color: #EEEAE3;}
#myhtmlcss {background-color: #EEEAE3; display: none;}
#myjscript {background-color: #EEEAE3; display: none;}
#mycv {background-color: #EEEAE3; display: none;}
#contactme {background-color: #EEEAE3; display: none;}

再次感谢


共1个答案

匿名用户

通过Css隐藏其他导航项

#myhtmlcss {background-color: #EEEAE3; display: none;}
#myjscript {background-color: #EEEAE3; display: none;}
#mycv {background-color: #EEEAE3; display: none;}
#contactme {background-color: #EEEAE3; display: none;}

如果要显示它们，可以替换为

#myhtmlcss {background-color: #EEEAE3;}
#myjscript {background-color: #EEEAE3;}
#mycv {background-color: #EEEAE3;}
#contactme {background-color: #EEEAE3;}

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS