0
美好的一天,標題菜單沒有出現在我的漢堡html頁面
我設計了一個漢堡html頁面。我的標題'domoos mobile'僅在漢堡包'展開'時顯示(我不確定是否使用了正確的單詞)。見下圖:
我不太清楚,我在這裏失蹤,爲什麼我的標題不正確顯示。
我希望我的問題是可以理解的,並且對其他程序員也會有所幫助。這是我的第一款手機設計,所以我也希望你能放縱我);
感謝您的幫助。
內容的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;
}
這是你完整的代碼?它看起來不像你的截圖。 http://codepen.io/anon/pen/XpKvpP –
我不知道codepen.io是如何工作的,但我們還需要加載javascript jquery-2.1.3.min.js,jquery-ui.min。 js和hamburger.js。也許我錯了。謝謝你的幫助。 – Laurent