2017-01-14 48 views
0

美好的一天,標題菜單沒有出現在我的漢堡html頁面

我設計了一個漢堡html頁面。我的標題'domoos mobile'僅在漢堡包'展開'時顯示(我不確定是否使用了正確的單詞)。見下圖:

enter image description here enter image description here

我不太清楚,我在這裏失蹤,爲什麼我的標題不正確顯示。

我希望我的問題是可以理解的,並且對其他程序員也會有所幫助。這是我的第一款手機設計,所以我也希望你能放縱我);

感謝您的幫助。

內容的HTML頁面:CSS文件(mystyle_hamburger.css)的

<!DOCTYPE html> 
<html> 
<head> 
    <title>Domoos mobile </title> 
    <meta http-equiv="refresh" content="600"> 
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/> 
    <!--Using jQuery and jQuery UI for display effects--> 
    <script src="js/jquery-2.1.3.min.js"></script> 
    <script src="jquery-1.12.0/jquery-ui.min.js"></script> 
    <!--Using the hamburger menu display code--> 
    <script src="scripts/hamburger.js"></script> 
    <!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet--> 
    <link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/> 
    <link rel="stylesheet" type="text/css" href="css/mystyle_hamburger.css" /> 
</head> 
<body> 
    <!--This wrapping container is used to get the width of the whole content--> 
    <div id="container"> 
    <!--The Hamburger Button in the Header--> 
    <header> 
     <div id="hamburger"> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
    </header> 
    <!--The mobile navigation Markup hidden via css--> 
    <nav> 
     <ul> 
      <!--<li><a href="#"><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">menuitem 1</a></li> --> 
      <li><a href="#">menuitem 1</a></li> 
      <li><a href="#">menuitem 2</a></li> 
      <li><a href="#">menuitem 3</a></li> 
      <li><a href="#">menuitem 4</a></li> 
      <li><a href="#">menuitem 5</a></li> 
      <li><a href="#">menuitem 6</a></li> 
     </ul> 
    </nav> 
    <!--The Layer that will be layed over the content 
    so that the content is unclickable while menu is shown--> 
    <a name="top"></a> 
    <div id="contentLayer"></div> 
    <!--The content of the site--> 
    <div id="content">  
     <div id="tag_domoos_title"> 
     <p>Domoos mobile</p> 
     </div> 
    </div> 
    </div> 
</body> 
</html> 

內容:

#tag_domoos_title{ 
    font-family:Arial; 
    font-size: 110%; 
    text-align: left; 
    position: absolute; 
    top: 35px; 
    left: 101px; 
    color:black; 
    z-index:10; 
    font-weight: 900; 
} 

#date{ 
    font-family:Arial; 
    font-size: 90%; 
    text-align: left; 
    position: absolute; 
    top: 85px; 
    left: 101px; 
    color:blue; 
} 
#time{ 
    font-family:Arial; 
    font-size: 90%; 
    text-align: left; 
    position: absolute; 
    top: 103px; 
    left: 101px; 
    color:blue; 
} 

#tag_sunrise_sunset{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 107px; 
    left: 11px; 
    color:black; 
} 

#tag_weather_condition{ 
    font-family:Arial; 
    font-size: 90%; 
    text-align: left; 
    position: absolute; 
    top: 130px; 
    left: 11px; 
    color:black; 
} 

#tag_weather_temperature{ 
    font-family:Arial; 
    font-size: 90%; 
    text-align: left; 
    position: absolute; 
    top: 148px; 
    left: 11px; 
    color:black; 
    font-weight: 900; 
} 

#current_weather_conditions{ 
    font-family:Arial; 
    font-size: 90%; 
    text-align: left; 
    position: absolute; 
    top: 168px; 
    left: 11px; 
    color:black; 
} 

#meteo_icon { 
    position: relative; 
} 

#meteo_icon img{ 
    position: absolute; 
    right: 0; 
    top: 80px; 
} 

#meteo_forecast{ 
    font-family:Arial; 
    font-size: 100%; 
    float:left; 
    padding-top: 5px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 10px; 
    height:434px; 
    width:870px; 
    top:200px; 
    position: absolute; 
} 

#meteo_forecast_day1{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 260px; 
    left: 11px; 
    color:black;  
    font-weight: 600; 
} 

#meteo_forecast_day2{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 330px; 
    left: 11px; 
    color:black;  
    font-weight: 600; 
} 

#meteo_forecast_day3{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 400px; 
    left: 11px; 
    color:black; 
    font-weight: 600; 
} 

#meteo_forecast_temperature_day1{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 260px; 
    left: 220px; 
    color:black; 
} 

#meteo_forecast_temperature_day2{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 330px; 
    left: 220px; 
    color:black; 
} 

#meteo_forecast_temperature_day3{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 400px; 
    left: 220px; 
    color:black; 
} 

#meteo_forecast_condition_day1{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 280px; 
    left: 11px; 
    color:black; 
} 

#meteo_forecast_condition_day2{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 350px; 
    left: 11px; 
    color:black; 
} 

#meteo_forecast_condition_day3{ 
    font-family:Arial; 
    font-size: 80%; 
    text-align: left; 
    position: absolute; 
    top: 420px; 
    left: 11px; 
    color:black; 
} 


#domoos_logo{ 
position: relative; 
} 

#domoos_logo img{ 
    position: absolute; 
    left: 0; 
    top: 10px; 
} 

#lorem{ 
    font-family:Arial; 
    font-size: 100%; 
    text-align: left; 
    position: relative; 
    top: 700px; 
    left: 10px; 
    color:black; 
} 
+0

這是你完整的代碼?它看起來不像你的截圖。 http://codepen.io/anon/pen/XpKvpP –

+0

我不知道codepen.io是如何工作的,但我們還需要加載javascript jquery-2.1.3.min.js,jquery-ui.min。 js和hamburger.js。也許我錯了。謝謝你的幫助。 – Laurent

回答

0

以及親愛的我看到你開始就錯了...你爲什麼不開始引導?那裏有一些很好的模板。你可以使用他們的下拉菜單,輸入搜索框等,你可以使用這個鏈接查看一些模板:https://getbootstrap.com/components/#navbar

enter image description here

enter code here 

I also added you something I used from bootstrap site with this code: 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>