Question

我已经开始创建一个基本的组合页面，我开始使用一个简单的标题，我想要在页面的白色空间的顶部中心，它似乎被隐藏或根本不存在。谁能看到我做错了什么？链接到网站：http://me14ch.leedsnewmedia.net/portfolio/portfolio.html

以下是我关注的HTML位：

    <div class="header"><h1>Portfolio</h1></div>

整个网站的整个CSS是：

* {
    margin:0;
    border:0;
    padding:0;

}

body {
    height: 100%;
    width: 100%;    
    overflow: hidden;
}

.navigation li {
    display: inline; 

}

a { 
    color: grey; 
    text-decoration: inherit;
} 


a:hover{
    color: black;

}

.current {
    font-weight:normal;
    margin-bottom:5px;
    border-bottom: 2px solid;
    display: table; 
}

.wrapper {
    margin-left: 0 auto;
    margin-right:0 auto;
    margin-top: 15%;
    margin-bottom: 10%;
    text-align:center;

}

h1 {
    font-family:"Kaushan Script";
    font-size: 4em; 
    color:#FADBC8 ;
}

h2 {
    font-size: 1em;
    text-transform:uppercase;
    text-decoration: none;
    letter-spacing: 0.2em;
    text-decoration: none;
    font-family: "Poiret One";

}

#header {
    text-align:center;
    width: 80%;
    float: left;
    background-color: black;

}

.photo img {
    width: 12%;
    height: 12%;
    border-radius:50%;
    border: 3px solid #FADBC8;
    margin-top:30px;

}

#sidebar {
    float: left;
    margin-right: 5px;
    font-family: "Poiret One";
    text-transform: uppercase;
    letter-spacing: 0.25em;
    height: 100%;
    width: 20%;
    text-align: left;
    position: fixed;
    background: #F9DBC8;

}

#sidebar li {
    list-style-type: none;
    color: white;
    margin-top: 10%;
    margin-bottom: 10%;
    margin-left: 10px;
    padding: 0;

}

/* drop down menu */

#sidebar ul {
    list-style-type:none;
    position: relative;
    width: 50%;
    z-index: 2;
    margin-top: 70%;
}


#sidebar ul li ul {
    margin: 0;  
}

#sidebar ul ul {
    display: none;
}

#sidebar ul li:hover > ul {
    display: block;
}

.social-sidebar-buttons {
    float: right;
    width: 3%;
    margin-top: 31%;
    margin-right: 2%;
}

Answer 1

在你的CSS中你有＆＃39;标题＆＃39;作为id而不是类，使用点符号表示类

.header {
    text-align:center;
    width: 80%;
    float: left;
    background-color: black;

}

添加margin:auto;会将div置于中间位置。它会自动给出任意一侧的间距。

Answer 2

嗯..你定义了一个类，但是设置了一个id选择器。

1。）删除下面的内容。

#header { ... }

2。）替换为。

.header { ... }

3。）你需要定义一个高度，你可以保持你所关联的现有风格错位#header，但下面还有一些额外的建议：

.header { 
     height: 100px; // define height
     margin: 0 auto; // center if you want
 }

Answer 3

您有多个封闭的头标记，但您尚未为标题定义类。

<!doctype html>
<html>
<head>
<style>

.header {
    text-align:center;
    width: 80%;
    float: left;
    background-color: black;

}
</style>
<meta charset="UTF-8">
<title>Chloe Hammond - Digital Portfolio</title>
<link href="stylesheet2.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Bad+Script|Kaushan+Script|Poiret+One'  rel='stylesheet' type='text/css'>


<!--METADATA-->
<meta name="description" content="A digital portfolio page showcasing Chloe Hammond's most recent projects from her New Media degree course at the University of Leeds. "/>

<meta name="keywords" content="chloe, hammond, portfolio, digital, new, media, experience, contact, work, university, student, leeds, intern, internship, freelance"/>
</head>



<body>
<div id="sidebar"> 
    <h2><ul>
        <li><a href="index2.html">Home</a></li>
        <li class="current"><a href="portfolio.html">Portfolio</a>
        <ul>
            <li><a href="design.html">Design</a></li>
            <li><a href="photo.html">Photo</li>
            <li><a href="motion.html">Motion</li>
            <li><a href="web.html">Web</li>
         </ul>
         </li>
        <li><a href="about2.html">About</a></li>
        <li><a href="contact2.html">Contact</a></li> 
    </ul></h2>
    </div>

   <div class="header"><h1>Portfolio</h1></div>

    <div class="social-sidebar-buttons">   

     <a href="http://www.facebook.com/chloe.hammond.7"><img src="facebook2.png" target="_blank" alt="Connect with Chloe on Facebook"/></a>                                              
  <a href="https://twitter.com/ChloeHammondx" title="twitter"><img src="twitter2.png" target="_blank" alt="Connect with Chloe on Twitter" /></a>

<a href="https://instagram.com/chloelouisehammond/" title="Instagram"><img src="instagram2.png" target="_blank" alt="View Chloe's Instagram feed" /></a>

<a href="mailto:chloehammond@live.co.uk" title="email"><img src="mailto2.png" target="_blank" alt="Email Chloe" /></a> 
    </div> 

</div>



</body>
</html>

为什么我的身体里没有任何基本的html内容？

3 个答案: