Front-end pen question set

No.1

The width of the green area is 100%, with three rectangles. The width of the first rectangle is PX, and the width of the second and third rectangles is equal. Use the functions in css3 to implement their layout.

 

The known HTML structure is:

<div class="box"><div class="item">column 1</div><div class="item">column 2</div><div class="item">column 3</div></div>

Answer:

. Box {width: 100%; Background: green; display:-moz-box;/* Firefox */display:-WebKit-box;/* safari and chrome */display: box; -WebKit-box-Orient: horizontal ;}. item {-moz-box-Flex: 1;/* safari and chrome */-WebKit-box-Flex: 1;/* safari and chrome */box-Flex: 1; /* safari and chrome */height: 60px; Background: red; margin: 10px 0 ;}. item: First-child {Background: red; width: 200px;-WebKit-box-Flex: 0;/* safari and chrome */margin: 10px ;}. item: Last-child {Background: red; margin: 10px ;}

No. 2

Use the HTML5 standard to complete the following page layout (the HTML code of the entire page must be fully written, and CSS is not required)

 

Answer:

<! Doctype HTML> View code
 
Front-end pen question set