0
按下變焦我創建了一個設計，但是當我或縮小分歧縮小正在當在CSS
這裏我師正在爲我的CSS：
.date {
color: #CCCCCC;
font-family: georgia;
font-size: 14px;
font-style: italic;
margin-left:67px;
}
.blank {
background:#CCCCCC;
width:100%;
height:5px;
}
}
.menu {
}
.menu_item {
margin:20 5;
list-style:none;
float:left;
}
.menu_item li {
display:inline;
margin:10px;
}
.menu_item li a {
text-decoration:none;
color:#ffffff;
font-size:14px;
font-family:Arial;
}
.menu_item li a:hover {
color:#999999;
}
.sitelogo:hover h1 {
color:#999999;
}
.sitelogo {
text-decoration:none;
}
.menu_item_right li {
display:inline;
/*margin:10px;*/
color:#ffffff;
font-size:14px;
font-family:Arial;
}
.menu_item_right li img:hover {
opacity:1;
}
.menu_item_right li img {
opacity:.5;
}
.menu_item_right li a {
text-decoration:none;
color:#ffffff;
font-size:14px;
font:bold;
}
.menu_item_right li a:hover {
color:#999999;
}
h1 {
margin:5px 0 0 0;
color:#ffffff;
font-size:28px;
font-family:'PT Sans', sans-serif;
}
h3 {
margin:10px 10px 10px 70px;
color:#333333;
font-size:15px;
font-family: Arial;
}
.italic_text {
margin-left:9px;
float:left;
color: #CCCCCC;
font-family: georgia;
font-size: 14px;
font-style: italic;
}
.newscontent a {
margin-left:68px;
float:left;
font-family:Arial;
color:#3399cc;
font-size:12px;
text-decoration:none;
}
.newsmaincontent1 a {
margin-left:10px!important;
font-family:Arial;
color:#3399cc;
font-size:12px;
text-decoration:none;
}
.newsmaincontent {
float:left;
font-family:Arial;
color:#666666;
font-size:12px;
margin:15px 15px 28px 68px;
}
.italic_text1 {
margin-left:10px;
float:left;
color: #CCCCCC;
font-family: georgia;
font-size: 14px;
font-style: italic;
}
.newscontent1 h3 {
margin:10px;
color:#333333;
font-size:15px;
font-family: Arial;
}
h2 {
margin:10px 10px 0px 0px;
color:#333333;
font-size:18px;
font-family:'PT Sans', sans-serif;
}
.newscontent1 a {
margin-left:10px;
float:left;
font-family:Arial;
color:#3399cc;
font-size:12px;
text-decoration:none;
}
.newsmaincontent1 {
float:left;
font-family:Arial;
color:#666666;
font-size:12px;
margin:15px 15px 28px 10px;
}
.site-title {
margin:0 0;
color:#dcf1ff;
float:left;
margin-left:10%;
}
.site_text {
font-size:12px;
font-family:Arial;
color:#dcf1ff;
}
.menu_item_right {
list-style:none;
float:right;
margin-right:10%;
}
.footer {
width:100%;
padding-top:2%;
margin-top:2%;
height:200px;
background:#eaeaf7;
}
.footer_menu {
text-align:center;
list-style:none;
display:inline;
margin-left:31%;
margin-top:10%;
}
.footer_menu_lower {
color:#999999;
text-align:center;
width:38%;
margin-left:32%
}
.footer_menu li {
display:inline;
margin:5px;
font:Arial;
font-size:15px;
color:#999999;
}
.footer_menu li a {
text-decoration:none;
color:#3399cc;
}
.header {
width:100%;
height:60px;
background-color:#69bef6;
border-bottom:5px;
color:#e6e6f3;
}
.wrap {
margin-left:10%;
margin-right:10%;
width:80%;
}
.leftContent {
width:32%;
float:left;
background:#f2f2f9;
/*overflow:hidden;*/
}
.leftcontent1 {
width:100%;
/*padding:10px 10px 10px 10px;
*/
float:left;
background:#FFFFFF;
margin-top:2%;
/*margin:10px*/
;
}
.imgbtn {
width:60px;
height:36px;
background-image:url(../images/dateBg.png);
margin-top:3%;
float:left;
}
.leftcontentgraph {
width:100%;
float:left;
background:#FFFFFF;
height:200px;
}
.rightContent {
width:65%;
float:right;
}
.leftcontentgraphborder {
background:#A8CA5C;
width:100%;
height:5px;
}
.rightcontentupperborderblog {
background:#A8CA5C;
width:100%;
height:5px;
}
.rightcontentupperborder {
background:#5DBCD2;
width:100%;
height:5px;
}
.rightcontentlowerborderblog {
background:#A8CA5C;
width:100%;
height:5px;
}
.rightcontentlowerpartleft1border {
background:#5DBCD2;
width:100%;
height:5px;
}
.rightcontentlowerpartright1border {
background:#5DBCD2;
width:100%;
height:5px;
}
.rightcontentlowerpartright1border1 {
background:#A8CA5C;
width:100%;
height:5px;
}
.rightcontentlowerpartright1border3 {
background:#5DBCD2;
width:100%;
height:5px;
}
.rightcontentupperpart {
width:100%;
float:left;
background:#FFFFFF;
height:300px;
}
.rightcontentlowerpart {
width:100%;
float:left;
/*background:#f2f2f9;*/
}
.clear {
clear:both;
}
.rightcontentlowerpartleft {
width:49%;
float:left;
}
.rightcontentlowerpartright {
width:49%;
float:right;
}
.rightcontentlowerpartleft1 {
width:100%;
float:left;
background:#FFFFFF;
margin-top:2%;
/*margin:10px*/
;
}
.rightcontentlowerpartright1 {
width:100%;
float:left;
background:#FFFFFF;
margin-top:2%;
/*margin:10px*/
;
}
}
/* for blog*/
.blogpage {
width:100%;
}
.leftcontentgraphborderblog {
background:#5DBCD2;
width:100%;
height:5px;
}
.leftContentblog {
width:756px;
float:left;
}
.rightContentblog {
width:300px;
float:right;
}
.rightcontentupperpartblog {
width:100%;
float:left;
background:#FFFFFF;
height:300px;
}
.rightcontentlowerpartblog {
width:100%;
float:left;
background:#000000;
}
.rightcontentlowerpartblogcontent {
width:100%;
background:#FFFFFF;
}
下面是HTML
<body bgcolor="#f2f2f9" style="margin:0 auto;overflow:scroll">
<div style="margin:0 auto; " ><!-- main div start-->
<!--header start-->
<div class="header"><!-- div header start-->
<div class="menu"><!-- div menu start-->
<a class="sitelogo" href="#">
<div class="site-title"><!-- div site-tittle start-->
<h1>
BIG DATA
</h1>
<span class="site_text"> <!-- div site text start-->
Powered by PureAnalyzer
</span> <!--div site text close-->
</div> <!-- div site tittle close -->
</a>
<ul class="menu_item">
<li>
<a href="#"><b>HOME</b></a>
</li>
<li>
<a href="#"><b>NEWS</b></a>
</li>
<li>
<a href="#"><b>CAREERS</b></a>
</li>
<li>
<a href="#"><b>BLOG</b></a>
</li>
</ul>
<ul class="menu_item_right">
<li>
<a href="#"><b>SUBSCRIBE FOR ALERTS</b></a>
</li>
<li>
<a href="#"><img class="icon_image" src="images/facebook.png" /></a>
</li>
<li>
<a href="#"><img src="images/twitter.png" /></a>
</li>
<li>
<a href="#"><img src="images/googlePlus.png" /></a>
</li>
<li>
<a href="#"><b>LOGIN</b></a>
</li>
</ul>
</div>
</div>
<!--header ends-->
<div class="clear"></div>
<!--page body start-->
<div class="wrap">
<div class="blogpage">
<!--left part start-->
<div class="leftContentblog" >
<H2>Blog</H2>
<div class="leftcontentgraph">
<div class="leftcontentgraphborderblog"></div>
</div>
<div class="clear"></div>
<div class="leftcontent1">
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="date">5Jan,2013</div>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<div class="leftcontent1">
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="date">5Jan,2013</div>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<div class="leftcontent1">
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="date">5Jan,2013</div>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<div class="leftcontent1">
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="date">5Jan,2013</div>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<div class="leftcontent1">
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="date">5Jan,2013</div>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<div class="leftcontent1">
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="date">5Jan,2013</div>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
</div>
<!--left part ends-->
<!--right part start-->
<div class="rightContentblog">
<h2>CATEGORY</h2>
<div class="clear"></div>
<div class="rightcontentupperpartblog">
<div class="rightcontentupperborderblog"></div>
<div class="newscontent"><h3>lorem ipsum quia dolor sit amet, </h3>
<div class="newsmaincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<div class="clear"></div>
<h2>ARCHIVE</h2>
<div class="clear"></div>
<div class="rightcontentlowerpartblog">
<div class="clear"></div>
<div class="rightcontentlowerpartblogcontent">
<div class="rightcontentlowerborderblog">
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
</div>
</div>
</div>
<!--right part ends-->
</div>
</div>
<!--page body ends-->
<div class="clear"></div>
<!--footer start-->
<div class="footer">
</div>
<!--footer ends-->
</div>
<!-- main div ends-->
</body>
當我按下變焦在所有的DIV離開那裏的地方，這個問題也occor當我按下縮放出
更新html代碼也 – saby87
如果你不包括你的HTML，你不可能得到你需要的幫助。 –
@ saby87：請做。 –