2017-12-27 1216 views
0

我對網頁設計有點新,所以如果這太簡單的問題或錯誤的網站道歉。我使用Bootstrap 4來簡化我的靜態博客中的設計,並且我現在對設計感到非常滿意,但我不喜歡導航欄看起來平坦並且運行到後臺。我正在尋找一些關於如何讓它「流行」的想法,以便在視覺上截然不同,但不會爲設計增加太多複雜性。我嘗試調整顏色,添加漸變,並添加底部陰影,但我一直無法想出看起來不錯的東西。可能我正在尋找所有3個組合,我沒有足夠的技巧來識別。製作一個黑暗的崩潰的導航欄視覺上不同

下面是該網站的當前的開發版本的截圖: screenshot

而到了目前的生產站點的鏈接,導航欄是相同的: http://acwolff.xyz/

回答

0

難道你想讓它彈出嗎?

只需根據需要調整導航欄的CSS即可。下面是我用什麼:

.navbar{ 
filter: drop-shadow(8px 8px 10px black); 
background: linear-gradient(to top left, #7d7e7d 0%,gray 8%,#0e0e0e 100%); 
} 

.navbar-toggler{ 
transition:all 0.5s ease-in-out; 
} 

.navbar-toggler:hover{ 
background:#333333; 
} 

.navbar{ 
 
filter: drop-shadow(8px 8px 10px black); 
 
background: linear-gradient(to top left, #7d7e7d 0%,gray 8%,#0e0e0e 100%); 
 
} 
 

 
.navbar-toggler{ 
 
transition:all 0.5s ease-in-out; 
 
} 
 

 
.navbar-toggler:hover{ 
 
background:#333333; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Wolff Blogg</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 
    <link rel="icon" href="http://acwolff.xyz/static/favicon.ico"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
    <!-- Custom style --> 
 
    <link rel="stylesheet" href="http://acwolff.xyz/static/main.css" type="text/css" /> 
 

 
    <!-- RSS Feed --> 
 
    <link href="http://acwolff.xyz/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Wolff Blogg Atom Feed" /> 
 
</head> 
 

 
<body> 
 
    <!-- Navbar --> 
 
    <div class="pos-f-t"> 
 
    <div class="collapse" id="navbarToggleExternalContent"> 
 
     <div class="bg-dark p-4 navdiv"> 
 
     <ul class="navbar-nav"> 
 
      <h4> 
 
      <a class="navbar-brand" href="http://acwolff.xyz/index.html">Wolff Blogg</a> 
 
      </h4> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="http://acwolff.xyz/archives.html"> 
 
          Archives</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="http://acwolff.xyz/categories.html"> 
 
          Categories</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="http://acwolff.xyz/pages/about.html"> 
 
            About</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="http://acwolff.xyz/pages/projects.html"> 
 
            Projects</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
      <a class="nav-link" href="http://acwolff.xyz/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Wolff Blogg Atom Feed"> 
 
           Atom Feed</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <nav class="navbar navbar-dark bg-dark"> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> 
 
        <span class="navbar-toggler-icon"></span> 
 
       </button> 
 
    </nav> 
 
    </div> 
 

 
    <!-- Begin page content --> 
 
    <div class="container rounded mt-4 mb-4 p-4"> 
 
    <header> 
 
     <h2> 
 
     <a href="http://acwolff.xyz/posts/gamedev/2017/understanding-delta-time.html" rel="bookmark" title="Permalink to Understanding Delta Time (in Godot)"> 
 
    Understanding Delta Time (in&nbsp;Godot)</a> 
 
     </h2> 
 
     <div class="card border-0"> 
 
     <div class="card-body"> 
 
      <p class="card-text"> 
 
      By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 27 Jul 2017<br /> Modified: 29 Nov 2017<br /> Category: <a href="http://acwolff.xyz/category/gamedev.html">GameDev</a><br /> Tags: 
 

 
      <a href="http://acwolff.xyz/tag/programming.html">programming, </a> 
 

 
      <a href="http://acwolff.xyz/tag/godot.html">godot, </a> 
 
      <a href="http://acwolff.xyz/tag/game-development.html">game development</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <article> 
 
     <p>The Godot docs don&#8217;t cover delta in any great detail and maybe they shouldn&#8217;t, but understanding delta time is important in game programming since it helps your game gain framerate independence. If you don&#8217;t already know, tying 
 
     game logic and physics to framerate is easy but gives you undesired behavior like setting hard limits on what frame rate your game can run at, causing collision bugs if you do try to get your game running at higher framerates, or movement/actions 
 
     speeding up and slowing down with framerate. All of these create a terrible user experience, especially on PCs and modern consoles where 60+ fps is the norm. In Godot, you&#8217;ll mostly see delta when passing it in as a parameter to the _process 
 
     overrideable functions, like&nbsp;so: </p> 
 
     <div class="highlight"> 
 
     <pre><span></span>func _ready(): 
 
     set_process(true) 
 
func _process(delta): 
 
     # do something every frame 
 
func _fixed_process(delta): 
 
     # do something every physics frame 
 
</pre> 
 
     </div> 
 

 

 
     <p>Delta is the time in seconds since the last frame. Since games normally run at at least 30fps and usually 60fps, that means this will be a <code>float</code> type showing milliseconds, and it will <strong><span class="caps">NOT</span></strong> be 
 
     constant since frame latency varies widely. It will look like this: 0.017, 0.020, 0.01,&nbsp;etc. </p> 
 
     <p>To take advantage of delta time, all you have to do is normalize it. If you want an action to happen 60 times per second, it&#8217;s a simples as action_speed * delta! Here&#8217;s an examples pulled straight from the Godot&nbsp;docs:</p> 
 
     <div class="highlight"> 
 
     <pre><span></span># Code trimmed by ellipses to just show the key bits 
 
... 
 
# Initial direction of the ball 
 
var direction = Vector2(1.0, 0.0) 
 
# Constant for pad speed (in pixels/second) 
 
const INITIAL_BALL_SPEED = 80 
 
# Speed of the ball (also in pixels/second) 
 
var ball_speed = INITIAL_BALL_SPEED 
 
... 
 
func _process(delta): 
 
    var ball_pos = get_node(&quot;ball&quot;).get_position() 
 
... 
 
ball_pos += direction * ball_speed * delta 
 
</pre> 
 
     </div> 
 

 

 
     <p>Assuming our ball is moving in a straight horizontal line from the origin (the top left corner) at it&#8217;s initial speed and with a delta of .20 (50fps), this means our will move at a rate of Vector2(0.0, 0.0) + (Vector2(1.0, 0.0) * 80 * .02) 
 
     = Vector2(1.6, 0.0) or 1.6 pixels to the right every frame. But what if the framerate is higher? Let&#8217;s try 100fps: Vector2(0.0, 0.0) + (Vector2(1.0, 0.0) * 80 * .01) = Vector2(16.0, 0.0) or 0.8 pixels to the right every frame. What about 
 
     25 fps? Vector2(0.0, 0.0) + (Vector2(1.0, 0.0) * 80 * .04) = Vector2(3.2, 0.0) or 3.2 pixels to the right every frame. Pretty simple concept once you lay it&nbsp;out!</p> 
 
     <p>As a note, physics should usually not be tied to delta time since the calculations require much more precise timing. Godot handles this already, so it&#8217;s not something you need to worry about unless you start changing physics speed in the project&nbsp;settings.</p> 
 
     <p><span class="caps">P.S.</span>- If you don&#8217;t remember vectors, they&#8217;re also super important in game programming. Check out MAth for Game Developers on&nbsp;YouTube.</p> 
 
     <h4>References</h4> 
 
     <ul> 
 
     <li><a href="https://www.youtube.com/watch?v=Q9FZllr6-wY&amp;list=PLW3Zl3wyJwWOpdhYedlD-yCB7WQoHf-My&amp;index=1">Math for Game&nbsp;Developers</a></li> 
 
     <li><a href="http://docs.godotengine.org/en/latest/learning/step_by_step/scripting_continued.html?highlight=delta">Godot Docs - Scripting&nbsp;(continued)</a></li> 
 
     <li><a href="http://docs.godotengine.org/en/latest/classes/class_node.html?highlight=delta#class-node-process">Godot Docs - Node&nbsp;Class</a></li> 
 
     <li><a href="https://www.scirra.com/tutorials/67/delta-time-and-framerate-independence">Delta-time and framerate independence in Construct&nbsp;2</a></li> 
 
     <li><a href="https://youtu.be/c4b9lCfSDQM">Math for Game Developers - Jumping and&nbsp;Gravity</a></li> 
 
     <li><a href="https://www.vg247.com/2015/05/08/dark-souls-2-durability-bug-now-fixed/">Dark Souls 2 Durability&nbsp;Bug</a></li> 
 
     <li><a href="https://www.youtube.com/watch?v=33VRCGh2uQM">Lockpicking at&nbsp;600+fps</a></li> 
 
     <li><a href="https://www.youtube.com/watch?v=r4EHjFkVw-s">Fallout 4 Game Speed Tied to&nbsp;Framerate</a></li> 
 
     </ul> 
 
    </article> 
 
    <a href="http://acwolff.xyz/posts/gamedev/2017/understanding-delta-time.html"> 
 
     <button class="btn btn-secondary btn-lg btn-block mt-4"> 
 
         Click through to article for comments. 
 
        </button> 
 
    </a> 
 
    </div> 
 
    <div class="container rounded mt-4 mb-4 p-4"> 
 
    <header> 
 
     <h2> 
 
     <a href="http://acwolff.xyz/posts/python/2017/python-class-development-toolkit.html" rel="bookmark" title="Permalink to Python’s Class Development Toolkit"> 
 
    Python&#8217;s Class Development&nbsp;Toolkit</a> 
 
     </h2> 
 
     <div class="card border-0"> 
 
     <div class="card-body"> 
 
      <p class="card-text"> 
 
      By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 26 Mar 2017<br /> Category: <a href="http://acwolff.xyz/category/python.html">Python</a><br /> Tags: 
 

 
      <a href="http://acwolff.xyz/tag/programming.html">programming, </a> 
 

 
      <a href="http://acwolff.xyz/tag/python.html">python, </a> 
 

 
      <a href="http://acwolff.xyz/tag/notes.html">notes, </a> 
 
      <a href="http://acwolff.xyz/tag/code.html">code</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <article> 
 
     <p>Based on the <a href="https://www.youtube.com/watch?v=HTLu2DFOdTg">PyCon talk by Raymond Hettinger</a>. These is a good tutorial on building Python&nbsp;classes.</p> 
 
     <p>This is part of my repo for useful python features and ways of improving your code, check it out <a href="https://github.com/AlexCWolff/python_stuff">here</a>.</p> 
 
    </article> 
 
    <a href="http://acwolff.xyz/posts/python/2017/python-class-development-toolkit.html"> 
 
     <button class="btn btn-secondary btn-lg btn-block mt-4"> 
 
         Click through to article for comments. 
 
        </button> 
 
    </a> 
 
    </div> 
 
    <div class="container rounded mt-4 mb-4 p-4"> 
 
    <header> 
 
     <h2> 
 
     <a href="http://acwolff.xyz/posts/python/2017/beautiful-idiomatic-python.html" rel="bookmark" title="Permalink to Beautiful, Idiomatic Python"> 
 
    Beautiful, Idiomatic&nbsp;Python</a> 
 
     </h2> 
 
     <div class="card border-0"> 
 
     <div class="card-body"> 
 
      <p class="card-text"> 
 
      By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 26 Mar 2017<br /> Category: <a href="http://acwolff.xyz/category/python.html">Python</a><br /> Tags: 
 

 
      <a href="http://acwolff.xyz/tag/programming.html">programming, </a> 
 

 
      <a href="http://acwolff.xyz/tag/python.html">python, </a> 
 

 
      <a href="http://acwolff.xyz/tag/notes.html">notes, </a> 
 
      <a href="http://acwolff.xyz/tag/code.html">code</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <article> 
 
     <p>Based on the <a href="http://www.youtube.com/watch?feature=player_embedded&amp;v=OSGv2VnC0go">PyCon talk by Raymond Hettinger</a>. These are examples of ways to improve your Python code, at all&nbsp;levels.</p> 
 
     <p>This is part of my repo for useful python features and ways of improving your code, check it out <a href="https://github.com/AlexCWolff/python_stuff">here</a>.</p> 
 
    </article> 
 
    <a href="http://acwolff.xyz/posts/python/2017/beautiful-idiomatic-python.html"> 
 
     <button class="btn btn-secondary btn-lg btn-block mt-4"> 
 
         Click through to article for comments. 
 
        </button> 
 
    </a> 
 
    </div> 
 
    <div class="container rounded mt-4 mb-4 p-4"> 
 
    <header> 
 
     <h2> 
 
     <a href="http://acwolff.xyz/posts/python/2017/better-looping-in-python.html" rel="bookmark" title="Permalink to Better Looping in Python"> 
 
    Better Looping in&nbsp;Python</a> 
 
     </h2> 
 
     <div class="card border-0"> 
 
     <div class="card-body"> 
 
      <p class="card-text"> 
 
      By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 25 Mar 2017<br /> Category: <a href="http://acwolff.xyz/category/python.html">Python</a><br /> Tags: 
 

 
      <a href="http://acwolff.xyz/tag/programming.html">programming, </a> 
 

 
      <a href="http://acwolff.xyz/tag/python.html">python, </a> 
 

 
      <a href="http://acwolff.xyz/tag/notes.html">notes, </a> 
 
      <a href="http://acwolff.xyz/tag/code.html">code</a> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <article> 
 
     <p>Based on the <a href="https://www.youtube.com/watch?v=EnSu9hHGq5o">PyCon talk by Ned Batchelder</a>. These are examples of better ways to iterate in&nbsp;Python. </p> 
 
     <p>This is part of my repo for useful python features and ways of improving your code, check it out <a href="https://github.com/AlexCWolff/python_stuff">here</a>.</p> 
 
    </article> 
 
    <a href="http://acwolff.xyz/posts/python/2017/better-looping-in-python.html"> 
 
     <button class="btn btn-secondary btn-lg btn-block mt-4"> 
 
         Click through to article for comments. 
 
        </button> 
 
    </a> 
 
    </div> 
 
    <div class="container rounded mt-4 mb-4 p-4"> 
 
    <header> 
 
     <h2> 
 
     <a href="http://acwolff.xyz/posts/short-stories/2017/the-question.html" rel="bookmark" title="Permalink to The Question"> 
 
    The&nbsp;Question</a> 
 
     </h2> 
 
     <div class="card border-0"> 
 
     <div class="card-body"> 
 
      <p class="card-text"> 
 
      By: <a href="http://acwolff.xyz/author/alex-c-wolff.html">Alex C. Wolff</a> Published: 25 Jan 2017<br /> Category: <a href="http://acwolff.xyz/category/short-stories.html">Short Stories</a><br /> 
 
      </p> 
 
     </div> 
 
     </div> 
 
    </header> 
 
    <article> 
 
     <p>This isn&#8217;t a particularly good story, just me trying some things out. Feedback&nbsp;welcome.</p> 
 
     <h4 class="text-center">I</h4> 
 

 
     <p><em>Today was the day</em> he said to himself, for what felt like the hundredth time. He was grinding his teeth, enough to make his jaw sore. He turned the wheel of the car and pulled on to the street. He briefly considered driving past, thinking 
 
     of any excuse he could give for his absence. Nothing came to mind so he gave up and slowly pulled in the driveway as planned, stopping in front of the house. He killed the engine and collected his thoughts. What was he going to say? He had spent 
 
     days planning it out but now that it was finally time nothing seemed quite right. He opened the door and stepped outside. He didn’t bother locking it. The walk to the front door may as well have been a million miles. He walked slowly and never 
 
     seemed to get any closer. The door opened and a woman came out to greet him. They embraced warmly, and he cheered up at the familiarity of the situation. They sat down in the living room and talked as they usually do. As the night carried on he 
 
     became his usual self again. She asked if he would like a drink. The night grew darker and colder as they shared glass after glass together by the fire. The record player softly played their favorites. After a while he began to grow serious, and 
 
     knew that now was the time. He called her name and let out everything he had been holding in all. When he was done, she too grew serious. As the situation fully dawned on her, she became cold and angry. She replied to him and expressed her shock 
 
     and anger. He too was now shocked and hurt by her response. Both were now deeply offended by the others actions. The conversation was increasing in speed and volume, betraying their emotions. After a few minutes of this the man could take it no 
 
     longer. He grabbed his coat and left, slamming the door behind him. He got back in to his waiting car and drove off quickly. She watched him leave and fumed for a while but as she picked up after them she was began to cry a little. She took a 
 
     long bath and went to&nbsp;bed.</p> 
 
     <h4 class="text-center"><span class="caps">II</span></h4> 
 

 
     <p>The young woman angrily walked up the stairs. Her mother shouted behind her to not come back down until she had found what had been asked. She groaned at the thought of the task she had been given and how she’d rather be doing almost anything else. 
 
     After a quick search she found the most likely candidate, an old safe deposit box labeled 「Karen’s important papers」. It probably hadn’t been opened since it was filled and labeled before being moved who knows how many houses ago. She took half 
 
     the papers out and placed them to the side, then began leafing through them. One piece of paper fell out from the stack, it was much smaller than any others and looked to have a few small water spots on it. When she looked closer she noticed it 
 
     wasn’t one paper but two newspaper articles cut out and glued to a single piece of paper. One was an obituary for a man who had gotten in to a car accident. It was determined to be drunk driving. The second was a classified ad. It read: 「One diamond 
 
     engagement ring, never&nbsp;worn.」</p> 
 
    </article> 
 
    <a href="http://acwolff.xyz/posts/short-stories/2017/the-question.html"> 
 
     <button class="btn btn-secondary btn-lg btn-block mt-4"> 
 
         Click through to article for comments. 
 
        </button> 
 
    </a> 
 
    </div> 
 

 

 
    <footer class="footer"> 
 
    <p class="text-center text-white"> 
 
     Copyright 2017 Alexander Wolff.<br /> For legal/licensing info please see the <a href="http://acwolff.xyz/pages/about.html">About</a> page.<br /> This site is powered by <a href="http://docs.getpelican.com/en/stable/">Pelican</a>, <a href="https://pages.github.com/">Github Pages</a>, 
 
     <a href="https://disqus.com/">Disqus</a>, and <a href="http://getbootstrap.com/">Bootstrap</a>. 
 
    </p> 
 
    </footer> 
 

 
    <!-- Bootstrap core JavaScript 
 
     ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
 

 
    <!-- Google Analytics/Disqus scripts --> 
 
    <script type="text/javascript"> 
 
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
 
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
 
    </script> 
 
    <script type="text/javascript"> 
 
    try { 
 
     var pageTracker = _gat._getTracker("UA-29261422-6"); 
 
     pageTracker._trackPageview(); 
 
    } catch (err) {} 
 
    </script> 
 
    <script type="text/javascript"> 
 
    var disqus_shortname = 'acwolff-xyz'; 
 
    (function() { 
 
     var s = document.createElement('script'); 
 
     s.async = true; 
 
     s.type = 'text/javascript'; 
 
     s.src = 'http://' + disqus_shortname + '.disqus.com/count.js'; 
 
     (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); 
 
    }()); 
 
    </script> 
 
</body> 
 

 
</html>

+0

的效果是我tatses有點太極端了,但是這絕對是正確的軌道上,我會調整它一點我自己。謝謝! –

0

首先,這個網站https://coolors.co/提供一個偉大的顏色示意圖,您可以使用它來增強網站上的顏色。

至於改變顏色,你可以絕對修改你的導航欄的顏色。你絕不會卡住顏色方案bootstrap給你(https://v4-alpha.getbootstrap.com/components/navbar/#color-schemes)。

只需使用「.navbar」類修改您的外部CSS文件以使用任何您喜歡的背景色。例如:https://github.com/abishr12/portfolio-website/blob/master/assets/css/style.css