Question

启动文本编辑器（记事本），然后打开javajam.css文件。为名为wrapper的id添加样式，其宽度设置为80％，margin-right设置为auto，margin-left设置为auto。
启动文本编辑器，然后打开index.html文件。添加HTML代码以配置分配给“包装”或包含的id包装器的div元素，即body部分中的代码。在浏览器中保存并测试index.html页面，您会发现页面内容现在位于浏览器视口中心，如图3.27所示（http://imgur.com/0RWXMRX）

我的index.html文件出了什么问题我不能集中身体？指数。 HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title> JavaJam Coffee House </title>
<meta charset="utf-8">
<link href="javajam.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">  
       <header>
        <h1> JavaJam Coffee House </h1>
    </header>
    <nav>   
            <b><a href="index.html">Home</a> &nbsp; 
            <a href="menu.html">Menu</a> &nbsp; 
            <a href="Music.html">Music</a> &nbsp;
            <a href="Jobs.html">Jobs</a></b>
        </nav>

        <ul>
            <li>Specialty Coffee and Tea</li>
            <li>Bagels, Muffins, and Organic Snacks</li>
            <li>Music and Poetry Readings</li>
            <li>Open Mic Night</li>
        </ul>
        <p>12312 Main Street<br>
        Mountain Home, CA 93923<br>
        1-888-555-5555<br>
        </p>

    <footer>
        Copyright &copy; 2014 JavaJam Coffee House<br>
        <a href="mailto ImaniJackson@gmail.com">ImaniJackson@gmail.com</a>

    </footer>       
</div>
</body>
</html>

Javajam.css

body { background-color: #FFFFCC;
       color: #330000;
       font-family: Verdana, Arial, sans-serif; }
header { background-color: #CCAA66;
         color: #000000;
         text-align: center; }

h1 { line-height: 200%; }
nav { text-align: center; }
footer { background-color: #CCAA66;
         color: #000000;
         font-size: .60em; 
         font-style: italic;
         text-align: center; }
#wrapper { width: 80%;
           margin-left: auto;
           margin-right: auto; }

使用CSS的中心页面布局

0 个答案: