Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the interview questions of HTML5 and CSS3". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. List 3 new HTML5 tags and 3 new CSS3 features.

HTML5 New tag header,nav,article,footer,section,aside,audio,video,embed

New features of CSS3: border-radius, box-shadow,border-image,background-image,transition.

2. HTML5 implements local temporary storage and permanent storage, reading and deletion of a piece of data whose key is cMagne value and tom. / / temporary storage of sessionStorage.setItem ('clocked magnanimous tom') / / permanent storage of localStorage.setItem (' centering') / / read localStorage.getItem ('c') / / delete localStorage.removeItem ("c"); / / delete localStorage.clear () one by one; / / delete all 3. Use js+css3 to realize that a DIV moves to the left of 100px at the speed of 50px per second. Box {width: 100px; height: 100px; background-color:pink; position: relative; left: 0; top: 0 } / / get box let box= document.querySelector ('.box') let left = box.style.left var leftnum = Number (left.split ('px') [0]) / / do not unit var num = 1 var animate = setInterval (() = > {if (animate)} leftnum+=1 box.style.left = leftnum+'px' num++}, 20) 4.CSS implements three-column layout (fixed 200px left and right, adaptive in the middle)

Double wing layout: both float to the left, the tundish has a box, and the padding separates the width on both sides. There are margin-left on both the left and right sides.

Body {min-width: 550px;} .col {float: left;} # main {width: 100%; height: 400px; background-color: # ccc;} # main-wrap {margin: 0 200px 0200px;} # left {width: 200px; height: 400px; margin-left:-100% Background-color: red;} # right {width: 200px; height: 400px; margin-left:-200px; background-color: # ff0000;}

Holy Grail layout: there is no box in the middle, but there is still a padding.

# container {padding: 0 190px 0 190px;} .col {position: relative; float: left;} # main {width: 100%; height: 400px; background-color: # ddd;} # left {width: 190px; height: 400px; background-color:red; / * distance from the left margin itself * / margin-left:-100% / * then move its own width to the left * / left:-190px;} # right {width: 190px; height: 400px; background-color: yellow; margin-left:-190px; right:-190px;}

Expand the left and right layout

Html,body {height: 100%;} .left {width: 256px; height: 100%; background-color: # ddd; float: left;} .right {width: 100%; height: 100%; margin-left: 256px; background-color: rgb (230,48,48);} 5. Use html5 canvas to draw solid prototypes. # canvas {width: 500px; height: 500px;} var canvas=document.getElementById ("canvas"); var ctx=canvas.getContext ("2d"); / / draw a hollow circle ctx.beginPath (); / / arc () method is to create an arc / curve (used to create a circle or part of a circle) / / context.arc / / the starting angle is 0 / / the ending angle is 2*Math.PI ctx.arc; ctx.lineWidth=5; ctx.strokeStyle= "green"; / using the stroke () or fill () method to draw the actual arc ctx.stroke () on the canvas; / / drawing the hollow circle ctx.closePath () / / draw a solid circle / / ctx.beginPath (); / / ctx.arc; / / ctx.fillStyle= "red"; / / fill color, default is black / / ctx.fill (); / / draw solid circle / / ctx.closePath (); / / combination of hollow and solid / / ctx.beginPath () / ctx.arc; / ctx.fillStyle= "red"; / / ctx.fill (); / / ctx.strokeStyle= "green"; / / ctx.stroke (); / / ctx.closePath (); 6. How do I use css3 animation to animate a box hover with a height of 10 to 100? # box {width: 100px; height: 10px; background-color: pink; transition: all 1s ease;} # box:hover {height: 100px;} "what are the interview questions for HTML5 and CSS3"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.