个人中心
gpt4 book ai didi

jquery - CSS 导航栏屏幕分辨率

转载 作者：行者123 更新时间：2023-11-28 01:19:24 24 4
gpt4 key购买 nike

我在编写一些代码时遇到了一些问题。在我的模板页面上，我有一个带有 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">&nbsp;</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 &amp; 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>
          &nbsp;</p>
      </form></th>
  </tr>
  <tr>
    <th height="20" colspan="10" scope="col">&nbsp;</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">&nbsp;</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>&nbsp;</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">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

最佳答案

我个人会使用此处的 CSS3 媒体查询 http://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

例子:

@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;
    }
}

无论您在“max-device-width:”中将像素大小设置为什么，当您的屏幕宽度达到该大小时，将应用以下属性。

关于jquery - CSS 导航栏屏幕分辨率，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34419941/

24 4 0
文章推荐： javascript - 如何验证我的预订日期？
文章推荐： css - 对齐居中的垂直和水平不规则缩略图
文章推荐： html - 更改布局时的 CSS 对齐
文章推荐： html - 为什么 right ctrl right shift 没有将文本右对齐？