Html 我需要一些关于正确定位和显示CSS的建议_Html_Css_Css Position

Html 我需要一些关于正确定位和显示CSS的建议

html css

Html 我需要一些关于正确定位和显示CSS的建议,html,css,css-position,Html,Css,Css Position,我第一次来这里。有点紧张，所以我会直接开始的我目前正在学习CSS，并在各种不同的网站上进行了大量的定位和显示示例所以，为了练习和给自己一些目标，我创建了一个“黑客主题”网页，带有非常基本的导航栏我花了很长时间才把事情弄清楚，我很确定我把很多事情弄糟了，或者用了一些我不需要的东西以下是HTML： <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet

我第一次来这里。有点紧张，所以我会直接开始的

我目前正在学习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>

谢谢你的时间和回答。希望这个话题对我来说会更清楚一点

欢迎来到丛林

我快速浏览了一下你的代码，虽然我不确定你想做什么，但从这里开始就很棒

既然你只是征求意见，我很乐意为你节省一些宝贵的时间。我希望我在几年前第一次开始设计网站时就知道所有这些诀窍，但是我们从错误中学习

首先，Stack Overflow更喜欢特定问题而不是一般问题。如果你的问题太广泛，他们很可能会被否决和关闭

我建议你花更多的时间阅读规则，然后再发布你未来的帖子。这会帮你省去很多挫折；）

话虽如此，我可以在这里和那里陈述一些技巧，但我的回答只是一个小助手，绝对不是排他性的

话虽如此

在设计网站时，您应该始终牢记响应性设计

有几种方法可用于响应式设计：

使用jquerymobile、bootstrap、RWD改造等框架
正确使用
```
最小宽度
```
```
宽度
```
```
最小高度
```
```
填充
```
```
边距
```
，当然还可以使用；（这是我个人的最爱，因为它让你更灵活）

使用百分比代替像素进行测量。你已经猜到了，原因是适应性和灵活性。此外，为

div

指定适当的名称并遵循逻辑设计模式（如页眉、主容器和页脚）也很重要。这只是一些常规的东西，可以帮你省去调试意大利面代码时的麻烦

在其最原始的形式中，响应式设计基本上是设置

最小宽度

，并使用

填充

和

边距

，以便您的设计可以调整并适应任何屏幕

通过对谷歌和W3学校的一些研究，你应该可以很好地开始学习了

如果你需要更多的帮助开始，你可以玩一些非常基本的东西，我做了。它完全响应：

正文{
宽度：100%；
身高：100%；
最小宽度：220px；
最小高度：320px；
位置：相对位置；
字体系列：“BebasNeueRegular”、“Arial窄字体”、Arial、无衬线字体；
保证金：自动0；
}
/*使用父div更好地控制响应模式
你可以把所有东西都放在一个区块内，它会负责让所有东西都响应。不要给街区带零钱。它将自动采用其子对象的大小和形状*/
.街区{
显示：块；
最小宽度：240px；
宽度：自动；
保证金：自动；
利润率最高：1%；
保证金权利：1%；
左缘：1%；
利润底部：1%；
填充：1%；
浮动：左；
位置：相对位置；
高度：自动；
背景：白烟；
}
#集箱{
最小宽度：240px；
宽度：100%；
高度：自动；
显示：块；
保证金：自动0；
背景：白烟；
}
.海德费克斯：之后{
显示：块；
内容：“；
明确：两者皆有；
}
.headerfix{
边框底部：1px实心#e9e9e9；
背景：白色；
显示：块；
位置：固定；
最小宽度：240px；
宽度：100%；
z指数：99；
排名：0；
左：0；
右：0；
高度：自动；
保证金：自动0；
}
#上割台{
填充：1%；
}
#水平菜单{
浮动：对；
}
.主集装箱{
宽度：85%；
高度：自动；
}
.maincontainerfix：之后{
显示：块；
内容：“；
明确：两者皆有；
}
.maincontainerfix{
显示：块；
最小宽度：240px；
宽度：自动；
高度：自动；
宽度：85%；
左：1%；
右：1%；
垫底：1%；
保证金：自动；
利润率最高：15%；
左缘：6.5%；
保证金权利：6.5%；
}
欢迎光临{
文本对齐：对齐；
}
#页脚容器{
最小宽度：240px；
宽度：100%；
背景：白烟；
}
#页脚{
文本对齐：居中；
填充：1%；
保证金：0自动；
}


我是标志













乱数假文
谢谢你访问我的网页


有许多不同的通道的Lorem Ipsum可用，但大多数已经遭受了某种形式的改变，通过注射
/* 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; 
}