我开始学习HTML和CSS，我决定尝试用Dreamweaver做一个网站，只是为了练习。但是我很难让我的网站响应。我倾向给予给每个元素固定位置，显然这是非常糟糕的原因，如果你重新调整网站的大小，网站将被完全破坏。出于这个原因，我希望有人能看一下我的代码，告诉我我可以改变什么，使它更响应，从而适应不同的屏幕分辨率。
下面是我的HTML：`
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="../style/style.css" rel="stylesheet" type="text/css">
</head>
<body class="body">
<div id="container"> </div>
<div id="left"> </div>
<div id="content">
<nav>
<a href="index.html"><img class="logo-img" src="../images/logo.png" width="150" height="75" alt=""/>
<img class="insta" src="../images/insta.png" width="20" height="20" alt=""/>
<img class="facebook" src="../images/facebook.png" width="20" height="20" alt=""/>
<ul class="navlist">
<li class="navlistitem"><a href="index.html" class="navlist_style">Home</a> </li>
<li class="navlistitem"><a href="classes.html" class="navlist_style">Classes</a></li>
<li class="navlistitem"><a href="Gallery.html" class="navlist_style">Gallery</a> </li>
<li class="navlistitem"><a href="Location.html" class="navlist_style">Location</a> </li>
<li class="navlistitem"><a href="Contact.html" class="navlist_style">Contact</a></li>
</ul>
</nav>
</div>
<div id="right"> </div>
<img class="ban" src="../images/ban.jpg" width="1139.5px" height="200px" alt=""/>
</body>
</html>and here is the CSS for this HTML code:
nav {
background-color:#3D9CC5;
margin: 0;
padding: 20;
list-style-type: none;
height: 78px;
width: 100%;
}
body {
margin:0;
padding:0;
}
.navlist {
padding: 0px;
list-style-type: none;
overflow: hidden;
}
.navlistitem {
padding-top: 12px;
padding-right: 17px;
padding-bottom: 9px;
padding-left: 1px;
position: relative;
float: left;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
.navlist_style:active {
color:#000000;
}
.navlist_style {
text-decoration: none;
margin-top: 0px;
color: #FFFFFF;
font-style: normal;
font-size: 22px;
text-align: center;
margin-right: 40px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navlist_style:hover {
color:#000000;
}
.navlist_style::before {
}
.logo-img {
float: left;
margin-left: 250px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}
.insta {
padding-top: 30px;
float: right;
margin-right: 30px;
}
.facebook {
float: right;
padding-top: 30px;
margin-right: 7px;
}
.ban {
margin-left: 190px;
}
.body {
margin: 0px;
}
.navlist_style::before {
content: '';
display:block;
height: 5px;
background-color:#000000;
position: absolute;
top: 0px;
width: 0px;
transition: all ease-in-out 250ms;
}
.navlist_style:hover::before {
width:57%;
}
#container {
width: 100%;
min-height: 100%;
position: relative;
}
#left, #right {
width: 17%;
height: 3000px;
position: absolute;
z-index: -1;
}
#left {
left: 0;
background-color:#EDEBEB;
}
#right {
right:0;
background-color:#EDEBEB;
}'如果你重新调整网站的大小，你会看到它是如何被破坏的。另一个问题是，我怎样才能使菜单与导航栏的中心对齐？抱歉，如果它太多了，我知道它不是很好，但我才刚刚开始...谢谢你所做的一切！
我认为解决这个问题的方法之一是，不要设置X像素的宽度，而只是给予页面的%，但不知道如何做到这一点。
1条答案
按热度按时间c3frrgcw1#
正如@Sfili_81所说，在另一个回应中，媒体是你应该给予的。
根据我的经验，我想建议，最好开始设计和开发您的Web应用程序与移动的视图友好模式，即设计您的网页与宽度/尺寸，你可以在移动视图中查看您的网站，然后设计相应的平板电脑视图，然后移动到Web设计模式。
这是因为，它通常被看到，它更容易设置@媒体查询，而不是它变得更容易，因为开发人员pov逐渐从移动的视图-〉平板电脑视图-〉笔记本电脑视图.
关于你的第二个问题“我如何使菜单与导航栏中心对齐？”你能详细说明一下吗？
给予一个尝试Bootstrap自己的库，wrto网页的响应。