请考虑我是 CSS 的新手!
我正在尝试构建一个具有一些 CSS 属性的简单网页，但问题是我的网页在完全最大化的窗口中没有问题但是当我尝试重新调整浏览器窗口大小时设计出现故障.
网页来源:
<html>
<head>
<title>Registration From</title>
<style type="text/css">
body
{
background-color:#d2d2ff;
margin:0;
padding:0;
width:100%;
}
header
{
margin:0px;
padding:0px;
height:90px;
background-color:#a0b7e0;
box-shadow:0px 0px 90px #00000f;
}
footer
{
margin-top:40%;
height:40px;
background-color:#a0b7e0;
box-shadow:0px 0px 30px #00000f;
position:relative;
}
.text_h
{
text-align:center;
color:white;
font-size:65px;
text-shadow:2px 2px 1px #555555;
}
.text_f
{
text-align:center;
color:#ffffff;
font-size:15px;
text-shadow:2px 2px 1px #555555;
padding-top:0.7%;
}
cont1
{
height:43%;
width:12%;
border:1px solid black;
background-color:#c9c9c9;
float:left;
margin-top:2%;
margin-left:1%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
}
cont2
{
height:73%;
width:84%;
border:1px solid black;
background-color:#e2e2e2;
float:left;
margin-top:2%;
margin-left:2%;
border-radius:7px;
box-shadow:0px 2px 15px #00000f;
vertical-align: top;
}
.ql
{
text-align:left;
color:#829fd7;
font-size:20px;
font-weight:bold;
text-shadow:0px 0px 1px #ffffff;
padding-left:4%;
}
.list
{
color:#1f1f1f;
font-size:18px;
text-shadow:0px 1px 1px #555555;
list-style-type: circle;
}
a
{
text-decoration:none;
}
a:hover
{
color:white;
font-weight:bold;
padding-left:4%;
}
</style>
</head>
<body>
<header>
<div class="text_h">Basic Homepage</div>
</header>
<cont1>
<p class="ql">Quick Links</p>
<ul class="list">
<li><a href="#home">Homepage</a></li><br>
<li><a href="#contact">Contact Us</a></li><br>
<li><a href="#abut">About Us</a></li><br>
<li><a href="#msg">Message</a></li><br>
<li><a href="#reg">Registration</a></li>
</ul>
</cont1>
<cont2></cont2>
<footer>
<div class="text_f">© 2014 Neeraj Singh</div>
</footer>
</body>
</html>
任何人都可以建议我正确的方法吗？
最佳答案
所以我发现您的代码存在一些问题，我肯定会继续解决:
1) <cont1>和 <cont2>不是有效的 HTML 标记。如果要区分两个相同的标签，请使用 classes or ids .
2) 您文档的顶部缺少一些使页面正确呈现的关键元素。替换 <html>与 <!DOCTYPE html>并添加以下 meta tags在你的 <title> 之前标签:
<meta charset='utf-8' />
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
至于您的问题，这取决于您对设计何时“崩溃”的定义。如果你在谈论标题的自动换行，你可以应用 mid-width到您的 css，当屏幕变得太小时，这将强制页面滚动。为避免将来出现此问题，您可以将 min-width在 html 上和 body页面的元素。喜欢:html, body { min-width:800px;} .希望这有助于您入门!
关于html - 元素在窗口调整大小时中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24333852/