Question

我正在开展一个响应式网页设计项目。我有一个问题，即我想在书面菜单中添加时间和日期，该菜单位于右上角。在第一部分我设法实现了这种效果，但不幸的是，当页面将大小更改为可能的最小，日期和时间掩盖列表元素。几天我试图解决这个问题，但我不知道该怎么做。你能救我吗？

P.S。在页面的底部，我还有一个效果很好的折叠导航栏。最好的选择是修改下面的代码

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Niedziela,', 'Poniedziałek,', 'Wtorek,', 'Środa,', 'Czwartek,', 'Piątek,', 'Sobota');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
		result = ''+days[day]+' '+d+' '+months[month]+' '+'  |  '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

  
  ul.topnav 
  {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
	  font-family: Coda, sans-serif
	  font-size: 12px !important;
	  letter-spacing: 4px;
  }

   ul.topnav li 
   {
      float: left;
   }

   ul.topnav li a 
   {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   ul.topnav li a:hover:not(.active) 
   {
      background-color: #9ECB16;
   }

   @media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}
   }
   
   
   
   
   .clock
   {
      overflow: hidden;
      background-color: #000000;
	  font-family: Coda, sans-serif;
	  font-size: 12px !important;
	  letter-spacing: 4px;
   }
   
   .clock p
   {
      display: block; 
      color: #FFFFFF;
      text-align: center;
      padding: 0 0 0 0;
      text-decoration: none;
   }
   

   
   .topcorner
   {
	  position: absolute;
      top: 14px;
      right: 16px;
   }

<!-- CLOCK -->
<div class="clock topcorner">
	<p id="date_time"></p>
	<script type="text/javascript">window.onload = date_time('date_time');</script>
</div>

<!-- MENU -->
<ul class="topnav">
    <li><a href="#">SALON</a></li>
	<li><a href="#">SYPIALNIA</a></li>
    <li><a href="#">KUCHNIA</a></li>
	<li><a href="#">ŁAZIENKA</a></li>
	<li><a href="#">PRZEDPOKÓJ</a></li>
</ul>

Answer 1

首先：p已经是一个块。你不需要在你的CSS中申请。第二：.clock和.topcorner对你来说是一样的。从html中删除一个类并将样式放在你的css中，因为你自己弄得一团糟。下一个：您已经使用

@media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}

   }

只需用时钟添加你的p，并在这个地方减小字体的大小。同时关闭绝对位置，以便在折叠页面时它不会脱离文档流。

Answer 2

＆＃13;

function date_time(id)
{
        date = new Date;
        year = date.getFullYear();
        month = date.getMonth();
        months = new Array('styczeń', 'luty', 'marzec', 'kwiecień', 'maj', 'czerwiec', 'lipiec', 'sierpień', 'wrzesień', 'październik', 'listopad', 'grudzień');
        d = date.getDate();
        day = date.getDay();
        days = new Array('Niedziela,', 'Poniedziałek,', 'Wtorek,', 'Środa,', 'Czwartek,', 'Piątek,', 'Sobota');
        h = date.getHours();
        if(h<10)
        {
                h = "0"+h;
        }
        m = date.getMinutes();
        if(m<10)
        {
                m = "0"+m;
        }
        s = date.getSeconds();
        if(s<10)
        {
                s = "0"+s;
        }
		result = ''+days[day]+' '+d+' '+months[month]+' '+'  |  '+h+':'+m+':'+s;
        document.getElementById(id).innerHTML = result;
        setTimeout('date_time("'+id+'");','1000');
        return true;
}

＆＃13;

  ul.topnav 
  {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
	  font-family: Coda, sans-serif
	  font-size: 12px !important;
	  letter-spacing: 4px;
  }

   ul.topnav li 
   {
      float: left;
   }

   ul.topnav li a 
   {
      display: block;
      color: #FFFFFF;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
   }

   ul.topnav li a:hover:not(.active) 
   {
      background-color: #9ECB16;
   }

   @media screen and (max-width: 600px)
   {
      ul.topnav li {float: none;}
	  
	  .clock
	  {
		  overflow: hidden;
		  background-color: #000000;
		  font-family: Coda, sans-serif;
		  font-size: 6px !important;
		  letter-spacing: 4px;
		  top: 14px;
		  right: 16px;
	  }
   
      .clock p
	  {
		  color: #FFFFFF;
		  text-align: center;
		  padding: 0 0 0 0;
		  text-decoration: none;
	  }
   }
   
   
   
   
   .clock
   {
      overflow: hidden;
      background-color: #000000;
	  font-family: Coda, sans-serif;
	  font-size: 12px !important;
	  letter-spacing: 4px;
	  position: absolute;
      top: 14px;
      right: 16px;
   }
   
   .clock p
   {
      color: #FFFFFF;
      text-align: center;
      padding: 0 0 0 0;
      text-decoration: none;
   }

＆＃13;

<!-- CLOCK -->
<div class="clock">
	<p id="date_time"></p>
	<script type="text/javascript">window.onload = date_time('date_time');</script>
</div>

<!-- MENU -->
<ul class="topnav">
    <li><a href="#">SALON</a></li>
	<li><a href="#">SYPIALNIA</a></li>
    <li><a href="#">KUCHNIA</a></li>
	<li><a href="#">ŁAZIENKA</a></li>
	<li><a href="#">PRZEDPOKÓJ</a></li>
</ul>

＆＃13;

如何在菜单的右上角添加日期和时间？

2 个答案: