如何將現有菜單更改為響應式設計？
[英]How to change existing menu to responsive design?
問題描述
我使用 php、html 和 css 創建網站。 其不存在的響應式站點。 我想將現有菜單更改為響應我的網站？
我的菜單 Global Naivagtion 和管理界面顯示無響應？ 我的代碼是它設計的表？我將如何更改任何方法？
這里我的代碼粘貼在這里：
<?php
$session_file=$dir_sessions.".".$sid;
if(file_exists($session_file)&&$sid!="")
{
//echo "if";
$sfile=file($session_file);
$sinfo=explode("||",$sfile[0]);
#################################################
$lms_userID=$sinfo[0];
$lms_exptime=$sinfo[1];
$lms_username=$sinfo[2];
$lms_useremail=$sinfo[3];
$lms_userlevel=$sinfo[4];
$lms_user_group=$sinfo[5];
$lms_user_subgroup=$sinfo[6];
$lms_usergroup_file=$sinfo[7];
$lms_org=$sinfo[8];
}
?>
<script type="text/javascript">
function changePassword()
{
window.open('changepassword.php','ChangePassword','resizable=0,width=650,height=550,scrollbars=0');
}
</script>
<div id="menu">
<br />
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="186"> </td>
</tr>
<tr>
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><B> Global Navigation</B></font></td>
</tr>
<?php
if($lms_userlevel!=1){
?>
<!-- <tr >
<td width="186" background="images/menubg.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><img src="images/bullet.gif" align="absmiddle"> <A HREF="index.php?section=register&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">New Users</A></font></td>
</tr>
<tr >
<td width="186" background="images/menubg.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><img src="images/bullet.gif" align="absmiddle"> <A HREF="index.php?section=login&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">Log In</A></font></td>
</tr>-->
<?php
}
?>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=landing&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Main</A> </font></td>
</tr>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=enrollment&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Your Enrollment</A> </font></td>
</tr>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=courselist&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Courses </A> </font></td>
</tr>
<?php $status="no"; if($lms_userlevel>=2){ $status="yes"?>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=reports&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Reports</A> </font></td>
</tr>
<?php }?>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=news&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> News</A> </font></td>
</tr>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=messageboard&sid=<?php echo $sid; ?>" ; STYLE="text-decoration:none;COLOR:#3E3E3E;"> Message Board</A> </font></td>
</tr>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=library&sid=<?php echo $sid; ?>"; STYLE="text-decoration:none;COLOR:#3E3E3E;"> Repository</A> </font></td>
</tr>
<!--
<tr >
<td width="186" background="images/menubg.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><img src="images/bullet.gif" align="absmiddle"> <A HREF="index.php?section=forums&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">User Forums</A> </font></td>
</tr>
<tr >
<td width="186" background="images/menubg.gif"><img src="images/bullet.gif" align="absmiddle"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=search&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">Search</A> </font></td>
</tr>
<tr >
<td width="186" background="images/menubg.gif"><img src="images/bullet.gif" align="absmiddle"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=news&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">What's New</A> </font></td>
</tr>
-->
</table>
<?php
//echo "level = ".$lms_userlevel;
if($lms_userlevel>=3){
?>
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="186"> </td>
</tr>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="#" onClick="window.open('admin/admin.php?sid=<?php echo $sid; ?>','ADMIN','fullscreen,scrollbars=yes')"; STYLE="text-decoration:none;COLOR:#3E3E3E;"><strong> Admin Interface</strong></A> </font></td>
</tr>
<tr>
<td width="186"> </td>
</tr>
</table>
<?php }?>
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><strong> Public Documents</strong></font></td>
</tr>
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="index.php?section=faqs&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> FAQs</a></font></td>
</tr>
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="index.php?section=newsletter&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Newsletters</a></font></td>
</tr>
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="index.php?section=additional_resources&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Additional Resources</a></font></td>
</tr>
</table>
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="javascript:changePassword();" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Change Password</a></font></td>
</tr>
<tr>
<td width="auto" rowspan="3"> </td>
<td width="auto" rowspan="3"> </td>
<td width="auto" rowspan="3"> </td>
</tr>
</table>
</div>
任何方法請幫助我？
2 個解決方案
解決方案1
1 2015-06-13 12:26:54
我也在學習中。 如果我是你，我會怎么做。 我會首先根據您擁有的元素創建一個響應式布局，然后相應地遷移您的 php 代碼。
1) 計划您希望布局的響應程度。 只是為了適應不同的電腦屏幕尺寸，比如全寬可調整大小？ 或者在分辨率改變時使用不同的布局。
2) 使用不同的 div(s), ul(s), li(s) 而不是一個表格，這樣您就可以更輕松地管理和移動元素。
3) 使用百分比而不是固定像素寬度。
當然，到那時你會遇到很多定位、間距、邊距、填充的問題，但至少你開始了。
有很多框架告訴你，你可以在 15 分鍾內建立一個負責任的網站。 相信我，這是謊言。 它適用於更有經驗的開發人員，他們知道自己在做什么。
立即解決方案：創建一個類似於以下內容的 css 文件：
table, tr, th, td {
box-sizing: border-box;
}
table.content {
border-collapse: collapse;
width: 100%;
}
th {
font-weight: bold;
background-color: black;
}
td.course_title {
background-color: white;
width: 30%;
}
td.launch_link {
width: 30%;
}
// assign class to your table and tds
上面有很多缺失的元素。 只是給你一個想法。 希望能幫助您入門。
祝你好運。
解決方案2
0 2015-07-17 11:57:26
首先，當你想制作一個響應式網站時，你永遠不會使用表格。 您可以使用媒體查詢，但如果您嘗試使用表格，您將被困在這個網站上。 就是說。 為你未來的知識和美好。 在這里你可以看到和理解更多，但谷歌上有更多的例子。
如何使用響應式設計將此菜單置於移動終端中心
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.