个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:25:43 25 4
gpt4 key购买 nike

<分区>

第一次来。有点紧张，所以我会直接进入它。

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

感谢您抽出宝贵时间和任何答复。希望这个话题对我来说会变得更清楚一点。

25 4 0
文章推荐： c++ - 从复制构造函数调用构造函数
文章推荐： javascript - 在 Javascript 和服务器端语言之间表示数据
文章推荐： c++ - 如何实现我的自定义范围 for 循环？
文章推荐： c++ - 传递对对象 C++ 的引用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com