【发布时间】：2022-11-23 22:36:09
【问题描述】：
我开始学习 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 像素，只给出页面的 %，但不确定该怎么做。感谢每一个回复，谢谢！
【问题讨论】：
-
看看媒体查询，最好使用 flexbox 或 grid 而不是浮动元素