Question

我正在进入HTML + CSS，我正在学习如何编码。我只想在页面顶部找到标题和导航栏。我研究了几天，似乎没有任何工作。

这是我的HTML代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="aboutmecss.css" rel="stylesheet" type="text/css">
</head>




<body>
<header>
<h2>My website</h2>
    <ul>
        <li class="activemenutab"> <a href="aboutme.html">About Me </a></li>
        <li> <a href="accomplishments.html">Accomplishments </a></li>
        <li> <a href="certs.html">Certifications and Skills </a></li>
        <li> <a href="extra.html">Extracirriculars </a></li>
        <li> <a href="portfolio.html">Portfolio </a></li>
        <li> <a href="contact.html">Contact </a></li>
    </ul>
</header>



    <footer>
          &copy; 2015
    </footer>


</body>
</html>

这是我的CSS：

@charset "UTF-8";



html {
    background-color:#B5B5B5
}

header {
    position:absolute;
    left:0;
    right:0;
    top:0; 
    margin:0;
}

h2 {
    background-color:#000000;
    color:#d9d9d9;
    text-align:center;
    font-size: 2.8em;
}

ul {
    list-style-type:none; /* takes symbols away from unordered list */
    margin:0; /* shifts ul up against h2, and shifts it up in the header box */
    background-color:#d9d9d9;
    font-family:Baskerville, serif;
    text-transform:uppercase;
    position:absolute; /*drags bar over for the left and right commands below */
    left:0;
    right:0;
    text-align:center; /* centers nav bar */
    font-size:0; /* this takes away the default white spaces at the end of the <li>...have to resize font in li */
}

li {
    display:inline-block; /* makes nav go horizontal */
    font-size:14px; /* size of navbar text ... !important has to be in px because ul has font size = 0*/

}

li:hover {
    background:#000000; /* changes tab to black */
    color:#E09635; /* changes text to color */
    transition-duration: 0.3s; /* response time on navbar icon hover */
    transition-timing-function: ease;
    transition-delay: 0; /* zero delay to have transtion occur */
}

a {
    text-decoration:none; /*removes underline from a links */
    color:inherit; /* takes color from parent, in this case, li */
    display:block; /* makes the a box relatable to li */
    padding: 10px;  /* creates padding around a box for navbar and adds to clickable region because of anchor */
}

.activemenutab { /* this is the class used to make the one you are on highlighted ... needs to be swithched in html */
    background-color:#EDEDED;
    color:#E09635;
}

/* ---------- body below */

/* ---------- footer below */

footer {
    text-align:center;
    background-color:#000000;
    color:#EDEDED;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    padding:.2em;
}

我想要做的就是在浏览器的顶部设置Header，并在其下面设置导航栏。我已经尝试了很多东西，而我可以得到的另一种正确的格式就是当我在CSS中使用它时

* {
padding:0;
margin:0;
}

有什么想法吗？

Answer 1

尝试将h2添加到h2 { background-color:#000000; color:#d9d9d9; text-align:center; font-size: 2.8em; margin: 0; }。

String content = //text you posted above

Pattern p = Pattern.compile(".bindPopup\\('(.*)'\\)");
Matcher m = p.matcher(content);

while (m.find()) {
      String text = m.group(1);

      String htmlStripped = text.replaceAll("<[^>]*>", " ");

      System.out.println(htmlStripped);

}

Example in JSFiddle

Answer 2

尝试执行此类操作而不是head元素：

<div class="header"> ... </div>

然后在您的样式表中，只需将header重命名为.header

像这样：

.header {
    position:absolute;
    left:0;
    right:0;
    top:0; 
    margin:0;
}

Answer 3

我想你想要像fiddle example

这样的东西

.header {
position:relative;
width:100%;
}

Answer 4

说实话，我不知道为什么会有差距。不应该。但是我确实接受了你的代码并对其进行了编辑，并提出了一个有效的廉价产品。

刚做了一点修改并添加了

margin-top:-42px;

在你的头文件和ul属性中的css中。测试它，它的工作原理。

Answer 5

您的代码必须包含ID或类。将其更改为：

<div class="header">

在您的CSS中引用它时，您需要：

.header {
*your code*
}

如何获得标题和导航栏？

5 个答案: