Question

我已经完成了一个关于入门网页设计课程的任务，到目前为止它真的很容易，但是当教授介绍div和span标签时，我真的失去了动力并陷入了萧条。我已经为这门课程注册了很晚，幸运的是，明天将分配div和span。

到目前为止，我一直在广泛使用w3schools，以及StackOverflow本身，但我无法找到问题的具体答案，或者我发现的答案远远超出了我的“技能水平”。

我想模仿提供给我的网站;没有提供源代码，只是最终产品应该是什么样子的图像，以及图像，文本大小等资源。以下是分配本身的链接。

http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf

我自己已经完成了前几位，但是我失去了作业的重要部分。我需要制作一个大的div元素（我在假设），在里面我需要更多的div元素。我到了这个地方：

“主要标题下方是该页面的整体内容区域，该电影的评分为32％，评论家评论以及右侧电影概述。这些内容总共占据了800px的宽度并且居中在页面内水平调整。如果页面水平调整大小，这个800px部分应该动态移动，使其在页面上保持水平居中。整个部分有一个4px灰色实心边框，圆形半径为20px，尺寸应足够大，以包含所有它的内容。（提示：见教科书第4.3节关于使内容适合。）“

链接中的图像是它应该看起来的样子，到目前为止，我的所有内容都在圆形边框部分之上。以下是我到目前为止的情况：

<!doctype html>
<html>
    <head>
        <link rel="shortcut icon" href="http://www.cosc.brocku.ca/Offerings/2P89/Images/rotten.gif" 

type="image/x-icon">
        <title>Abraham Lincoln: Vampire Hunter - Rancid Tomatoes</title>
        <link href="abe.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <div class="banner" style="background: url

(http://www.cosc.brocku.ca/Offerings/2P89/Images/bannerbg.png) repeat-x;width:100%;height:50px;">
            <img src="http://www.cosc.brocku.ca/Offerings/2P89/Images/banner.png" alt="">
        </div>
        <h1>Abraham Lincoln: Vampire Hunter (2012)</h1>
        <div class="reviewshell">
            <div class="reviewleft">hi</div>
        </div>
    </body>
</html>

...和样式表...

.banner {
    margin:0px;
    text-align:center;
}
.reviewshell {
    margin-left:auto;
    margin-right:auto;
    border:4px solid;
    border-radius:20px;
    border-color:grey;
    width: 800px;
}
.reviewleft {
    margin:0px;
    text-align:left;
}
.reviewright {
}
.reviewbottom {
}
body {
    background-image:url("http://www.cosc.brocku.ca/Offerings/2P89/Images/background.png");
    background-attachment:fixed;
    font-size:8pt;
    font-family:Verdana, Tahoma, sans-serif;
    margin:0px;
}
h1 {
    text-align:center;
    font-size:24pt;
    font-family:Tahoma, Verdana, sans-serif;
    font-weight:bold;
    text-shadow:#999999 3px 3px;
}
blockquote {
}
a:link {
}
a:visited {
}
ul.a {
}

如果家庭作业的帮助在这里不受欢迎，我会提前道歉;我已经阅读了大约9个小时阅读HTML，我无法找到如何继续。不幸的是，周日没有教授或TA。

编辑;我应该提一下，我不需要特定的答案，只需要一个页面或指南的链接，可以帮助我弄明白。 w3schools深入，但我仍然无法得到它。

Answer 1

该段基本上意味着“将主要内容放在具有以下样式的div中”：

width: 800px;
margin-left和margin-right: auto;将其置于中心
border: 4px solid gray
border-radius: 20px;

Answer 2

这是一个非常好的Smashing Magazine教程：http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

如果没有人提供更好的答案，我可以为你写一份指南......

HTH。

块元素内的块元素;不确定如何在此实例中正确使用<div> </div>

2 个答案: