overviewoccupybelowoverallhorizonta

overview
occupy
below
overall
horizontally
neighboring content




The section includes a definition list (using dl, dt, and dd elements) about the movie such as its stars and director. Each
term is bolded and has 10pt of vertical separation between it and the element that precedes it. The bottom of this section
contains a list of links about the movie. The list should be shown without bullets or indentation.

Below the reviews is a bar of centered text indicating reviews "(1-10) of 88", with a background color of #A2B964. It is
placed directly next to surrounding content. 5px separate the edge of its text and the element's own outer edge.

The page's bottom right corner has links to the W3C validators. These images should remain fixed in the page's bottomright corner, even after scrolling. The images should appear as 50% opaque, halfway transparent.

inspect elements


Express all stylistic information on the page using CSS defined in movie.css. The majority of the points for this assignment
will be for the movie.css file. For full credit, your style sheet must successfully pass the W3C CSS validator. Part of your
grade comes from expressing your CSS concisely and without unnecessary or redundant styles. For example, the two
main columns of reviews share many (if not all) styles in common, so you should not specify those styles twice in your CSS
file. As another example, if the page uses the same color or font family for multiple elements, group those elements into a
single CSS rule, so that it would be possible to change the page's color/font by modifying a single place in the CSS. Use
context selectors to avoid needing to apply classes and IDs to large numbers of elements. Limit the use of absolute and
fixed positioning on this assignment. Do not use HTML or CSS constructs past Chapter 4 of the textbook, and do not use
HTML tables.

Below the main heading is the page's overall content area, with an overall 33% rating for the film, several critics' reviews,
and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontally
within the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centered
horizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sized
large enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)

Each review is a box with a quote about the movie, in bold 8pt font. The quote box has a background color of #E8DC9B,
and a gray border, 2px thick with a 10px round radius. 8px separate the quote box's content from its border. Each box has
an icon (fresh.gif or rotten.gif) for whether the reviewer liked or disliked the movie on the left side of the quote box, with
5px separating it from text to its right. Text wraps around the images as needed.
The reviewer's personal information follows under the quote box, including: the reviewer's name; and the publication in
italic. A reviewer icon (critic.gif) is shown to the left of the text, with 5px of horizontal space separating it from the text.
There is 20pt of vertical space between reviews. (Hint: Paragraphs in movie reviews should be made large enough to
contain all their content, including any floating content. See textbook section 4.3.3 on making contents fit into a container.)
The top eight reviews should be as shown, but you should change the last two to hold any text that you like.

ผลลัพธ์ (ไทย) 1:

ภาพรวมครอบครองด้านล่างโดยรวมในแนวนอนเนื้อหาที่ใกล้เคียงส่วนมีรายการคำจำกัดความ (ใช้ dl, dt และองค์ประกอบของ dd) เกี่ยวกับภาพยนตร์เช่นดาวและกรรมการ แต่ละคำว่าหนา และมี 10pt แบ่งแนวตั้งและองค์ประกอบที่ก่อนหน้านี้ ด้านล่างของหัวข้อนี้ประกอบด้วยรายการของลิงค์เกี่ยวกับภาพยนตร์ ควรจะแสดงรายการ โดยแสดงหัวข้อย่อยหรือย่อหน้าด้านล่างเป็นแถบข้อความตรงกลางแสดงรีวิว "(1-10) ของ 88" กับสีพื้นหลังของ #A2B964 จึงวางอยู่ถัดจากเนื้อหาที่อยู่โดยรอบ 5px แยกขอบของข้อความและขอบด้านนอกขององค์มุมขวาล่างของหน้ามีลิงค์ไปยัง W3C validators ภาพเหล่านี้ควรอยู่ถาวรในมุมของหน้า bottomright แม้หลังจากที่เลื่อน ภาพปรากฏเป็นทึบแสง 50% อยู่ตรงกลางโปร่งใสตรวจสอบองค์ประกอบแสดงข้อมูลทั้งหมดเป็นสำนวนที่หน้าใช้ CSS ที่กำหนดไว้ใน movie.css ส่วนใหญ่จุดกำหนดนี้จะได้ไฟล์ movie.css สำหรับเครดิตเต็ม สไตล์ชีตของคุณต้องเสร็จเรียบร้อยแล้วผ่านตัวตรวจสอบ W3C CSS ส่วนของคุณเกรดมาแสดง CSS ของคุณ concisely และไม่ มีลักษณะที่ไม่จำเป็น หรือซ้ำซ้อน ตัวอย่าง ทั้งสองคอลัมน์หลักของรีวิวร่วมลักษณะจำนวนมาก (ถ้าไม่ทั้งหมด) ที่เหมือนกัน ดังนั้นคุณควรระบุเนื้อหาสองใน CSS ของคุณแฟ้ม เป็นอย่างอื่น ถ้าหน้าใช้สีเดียวกันหรือตระกูลแบบอักษรสำหรับองค์ประกอบหลาย กลุ่มองค์ประกอบเหล่านั้นเป็นการsingle CSS rule, so that it would be possible to change the page's color/font by modifying a single place in the CSS. Usecontext selectors to avoid needing to apply classes and IDs to large numbers of elements. Limit the use of absolute andfixed positioning on this assignment. Do not use HTML or CSS constructs past Chapter 4 of the textbook, and do not useHTML tables.Below the main heading is the page's overall content area, with an overall 33% rating for the film, several critics' reviews,and an overview of the film at right. Taken together this content occupies 800px in width and is centered horizontallywithin the page. If the page resizes horizontally, this 800px section should move dynamically so that it remains centeredhorizontally on the page. This overall section has a 4px gray solid border with a 20px round radius and should be sizedlarge enough to contain all of its contents. (Hint: See textbook section 4.3 on making contents fit.)Each review is a box with a quote about the movie, in bold 8pt font. The quote box has a background color of #E8DC9B,and a gray border, 2px thick with a 10px round radius. 8px separate the quote box's content from its border. Each box hasan icon (fresh.gif or rotten.gif) for whether the reviewer liked or disliked the movie on the left side of the quote box, with5px separating it from text to its right. Text wraps around the images as needed.The reviewer's personal information follows under the quote box, including: the reviewer's name; and the publication initalic. A reviewer icon (critic.gif) is shown to the left of the text, with 5px of horizontal space separating it from the text.
There is 20pt of vertical space between reviews. (Hint: Paragraphs in movie reviews should be made large enough to
contain all their content, including any floating content. See textbook section 4.3.3 on making contents fit into a container.)
The top eight reviews should be as shown, but you should change the last two to hold any text that you like.

ผลลัพธ์ (ไทย) 3:

ภาพรวม



โดยรวมครอบครองด้านล่างแนวนอน
เพื่อนบ้าน




ส่วนเนื้อหารวมถึงรายการละเอียด ( ใช้ dl dt และองค์ประกอบ DD ) เกี่ยวกับหนัง เช่น ดารา และ ผู้กำกับ แต่ละตัวหนาและมี 10pt
ระยะของการแยกในแนวตั้งระหว่างมันและองค์ประกอบที่นำหน้ามัน ด้านล่างของส่วนนี้
ประกอบด้วยรายการของการเชื่อมโยงเกี่ยวกับภาพยนตร์รายการควรแสดงโดยไม่มีกระสุนหรือเยื้อง

ด้านล่างที่มีแถบกึ่งกลางข้อความแสดงความคิดเห็น " ( 1-10 ) 88 " กับสีพื้นหลังของ# a2b964 . มันอยู่ตรงข้างๆ รอบ
เนื้อหา 5px แยกขอบของข้อความและเป็นองค์ประกอบภายนอกขอบของมันเอง

ของหน้า มุมขวาล่างมีการเชื่อมโยงไปยัง W3C validators .ภาพเหล่านี้จะยังคงคงที่ ในมุม bottomright ของเพจ แม้หลังจากการเลื่อน ภาพจะปรากฏเป็น 50% ทึบแสง ครึ่งทางโปร่งใส ตรวจสอบองค์ประกอบ




ด่วนทุกรูปแบบข้อมูลในหน้าโดยใช้ CSS ที่กำหนดไว้ใน movie.css . ส่วนใหญ่ของจุดนี้งาน
จะได้ไฟล์ movie.css . เครดิตเต็มแผ่นสไตล์ของคุณจะประสบความสำเร็จผ่าน W3C CSS Validator . เป็นส่วนหนึ่งของเกรดของคุณ
มาจากการแสดง CSS ของคุณรัดกุมและไม่มีลักษณะที่ไม่จำเป็นหรือมากเกินไป ตัวอย่างเช่นสอง
หลักคอลัมน์ของรีวิวแบ่งปันมากมาย ( ถ้าไม่ทั้งหมด ) ในลักษณะทั่วไป ดังนั้นคุณไม่ควรจะระบุลักษณะเหล่านั้นสองครั้งในไฟล์ CSS
. เป็นอย่างอื่นถ้าหน้าใช้สีเดียวกันหรือครอบครัวแบบอักษรสำหรับองค์ประกอบหลาย ๆ กลุ่มธาตุเหล่านั้นเป็น
กฎ CSS เดียวดังนั้นมันจะเป็นไปได้ที่จะเปลี่ยนเป็นหน้าสี / font โดยการปรับเปลี่ยนสถานที่เดียวใน CSS ใช้ตัวเลือกบริบทเพื่อหลีกเลี่ยง
ต้องการสมัครเรียนและรหัสกับตัวเลขขนาดใหญ่ขององค์ประกอบ การใช้ที่แน่นอนและตายตัวตำแหน่ง
งานนี้ไม่ใช้ HTML หรือ CSS สร้างผ่านบทที่ 4 ของหนังสือ และไม่ได้ใช้
ตาราง HTML

ด้านล่าง หัวข้อหลักคือพื้นที่เนื้อหาของหน้าโดยรวมกับการรวม 33 % คะแนนสำหรับภาพยนตร์ บทวิจารณ์ของนักวิจารณ์หลาย
และภาพรวมของภาพยนตร์ที่ถูก ที่ถ่ายด้วยกันเนื้อหานี้ใช้ 800px กว้างและอยู่กึ่งกลางในแนวนอน
ภายในหน้า ถ้าหน้าปรับขนาดแนวนอนนี้ 800px ส่วนควรย้ายแบบไดนามิกเพื่อให้มันยังคงอยู่กึ่งกลาง
แนวนอนบนหน้าเว็บ ส่วนโดยรวมนี้มี 4px สีเทาทึบชายแดนกับ 20px รอบรัศมี และควรมีขนาด
ขนาดใหญ่พอที่จะประกอบด้วยเนื้อหาทั้งหมด . ( คำใบ้ : ดูตำราส่วน 4.3 ทำเนื้อหาพอดี )

แต่ละตรวจสอบเป็นกล่องที่มีการอ้างเรื่องหนัง 8pt ในแบบอักษรตัวหนาราคากล่องที่มีสีพื้นหลังของ# e8dc9b
และชายแดน , สีเทา 2px หนาด้วย 10px รอบรัศมี 8px แยกราคากล่องของเนื้อหาจากชายแดนของ แต่ละกล่องมี
ไอคอน ( fresh.gif หรือเน่าเสีย . gif ) ว่าชอบ หรือ ไม่ชอบทานหนังบนด้านซ้ายของราคากล่องด้วย
5px แยกจากข้อความที่ถูกต้อง ข้อความล้อมรอบภาพตามที่ต้องการ
ของผู้ใช้ข้อมูลส่วนบุคคลดังต่อไปนี้ภายใต้ราคากล่อง รวมถึง : ชื่อของทาน และสิ่งพิมพ์ใน
ตัวเอียง . ไอคอนผู้ใช้ ( นักวิจารณ์ . gif ) แสดงด้านซ้ายของข้อความที่มี 5px พื้นที่แนวนอนแยกจากข้อความ 20pt
มีพื้นที่แนวตั้งระหว่างรีวิว ( คำใบ้ : ย่อหน้าวิจารณ์หนัง ควรมีขนาดใหญ่พอที่จะ
ประกอบด้วยเนื้อหาทั้งหมดของพวกเขารวมถึง ลอย ) เห็นตำราส่วน 4.3.3 ทำเนื้อหาให้พอดีลงในภาชนะ )
ด้านบนแปดความคิดเห็น ควรจะ เป็น แต่คุณควรเปลี่ยนเมื่อสองเพื่อเก็บข้อความที่คุณต้องการ