CSS样式标题，导航，页脚和部分/旁边.....如何使一切都修复？

时间：2015-07-06 09:28:20

标签： html css html5

CSS样式标题，导航，页脚和部分/旁边.....我如何修复所有内容？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<title>
menu
</title>
<style>

#header {position:relevant;
background-color:#59d5d8;
color:white;
text-align:center;
padding:.45px;
backgroung-image:url(C:\Users\ASUS\Desktop\whitelogoooo.gif) top;
}

#nav {display:auto;
position:auto;
line-height:30px;
background-color:#818181;
height:600px;
width:195px;
float:left;
padding:10px;
text-decoration:none;}

ul li{list-style:none;
    width:166px;
    border-bottom: 1px solid #dfdfdf;
    padding: 21.5px
    transition: opacity .2s, margin-left .1s;
    }

ul li a {text-decoration:none;
        font-family:Comic Sans Ms,Arial;
        color:#fff;
        font-size:20px;
        text-transformation:uppercase;
        text-shawdow:0 0 1px rgba(0,0,0,.1);}


#section {
width:540px;
padding:20px;
}
#footer {
background-color:#59d5d8;
color:white;
clear:both;
text-align:center;
padding:5px;
text-align:bottom;}
</style>

</head>
<body>

<div id="header">
<img src="C:\Users\ASUS\Desktop\whitelogoooo.gif" height="400" width="500"        alt="logo" align="middle">
</div>


<div id="nav">
    <ul>
        <li><a href="#">HOME</a></li><br>           
        <li><a href="#">GALLERY</a></li><br>
        <li><a href="#">VIDEOS </a></li><br>
        <li><a href="#"> SLATE</a></li><br>
        <li><a href="#">CONTACT US </a></li><br>
        <li><a href="#">ABOUT US </a></li><br>
    </ul>
</div>

<div id="section">
<aside>
<h1>Welcome :)</h1>
<p>
 Education is the foundation of life, and without education there is no life.
As humans we will one day pass from this earth leaving behind us a legacy and a responsibility to the generations that follow; this responsibility is to lead mankind and to guarantee progression.
This can be achieved by starting at the very beginning, as the solution to any answer has to be solved from the beginning; our children are the answer and our educational system is the problem.
    </p>

    <p>
Nowadays, children are being subjected to a great deal of inappropriate media and distraction. In this current era that we are living in, almost every child from a well-financed family has an electronic device, be it smart phone, or a tab or a laptop.
Most children are easily distracted and are usually attracted towards games and flashy programs/software because it appeals to them.
Their attention span is usually confined to that which interests them and it is very hard for them to focus.
    </p>

    <p>
For example, a child would usually prefer watching a movie than reading a novel. It is very difficult to allow a child to both learn something educational and at the same time be entertained.
However, what the researchers are trying to create is a program that will hopefully include both.
   </p>

    </aside>
    </div>

    <div id="footer">
        <footer>
            Copyright &copy; Kindergarten Together 2015
        </footer>
    </div>

    </body>
    </html>

1 个答案:

答案 0 :(得分：1)

CSS中的错误

  1. position:relevant;不存在。它是position: relative;。
  2. display: auto; position: auto;不存在。它应该是display: initial;或不使用它。 position是static | fixed | absolute。
  3. text-align:bottom;不存在。它是left | center | right | justify。

    4. 希望上述说明有所帮助。

    使用你自己的代码，我做了一个小提琴。看看：

    小提琴：http://jsbin.com/rihowuvepa/edit?html,css,output

    你可能会期待这样的事情吗？

    1. 使用position: fixed;作为项目。
    2. padding使用body。

      3. * {margin: 0; padding: 0; list-style: none; font-family: Segoe UI;}
a {text-decoration: none;}
header, footer, aside {background-color: #ccf; position: fixed; padding: 5px; text-align: center;}
body {padding: 35px 5px 35px 150px;}
header {left: 0; top: 0; width: 100%;}
aside {left: 0; width: 125px;}
footer {bottom: 0; left: 0; width: 100%;}
p {margin: 0 0 10px;}
      <header>Header</header>
<aside>
  <nav>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </nav>
</aside>
<section>
  <p>This is Section!</p>
  <p>Nowadays, children are being subjected to a great deal of inappropriate media and distraction. In this current era that we are living in, almost every child from a well-financed family has an electronic device, be it smart phone, or a tab or a laptop. Most children are easily distracted and are usually attracted towards games and flashy programs/software because it appeals to them. Their attention span is usually confined to that which interests them and it is very hard for them to focus.</p>
  <p>For example, a child would usually prefer watching a movie than reading a novel. It is very difficult to allow a child to both learn something educational and at the same time be entertained. However, what the researchers are trying to create is a program that will hopefully include both.</p>
  <p>Nowadays, children are being subjected to a great deal of inappropriate media and distraction. In this current era that we are living in, almost every child from a well-financed family has an electronic device, be it smart phone, or a tab or a laptop. Most children are easily distracted and are usually attracted towards games and flashy programs/software because it appeals to them. Their attention span is usually confined to that which interests them and it is very hard for them to focus.</p>
  <p>For example, a child would usually prefer watching a movie than reading a novel. It is very difficult to allow a child to both learn something educational and at the same time be entertained. However, what the researchers are trying to create is a program that will hopefully include both.</p>
  <p>Nowadays, children are being subjected to a great deal of inappropriate media and distraction. In this current era that we are living in, almost every child from a well-financed family has an electronic device, be it smart phone, or a tab or a laptop. Most children are easily distracted and are usually attracted towards games and flashy programs/software because it appeals to them. Their attention span is usually confined to that which interests them and it is very hard for them to focus.</p>
  <p>For example, a child would usually prefer watching a movie than reading a novel. It is very difficult to allow a child to both learn something educational and at the same time be entertained. However, what the researchers are trying to create is a program that will hopefully include both.</p>
</section>
<footer>This is Footer</footer>

相关问题
最新问题