INF-306 試験問題を無料オンラインアクセス

You want to position a specific element so that it always directly follows the previous element, which is positioned by default, regardless of the viewport characteristics. Which positioning method should you use?

• A.sticky
• B.fixed
• C.static
• D.absolute

What is the effect of applying the CSS float: right property to an image?

• A.It positions the image to the right of the region and wraps text around the top, left, and bottom.
• B.It positions the image to the left of the region and wraps text around the top, right, and bottom.
• C.It positions the image to the left and displays all of the text to the right of the image.
• D.It positions the image to the right and wraps text to the top and bottom.

You need to use CSS to create the layout shown:

Review the layout shown on the left.
Complete the markup by selecting the correct option from each drop-down list.
Note: You will receive partial credit for each correct selection.

正解：

Explanation:
First blank: display: grid;
Second blank: grid-template-columns: auto auto auto auto;
Third blank: grid-gap: 10px;
The layout shown is a CSS Grid layout with eight items arranged into four equal-width columns and two rows. The first required declaration is display: grid;, which turns the .grid-container element into a grid container. The second declaration is grid-template-columns: auto auto auto auto;, which defines four columns, matching the four visible boxes in each row: Mickey, Minnie, Luna, and George on the first row, then Bilbo, Bella, Madeline, and Groucho on the second row. The third declaration is grid-gap: 10px;, which creates spacing between the grid cells, matching the visible blue gaps around each item. The background-color:
#336699; creates the blue container background, while padding: 10px; adds space around the outer edge of the grid. The child rule .grid-container > div styles each grid item with a light background, centered text, padding, and larger font size.

You are creating a form that requires the category to be entered as a two- or three-letter abbreviation. The input is mandatory.
You need to configure the input validation for the form.
Complete the markup by typing into the boxes.
Note: You will receive partial credit for each correct answer.

Review the grid container requirements and mockup on the left. Which markup should you use to define the grid container?

• A.Incorrectly places named area strings under grid-template-rows.
• B..grid-container { display: grid; grid-template-areas: " heading heading heading heading heading heading
  " " menu content content content right right " " menu contact contact contact contact contact " ; grid- gap: 10px; background-color: orange; padding: 10px;}
• C.Uses grid-template-columns and grid-template-rows with percentage and pixel sizing.
• D.Incorrectly places named area strings under grid-template-columns.