我在制作一些代码时遇到了一些麻烦。在我的模板页面上，我有一个有css的导航栏。由于屏幕分辨率调整大小，我不知道该怎么办。请有人帮帮我。她是我的HTML和CSS代码：
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@charset "UTF-8";
/* Base Styles */
#cssmenu ul,
#cssmenu li,
#cssmenu a {
list-style: none;
margin: 0;
padding: 0;
border: 0;
line-height: 1;
font-family: 'Lato', sans-serif;
}
#cssmenu {
border: 1px solid #133e40;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
width:100%;
width: auto;
}
#cssmenu ul {
zoom: 1;
background: #36b0b6;
background: -moz-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36b0b6), color-stop(100%, #2a8a8f));
background: -webkit-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -o-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: -ms-linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
background: linear-gradient(top, #36b0b6 0%, #2a8a8f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@top-color', endColorstr='@bottom-color', GradientType=0);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#cssmenu ul:before {
content: '';
display: block;
}
#cssmenu ul:after {
content: '';
display: table;
clear: both;
}
#cssmenu li {
float: left;
width:23%;
margin: 0 5px 0 0;
border: 1px solid transparent;
}
#cssmenu li a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 8px 15px 9px 15px;
display: block;
text-decoration: none;
color: #ffffff;
border: 1px solid transparent;
font-size: 16px;
width:100%;
}
#cssmenu li.active {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #36b0b6;
}
#cssmenu li.active a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1e6468;
border: 1px solid #133e40;
-moz-box-shadow: inset 0 5px 10px #133e40;
-webkit-box-shadow: inset 0 5px 10px #133e40;
box-shadow: inset 0 5px 10px #133e40;
}
#cssmenu li:hover {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
border: 1px solid #36b0b6;
}
#cssmenu li:hover a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
display: block;
background: #1e6468;
border: 1px solid #133e40;
-moz-box-shadow: inset 0 5px 10px #133e40;
-webkit-box-shadow: inset 0 5px 10px #133e40;
box-shadow: inset 0 5px 10px #133e40;
}<!DOCTYPE html>
<html xmlns="undefined">
<head>
<link rel="stylesheet" href="../Website/css/navbar.css">
<link rel="stylesheet" href="..Website/css/common.css">
<link rel="stylesheet" href="../Website/css/demo.css">
<link rel="stylesheet" media="screen" href="../Website/css/form.css" >
<link rel="stylesheet" href="../Website/css/index2.css">
<link rel="stylesheet" href="../Website/css/index3.css">
<link rel="stylesheet" href="../Website/css/index4.css">
<link rel="stylesheet" href="../Website/css/price2.css">
<link rel="stylesheet" href="../Website/css/price3.css">
<link rel="stylesheet" href="../Website/css/price4.css">
<link rel="stylesheet" href="../Website/css/accessoriesimages1.css">
<link rel="stylesheet" href="../Website/css/laminateimage1.css">
<meta http-equiv="Content-Type" content="text/html; charset:windows-1252">
<style type="text/css">
<meta name= "description" content="Flooring services for all domestic work, with trainer and well equipt fitters">
body,td,th {color: #000000;}
body {background-color: #00c0bd;}
a {font-size: 10px;
color: #00CC33;}
a:visited {color: #FF0000;}
a:hover {color: #000000;}
a:active {color: #FF0000;}
a:link {color: #000000;}
.style1 {font-size: xx-small;
font-family: 'Lato', sans-serif;}
.style2 {font-family: 'Lato', sans-serif}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" align="center" bordercolor="#F0F0F0">
<tr>
<th rowspan="2" scope="col"><a href="../Website/Index.html"><img src="../Website/images/logo.png" alt="#" width="265" height="149" border="0"></a></th>
<th width="4" rowspan="2" scope="col"> </th>
<th height="91" colspan="8" scope="col"><marquee loop="infinite" behavior="scroll">
<img src="../Website/images/transparent-banner.png" alt="#" width="1012" height="51" align="left">
</marquee>
</th>
</tr>
<tr>
<th height="64" colspan="7" scope="col"><div id='cssmenu'>
<div align="center">
<ul>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li class='active'></li>
<li><a href='../Website/Index.html'>Home</a></li>
<li><a href='../Website/Prices and services.html'>Prices & Services </a></li>
<li><a href='../Website/Accessories.html'>Accessories</a></li>
<li class='last'><a href='../Website/Contact Us.html'>Contact Us </a></li>
</ul>
</div>
</div></th>
<th width="305" height="64" scope="col"><script type="text/javascript">
var domainroot="www.martinwalkerflooring.com"
function Gsitesearch(curobj){
curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
<form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
<p><br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" />
<input type="submit" value="Search" />
</div>
</p>
</form></th>
</tr>
<tr>
<th height="20" colspan="10" scope="col"> </th>
</tr>
<tr>
<th height="395" colspan="10" align="center" valign="top" scope="row"><!-- TemplateBeginEditable name="Main Editable Region" -->
<div align="center">Main Editable Region</div>
<!-- TemplateEndEditable --> </th>
</tr>
<tr>
<th height="59" colspan="10" scope="row"> </th>
</tr>
<tr>
<td width="318" height="24" nowrap scope="row"><div align="left">
<p class="style1"><u>copyright and copy; 2015, Martin Walker Flooring. All rights to Martin Walker Flooring reserved</u></p>
</div></td>
<td> </td>
<td width="108" nowrap><div align="center"><a href="../Website/Prices and services.html" class="style2">Prices and Services</a></div></td>
<td width="55" nowrap><div align="center"><a href="../Website/Contact Us.html" class="style2">Contact Us</a></div></td>
<td width="63" nowrap><div align="center"><a href="../Website/Accessories.html" class="style2">Accessories</a></div></td>
<td width="34" nowrap><div align="center"><a href="../Website/Carpet.html" class="style2">Carpet</a></div></td>
<td width="48" nowrap><div align="center"><a href="../Website/Laminate.html" class="style2">Laminate</a></div></td>
<td width="27" nowrap><div align="center"><a href="../Website/Vinyl.html" class="style2">Vinyl</a></div></td>
<td width="367"> </td>
<td> </td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：1)
示例：
@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
无论您将像素大小设置为＆＃34; max-device-width：＆＃34;当您的屏幕宽度达到该尺寸时，将应用以下属性。
答案 1 :(得分：0)
如果你想制作漂亮的响应式现代网站，最好不要使用表格来布局页面。 如果您想知道原因，请阅读以下文章： http://webdesign.about.com/od/layout/a/aa111102a.htm Why not use tables for layout in HTML?
我建议使用以下https://www.codecademy.com/learn/web课程来学习制作没有桌子的网页。
我同意@Mauzal认为，使网站响应的最佳方式是通过CSS3媒体查询。