0

请查看代码其工作正常，直到我缩放页面...缩放页面后，页面被扭曲，其水平菜单相互碰撞请查看代码，如果有人能告诉我“不该做什么”而不是提供正确的，那就太好了CSS 部分为此我是新手，想学习方面而不是从各种来源复制这里是 CSS 部分..

body{ background-color:#603}
div#hor ul{ position:relative; left:16%; }
 div#hor li,div#ver li{  float:left;list-style-type:none; background-color:#603; border-radius:22px; margin:5px; }
div#hor a,div#ver a{text-decoration:none; 
 padding-left:32px; padding-right:32px;
 font-family:"Comic Sans MS", cursive; 
 line-height::100px;padding-right: 32px;
 padding-left: 32px;
 display: block;
 line-height: 40px;
 color:#fff;
}
div#hor a:hover{background-color:#fff;color: #603;border-radius:22px; 
    }
    div#hor a:focus{background-color:#fff;color:#603;border-radius:22px; font-weight:bold;
    }
    div#ver{  position:relative; top:100px;}
    div#ver ul{ position:relative; left:-50%; float:left;  }
    div#ver li{ float:none; margin-bottom:20px;}

    div#ver a:hover,div#ver a:focus{border-radius:22px;background-color:#fff;color: #603}

    div#ver a:focus{ font-weight:bold; }


  # here is the html part ...#



  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <link rel="stylesheet" type="text/css" href="mystyle.css"  />


    </head>

    <body>
    <div id="hor">
    <ul>
    <li ><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a  href="#">Contact</a></li>
    </ul>
    </div>
    <div id="ver"> 
    <ul>
    <li ><a href="#">Java</a></li>
    <li><a href="#">Php</a></li>
    <li><a href="#">Asp.net</a></li>
    <li><a href="#">Android</a></li>
    <li><a  href="#">Iphone</a></li>
    </ul>

     </div>


    </body>
    </html>
4

2 回答 2

0

您的所有div设置都在 中px，这意味着像素。例如，如果用户使文本变大，则像素不会缩放，因为他们屏幕上的像素仍然是相同的大小。如果您调整 div 的大小em，表示“当前字体中字母 m 的宽度”，或者%事情应该可以更好地缩放。此外，一旦您习惯了使用 CSS，请尝试使用Twitter bootstrap等框架来让您的生活更轻松。

于 2013-02-04T18:00:09.950 回答
0

检查这个 CSS 和 HTML 并用现有的替换它，请告诉我

   body
    {
background-color:#603;  
}
.page
{
width:960px;
margin:0px auto 0px auto;
}
.clear
{
clear:both;
}
div#hor
{

}
div#hor ul
{ 
list-style-type:none;
 }
div#ver
{
float:left;
}
 div#hor li
{  
float:left;
background-color:#603; 
border-radius:22px; 
}

div#ver
{

}
div#ver li
{
list-style-type:none; 
background-color:#603; 
border-radius:22px; 
margin:5px; 
}
div#hor a,div#ver a
{
text-decoration:none; 
 padding-left:32px;
 padding-right:32px;
 font-family:"Comic Sans MS", cursive; 
 line-height:100px;
display: block;
 line-height: 40px;
 color:#fff;
}
div#hor a:hover
{
background-color:#fff;color: #603;border-radius:22px; 
}
div#hor a:focus
{
background-color:#fff;color:#603;border-radius:22px; font-weight:bold;
}
div#ver
{
//position:relative; top:100px;
}
div#ver ul
{ 
position:relative;float:left;  
}
div#ver li
{
//float:none; margin-bottom:20px;
}

div#ver a:hover,div#ver a:focus
{
border-radius:22px;background-color:#fff;color: #603
}

div#ver a:focus
{
 font-weight:bold; 
}

//HTML部分//

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="mystyle.css"  />


</head>

<body>
<div class="page">
<div id="hor">
<ul>
<li ><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a  href="#">Contact</a></li>
</ul>
</div>

<div class="clear"></div>

<div id="ver"> 
<ul>
<li ><a href="#">Java</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Asp.net</a></li>
<li><a href="#">Android</a></li>
<li><a  href="#">Iphone</a></li>
</ul>

 </div>

</div>

</body>
</html>
于 2013-02-04T18:16:31.933 回答