Question

我对ipad有疑问。这是我正在研究http://www.gmbelt.com/index.html的网站，问题是侧面的导航栏和导航按钮（顶部）和中间的横幅是用闪光灯制作的，而ipad不是支持flash。

无论如何我可以在html或css中重新创建这些项目吗？

任何帮助都将不胜感激，谢谢。

这是我正在使用的代码。

PS我知道使用表创建一个网站并不是一个好主意，但它已经完成了，我没有改变布局，因为有大量的页面需要很长时间。

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="CSS/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="CSS/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" href="CSS/stylesheet_zen_lightbox.css" />
</head>

<body bgcolor="#1B3917">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="100%">
<tr>
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="507">
<tr>
<td rowspan="2" height="175">&nbsp;</td>
<td width="1027" colspan="2" height="136">
<p align="center">
<img border="0" src="images/header.jpg" width="989" height="140"></td>
<td rowspan="2" height="175">&nbsp;</td>
</tr>
<tr>
<td width="1027" colspan="2" height="39">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
<tr>
<td width="75"><SCRIPT src="displayFlashbutton_home.js"></SCRIPT></td>
<td width="75"><SCRIPT src="displayFlashbutton_contact.js"></SCRIPT></td>
<td width="75"><SCRIPT src="displayFlashbutton_about.js"></SCRIPT></td>
<td width="75%"><SCRIPT src="displayFlashbutton_downloads.js"></SCRIPT></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="166" rowspan="2">&nbsp;</td>
<td width="150" height="166" rowspan="2">&nbsp;<SCRIPT src="displayFlashmenu.js"> </SCRIPT></td>
<td width="877" height="90" valign="top">
<p align="center">&nbsp;<SCRIPT src="displayFlashbanner.js"></SCRIPT></td>
<td height="166" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td>
<table border="1" bordercolor="#FFFFFF" height="100%" width="100%">
<tr>
<td align="center" width="100%" height="83" style="border:0">Please note, the home page is undergoing maintenance.<br><strong>However the menu and product items are fully working.</strong><br />We apologise for any inconvienice.<br />If you have any inquiries please contact Graham on 01455 271171 or <a href="mailto:graham@gmbelt.com">graham@gmbelt.com</a></td>
</tr>
<tr>
<td height="150px" width="100%" style="border:0">&nbsp;</td>
</tr>
<tr>
<td height="150px" width="100%" style="border:0">&nbsp;</td>
</tr>
<tr>
<td height="150px" width="100%" style="border:0">&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="166">&nbsp;</td>
<td width="150" height="166">&nbsp;</td>
<td width="877" height="166">
<p align="center">
<span style="color: rgb(170, 170, 170); font-family: arial, helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(27, 57, 22); display: inline !important; float: none; ">Copyright © 2012<span class="Apple-converted-space">&nbsp;</span></span><a href="http://www.gmbelt.com/index.html" target="_blank" style="color: rgb(153, 153, 153); text-decoration: none; font-family: arial, helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(27, 57, 22); ">Glen Esk Celtic and Highland Supplies<br></a>
<a class="mrk" href="http://www.thepcclinicuk.com/" target="_blank" style="color: rgb(153, 153, 153); text-decoration: none; background-color: rgb(27, 57, 22); font-family: arial, helvetica, sans-serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; ">Layout Design by The PC Clinic UK Ltd</a></td>
<td height="166">&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>

Answer 1

iOS不支持Flash。对于顶级菜单，这样的简单css命令就足够了

.a{background-image:url('bg.gif');}
.a:hover{background-image:url('bg_hover.gif');}

左侧菜单，您可以在此处查看：http://www.htmldrive.net/items/show/1074/Vertical-Accordion-effect-with-jQuery-

Answer 2

Ipad不支持flash。但是，您可以使用HTML和Css重新创建它们......

从中制作图片并使用css制作菜单：

<强> CSS

.ul li.menu1 a { 
  display:block;
  width:20px; 
  height:20px; 
  background-image:url('image.png');
}
.ul li.menu1 a:hover { 
  background-image:url('imagehover.png'); 
}

.ul li.menu2 a { 
   display:block;
   width:20px; 
   height:20px; 
   background-image:url('image2.png');
}
.ul li.menu2 a:hover { 
   background-image:url('image2hover.png'); 
}

<强> HTML

<ul>
  <li class="menu1"><a href="#"></a></li>
  <li class="menu2"><a href="#"></a></li>
</ul>

Flash项目不会显示在Ipad上

2 个答案: