为什么我无法在我的html文件中应用padding-top和margin-top?有人可以帮我解决我可能做错的事吗?以下是主要标签:
body{
background-color: #1e2a32;
margin:0 auto;}
#pagewrap{
width:1250px;
height:auto;
margin:auto;
}
添加了html标记:
<!doctype html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" class="csstransforms csstransforms3d csstransitions"><head profile="http://gmpg.org/xfn/11">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cure Sight Laser Center</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="pagewrap"> <!--pagewrap start-->
<!--header start-->
<div id="header">
<div class="top">
<span style="margin-left:50px;">
<img src="images/phone.png">
<span class="text1">+00 000 000 00 </span>
<img src="images/mail.png">
<span class="text1">info@curesightindia.com</span>
<contact><a href="#">Contact Us </a> </contact>
</span>
<span style="margin-left:450px; margin-top:30px;">
<img src="images/twitter.png">
<span style="padding-left:4px;"><img src="images/facebook.png"></span>
<span style="padding-left:4px;"><img src="images/googleplus.png"></span>
<span style="padding-left:4px;"><img src="images/linkedin.png"></span>
<span style="padding-left:4px;"><img src="images/quora.png"></span>
</span>
<!-- search form -->
<div class="top-search-form">
<div class="gdl-search-button" id="gdl-search-button">
</div>
<div class="search-wrapper">
<div class="gdl-search-form">
<form method="get" id="searchform"
action="#">
<div class="search-text">
<input type="text"
value="Search..." name="s" id="s" autocomplete="off" data-default="Search...">
</div>
<input type="submit"
id="searchsubmit" value="Go!">
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div><!--top end-->
<div class="logo"><br>
<span style="margin-left:30px;"><img src="images/logo.png"></span> </div><!--logo
end-->
<div class="navigation">
<br>
<!-- Navigation -->
</div><!--navigation end-->
<div class="bottom">
</div><!--bottom end-->
</div> <!--header end-->
<div id="slider">
</div><!--slider ends-->
<div class="primary">
<div class="primary_box1">
<span class="text2" style="padding-left:50px; padding-top:0px;">Why Choose Us</span>
<br>
<div class="text3";>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box1 end-->
<div class="primary_box2">
<span class="text2" style="padding-left:50px;">Dr. Parimal Desai</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box2 end-->
<div class="primary_box3">
<span class="text2" style="padding-left:50px;">Myths About lasik</span><br>
<div class="text3">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi.</div> </div><!--primary_box3 end-->
</div><!--primary end-->
<div class="secondary">
<div class="side-left">
<div class="side-left_top"> <span class="text5"> Video </span> <a href="#"> <img
src="images/view-all-btn.png" width="57" height="13"></a></div>
<span style="margin-right:30px;"> </span>
</div><!--side-left end-->
<div class="side-right">
<div class="side-right_top"> <span class="text5">Testimonials </span><a href="#">
<span style="margin-left:5%; margin-top:3px;"><img src="images/view-all-btn.png"
width="57" height="13"></span></a>
</div>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident. </p>
<br>
<span style="margin-top:50px; margin-left:20px;"><img src="images/img box.jpg"
width="27" height="28"></span>
<span class="text7"> Lorem Ipsum Dolor</span>
<p class="text6">At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident.</p>
</div><!--side-right end-->
</div><!--secondary end-->
</div><!--content end-->
<!--footer start-->
<div id="footer">
<br><br>
<span class="text4" style="padding-top:50px; padding-left:480px;">Copyright 2013
by Cure Sight Laser Centre. All Right Reserved.</span>
<span style="margin:0px 0 0 50px"></span> <a href="#top">
<img src="images/to-the-top.png" width="67" height="13"></a>
</div><!--footer end-->
</div><!--pagewrap end-->
</body>
</html>
是否发生了因为我已经添加了百分比值? `
答案 0 :(得分:0)
尝试这样的事情:
您有太多html
给您准确的答案 ---请提供CSS
给您更好的答案。
<div id="container">
<header id="main-header">
<h3 id="logo">Some logo</h3>
<nav id="main-nav">
<ul>
<li class="main-nav-link"><a href="#">Nav1</a></li>
<li class="main-nav-link"><a href="#">Nav2</a></li>
<li class="main-nav-link"><a href="#">Nav3</a></li>
</ul>
</nav>
</header>
</div>
* {
margin:0;
padding:0;
}
html, body {
width:100%;
background:lightgray;
}
#container {
width:100%;
}
#main-header {
display:block;
}
#logo {
position:absolute;
top:0;
left:0;
}
#main-nav {
display:block;
background:gray;
margin:5em 6em;
}
#main-nav ul {
list-style:none;
}
#main-nav .main-nav-link {
display:inline-block;
}
#main-nav .main-nav-link a {
display:inline-block;
padding:0.8em 1em;
text-decoration:none;
color:white;
font:bold 1em arial;
}