Web デザイン入門コースの課題があり、これまではとても簡単でしたが、教授が div と span タグを導入したとき、勢いを失い、スランプに陥りました。遅れてコースに登録しましたが、運が良ければ、div と span の課題が明日期限切れになります。
私はこれまで w3schools を広範囲に使用してきましたが、StackOverflow 自体と同様に、質問に対する特定の回答を実際に見つけることができないか、見つけた回答が私の「スキル レベル」をはるかに超えています。
提供された Web サイトをエミュレートしたい。ソースコードは提供されず、最終製品がどのように見えるかの画像と、画像、テキストサイズなどのリソースのみが提供されます。課題自体へのリンクは次のとおりです。
http://www.cosc.brocku.ca/Offerings/2P89/2P89%20Assign2.pdf
私は最初の数ビットを自分で調べましたが、割り当てのより重要な部分についてはわかりません。1 つの大きな div 要素を作成する必要があり (私は想定しています)、その中にさらに div 要素が必要です。私はこのエリアに行きました：
「メインの見出しの下には、ページ全体のコンテンツ領域があり、映画の全体的な 32% の評価、いくつかの批評家のレビュー、および映画の概要が右側にあります。このコンテンツを合わせると、幅 800 ピクセルを占め、水平方向に中央に配置されます。ページのサイズが水平方向に変更される場合、この 800 ピクセルのセクションは、ページの水平方向の中央に配置されるように動的に移動する必要があります. このセクション全体には、半径 20 ピクセルの円形の 4 ピクセルの灰色の実線の境界線があり、すべてのコンテンツを含めるのに十分な大きさにする必要があります(ヒント: 内容を適合させるには、教科書のセクション 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 {
}
宿題のヘルプがここで嫌われている場合は、事前にお詫び申し上げます。HTML を読んで約 9 時間この作業を続けてきましたが、続行する方法がわかりません。残念ながら、日曜日に利用できる教授または TA はありません。
編集; おそらく、特定の回答は必要ないことを言及する必要があります。それを理解するのに役立つページまたはガイドへのリンクだけです。w3schools は詳細ですが、まだわかりません。