我第一次来这里。有点紧张，所以我会直接进入它。
我目前正在学习CSS，并且已经在各种不同的网站上完成了许多不同的定位和显示示例。
所以，为了练习并给自己一些目标，我创建了一个“黑客主题”网页，带有非常基本的导航栏。
我花了这么长时间才找到适当的东西，并且我很确定我已经搞砸了很多东西，或者使用了我没有的东西。
这是HTML：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<title> Hacker Games Directory </title>
</head>
<body>
<!--EDIT THESE LINKS TO LEAD TO DIFFERENT CONTENT PAGES.
THIS CAN BE CONSIDERED THE WEB PAGE NAVIGATION BAR UNTIL I LEARN BETTER. -->
<div id="navbar">
<ul>
<li><a href="home.html">Home </a></li>
<li><a href="about.html"> About</a> </li>
<li><a href="contact.html"> Contact Us</a></li>
<li><a href="links.html"> Links </a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="reviews.html">Reviews</a></li>
</ul>
</div>
<!--THIS DIV CAN MOVE THE PAGE HEADING AND INTRO SLOGAN AROUND. WILL CHANGE EVENTUALLY FOR A GRAPHIC IMAGE -->
<div class="sitelogo">
<div class="container">
<h1> Hacker Games Directory</h1>
<p> Find the latest info about hacker games here! </p>
</div>
</div>
<!--SideBar for Navigation to Games -->
<div class="sidebar">
<div class="sidelinks">
<ul>
<li><a href="https://www.hackerexperience.com" target="_blank">Hacker Experience </a></li>
<li><a href="https://www.hackerexperience.com">Hacker Experience 2 </a></li>
<li><a href="https://www.indiedb.com/hacknet"> HackNet </a></li>
<li><a href="http://www.hacker-project.com">Hacker-Project </a></li>
<li><a href="http://www.slavehack.com">SlaveHack </a></li>
<li><a href="http://www.introversion.com">Uplink </a></li>
<li><a href="http://www.hackerforever.com">Hacker Forever </a></li>
<li><a href="http://www.secretrepublic.net">Secret Republic </a></li>
<li><a href="https://www.codelinkv2.com">CodeLink V2 </a></li>
<li><a href="http://www.streethacker.com">Street Hacker </a></li>
</ul>
</div>
</div>
<!--CONTAINS THE CONTENT IN THE CENTRE OF THE PAGE, NOT INCLUDING THE TITLE AND PARAGRAPH BELOW THE NAVBAR -->
<div class="centrestuff">
<h3>Hacker Games Directory</h3>
<p>Thank you for visiting my webpage. This is a site dedicated to the truly addictive PC games which are hacker themed. </p>
<p>Although they are little known, they can take away hours of your day </p>
<p>Use the bar on the side to have a look through what <em> I believe </em> are the best hacker games currently active. </p>
<p>The bar along the top leads to reviews, videos, guides and contacts. If you believe I have missed something out, or misjudged a game i've mentioned, please feel free to leave a message and let me know. </p>
</div>
</body>
</html>
这是相关的CSS：
/* Cascading StyleSheet for my Hacker Themed Webpage.
I'm probably mixing up which positioning value to use where, and i've probably mixed the wrong types all over the place.
I'm happy that I got the page sitting "roughly" the way I want, but I know I can improve this A LOT
Created 8/21/2015 and linked to index.html. */
body {
background-color:black;
} /* background may be changed at later date for an image file */
#navbar { /* styles and positions the navigation bar bordering etc */
position:fixed;
list-style-type:none;
margin-top:-20px;
margin-bottom:50px;
margin-left:110px;
padding:0;
overflow:hidden;
display:inline;
}
#navbar li { /* edit this to increase space between navbar buttons, and their margins*/
width:100px;
margin-left:50px;
margin-right:30px;
list-style-type:none;
display:inline-block;
}
a { /* changes the appearance of the links themselves within the navbar*/
display:block;
width:100px;
height:30px;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size:16px;
font-family:Cursive;
color:lime;
background-color:black;
border-radius:10px;
border-color:red;
border-style:solid;
border-width:2px;
margin-right:5px;
}
a:hover {
font-weight:bold;
color:red;
background-color:blue;
}
.sidebar {
float:left;
list-style-type:none;
position:absolute;
margin-left:-50px;
margin-top:50px;
display:block;
height:500px;
}
.sidebar a {
padding-top:5px;
width:200px;
height:50px;
text-align:centert;
text-decoration:none;
font-weight:bold;
font-size:16px;
font-family:Cursive;
color:lime;
background-color:black;
border-radius:10px;
border-color:red;
border-style:solid;
border-width:2px;
}
.sidebar a:hover {
font-weight:bold;
color:red;
background-color:blue;
}
.sidelinks li { /* ADDING THIS ALLOWED ME TO CHANGE THE LIST STYLE, WHICH I HAD TROUBLE WITH REMOVING UL DOTS FROM MY BAR */
padding-top:5px;
list-style-type:none;
}
.sitelogo {
font-family:Cursive;
font-size:24px;
color:lime;
position:absolute;
margin-left:210px;
margin-top:50x;
margin-bottom:30px;
}
.container p { /* lets me individually manage the intro/slogan below the page heading. */
text-align:center;
margin-top:25px;
margin-left:-15px;
color:blue;
}
/*This is used to place the content in the middle of the page. It feels very clunky and messy at the moment so i want to try to learn page layouts with CSS better. Positioning and display is where i mess up. If i get the hang of that, i can create a distinctive looking content area. */
.centrestuff {
position:absolute;
margin-left:240px;
margin-top:200px;
color:red;
}
感谢您的时间和任何答案。希望这个话题对我来说会更加清晰。
答案 0 :(得分：1)
欢迎来到丛林！
我快速浏览了你的代码，即使我不确定你要做什么，但在那里开始很棒！
由于您只是要求提供建议，我很乐意为您节省宝贵的时间。我多年前第一次开始设计网站时，我希望我知道所有这些技巧，但是哦，我们会从错误中吸取教训。
首先，Stack Overflow更倾向于将特定问题解释为一般问题。如果你的问题太广泛，他们最有可能被投票和关闭。
我建议你在发布未来的帖子之前花更多的时间阅读规则。它会为你节省很多挫折;）
话虽如此，我可以在这里和那里陈述一些技巧，但我的答案只是一个小帮手，绝对不是独家！
据说......
在设计网站时，您应始终牢记响应式设计。
有几种方法可用于响应式设计：
使用JQuery Mobile，bootstrap，RWD Retrofit等框架，[等等];
通过正确使用min-width width min-height padding margin来完成yourself，当然还可以使用media queries; （这是我个人的最爱，因为它可以让你更灵活。）
使用百分比进行测量而不是像素。你猜对了，这就是适应性和灵活性。此外，您必须为divs指定正确的名称，并遵循逻辑设计模式，例如header，main_container和footer。这只是常规的东西，可以帮助您避免尝试调试意大利面条代码的麻烦。
在最原始的形式中，响应式设计基本上设置min-width并使用padding和margin进行游戏，以便您的设计可以调整并适应任何屏幕。
通过对Google和W3学校的一些研究，它应该让你开始就好了！
如果你需要更多的帮助，你可以玩一些非常基本的东西。它完全响应：
body {
width:100%;
height:100%;
min-width:220px;
min-height:320px;
position:relative;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
margin:auto 0;
}
/*Using parents div to better control the responsive pattern
you can put everything inside of a block and it will take charge of getting everything responsive. Dont bring any change to the block. It will automatically take the size and the shape of its child.*/
.block{
display:block;
min-width:240px;
width:auto;
margin:auto;
margin-top:1%;
margin-right:1%;
margin-left:1%;
margin-bottom:1%;
padding:1%;
float:left;
position:relative;
height:auto;
background:whitesmoke;
}
#header_container{
min-width:240px;
width:100%;
height:auto;
display:block;
margin:auto 0;
background:whitesmoke;
}
.headerfix:after {
display: block;
content: " ";
clear: both;
}
.headerfix {
border-bottom:1px solid #e9e9e9;
background:white;
display: block;
position:fixed;
min-width:240px;
width:100%;
z-index:99;
top:0;
left:0;
right:0;
height:auto;
margin:auto 0;
}
#top_header{
padding:1%;
}
#horizontal_menu{
float:right;
}
.main_container{
width:85%;
height:auto;
}
.maincontainerfix:after {
display: block;
content: " ";
clear: both;
}
.maincontainerfix {
display: block;
min-width:240px;
width:auto;
height:auto;
width:85%;
padding-left:1%;
padding-right:1%;
padding-bottom:1%;
margin:auto;
margin-top:15%;
margin-left:6.5%;
margin-right:6.5%;
}
.welcome_msg{
text-align:justify;
}
#footer_container{
min-width:240px;
width:100%;
background:whitesmoke;
}
#footer{
text-align:center;
padding:1%;
margin:0 auto;
}<body>
<div id="header_container" class="headerfix">
<div id="top_header">
<span> im the logo</span>
<div id="horizontal_menu">
<a href="home.html">Home </a>
<a href="about.html"> About</a>
<a href="contact.html"> Contact Us</a>
<a href="links.html"> Links </a>
<a href="videos.html">Videos</a>
<a href="reviews.html">Reviews</a>
</div>
</div>
</div>
<div class="main_container maincontainerfix">
<div class="block">
<div class="vertical_sidebar">
<ul id="vertical_menu">
<li class="vertical-menu-link">
<a href="https://www.hackerexperience.com" target="_blank">Hacker Experience </a></li>
<li class="vertical-menu-link"><a href="https://www.hackerexperience.com">Hacker Experience 2 </a></li>
<li class="vertical-menu-link"><a href="https://www.indiedb.com/hacknet"> HackNet </a></li>
<li class="vertical-menu-link"><a href="http://www.hacker-project.com">Hacker-Project </a></li>
<li class="vertical-menu-link"><a href="http://www.slavehack.com">SlaveHack </a></li>
<li class="vertical-menu-link"><a href="http://www.introversion.com">Uplink </a></li>
<li class="vertical-menu-link"><a href="http://www.hackerforever.com">Hacker Forever </a></li>
<li class="vertical-menu-link"><a href="http://www.secretrepublic.net">Secret Republic </a></li>
<li class="vertical-menu-link"><a href="https://www.codelinkv2.com">CodeLink V2 </a></li>
<li class="vertical-menu-link"><a href="http://www.streethacker.com">Street Hacker </a></li>
</ul>
</div>
</div>
<div class="centrestuff">
<h3>Lorem Ipsum</h3>
<div class="welcome_msg">
Thank you for visiting my webpage!<br><br>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
<br><br>
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 leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="block">
Put something inside
</div>
<div class="block">
Put something inside
</div>
<div class="block">
Put something inside
</div>
<div class="block">
Put something inside
</div>
<div class="block">
Put something inside
</div>
<div class="block">
Put something inside
</div>
</div>
<div id="footer_container">
<div id="footer">
All Rights Reserved © Lorem Ipsum 2015
</div>
</div>
</body>
希望它有所帮助！