Question

我是html＆amp;的新手。 CSS。我无法动态调整此导航栏。我的问题是，当我调整窗口大小时，它会受到干扰的布局，而在较小的设备中，它也会分散。我希望当我使用像移动设备这样的小设备时，或者当我调整窗口大小时，它的形状和布局不会改变

<style>
.page-numbers {
width:99%;
height:34px; 
margin:20px 0 auto;
border:1px solid #ddd;
border:1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
}

.page-numbers ul li{display:inline;}
.page-numbers a, 
.page-numbers .current{
 float:left;padding:0 14px;
 line-height:34px;
 border-right:1px solid;
 border-right-color:#ddd;
 border-right-color:rgba(0, 0, 0, 0.15);
 *border-right-color:#ddd;
 text-decoration:none;
 width:auto;
 }

.page-numbers a:hover,

.page-numbers .active a{background-color:#efefef;}

.page-numbers .current{
 background-color:none;
 color:#bfbfbf;
 }
.page-numbers .next a{border:0;}

</style>


<div class="page-numbers">
<span class="current" style="width:auto">← Previous</span>
<span class="current">1</span>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A2.html" class="page">2</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A3.html" class="page">3</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A4.html" class="page">4</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A5.html" class="page">5</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A6.html" class="page">6</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A7.html" class="page">7</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A8.html" class="page">8</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A9.html" class="page">9</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A10.html" class="page">10</a>
<a href="http://www.superpathshala.com/2018/05/the-hindu-vocabulary-with- 
mnemonics-english-to-hindi-A2.html" class="nextpostslink" style="border- 
right:none; width:60px">Next →</a>
</div>

Answer 1

使用@media查询创建响应式网站 matrix multiplication

Answer 2

答案很简单，有三种方式 1.使用媒体查询这是cdd媒体查询。它太简单和方便，总是更好地学习这一点 2.学习Bootstrap之类的任何CSS框架，使用bootstrap是有效的，因为它是该领域的市场领导者，但它可能需要一些时间来学习我的建议使用skeleton.css它的样板，对我来说是最好的！链接：www.getskeleton.com 3。用javascript / jquery做吧但这将是最糟糕的选择，但它将提高你的javascript技能，就像今天的世界JAVASCRIPT无处不在

Answer 3

您可以使用媒体查询来实现这一目标。媒体查询和一些JS的快速示例。工作小提琴是there。

HTML：

<div class="triggers">
  <div class="trigger"></div>
  <div class="trigger"></div>
</div>
<nav>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</nav>
<h1>
Resize under 720px
</h1>

CSS：

html {
  font-family: sans-serif;
}

h1 {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .25s ease;
}

.triggers {
  display: none;
  position: fixed;
  top: 10px; right: 25px;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.trigger {
  position: absolute;
  width: 30px;
  height: 2px;
  background: #000;
  transition: all .25s ease;
}

.trigger:nth-child(1).is-active {
  transform: rotate(45deg);
}

.trigger:nth-child(2).is-active {
  transform: rotate(-45deg);
}

a {
  text-decoration: none; 
  margin: 10px;
}

@media (max-width:720px) {
  .triggers {
    display: flex;
  }

  nav {
    top: -50px;
  }

  nav.is-active {
    top: 0;
  }
}

JS（jQuery）：

$(function(){
  $('.triggers').click(function(){
    $('.trigger, nav').toggleClass('is-active');
  });
});

使用css创建动态导航栏

3 个答案: