本篇内容介绍了“HTML5和css3的面试题有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1. 列举3个html5新标签，3个CSS3
本篇内容介绍了“HTML5和css3的面试题有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
HTML5 新标签 header,nav,article,footer,section,aside,audio,video,embed
CSS3 新特性 border-radius ,box-shadow,border-image,background-image,transition.
// 临时存储 sessionStorage.setItem('c','tom')// 永久存贮 localStorage.setItem('c','tom')// 读取 localStorage.getItem('c')// 删除 localStorage.removeItem("c");//逐条删localStorage.clear();//删除全部<style> .box{ width: 100px; height: 100px; background-color:pink; position: relative; left: 0; top: 0; } </style> <body> <div class="box"></div> <script> // 100*20=2000 // 获取box let box= document.querySelector('.box') let left = box.style.left var leftnum = Number(left.split('px')[0]) //不要单位 var num = 1 var animate = setInterval(() => { if(num>=100){ clearInterval(animate) } leftnum+=1 box.style.left = leftnum+'px' num++ }, 20); </script></body>双飞翼布局：都左浮动，中间包一个盒子，padding 隔开两侧宽度。左右两侧都有 margin-left.
<style> body { min-width: 550px; } .col { float: left; } #main { width: 100%; height: 400px; background-color: #ccc; } #main-wrap { margin: 0 200px 0 200px; } #left { width: 200px; height: 400px; margin-left: -100%; background-color: red; } #right { width: 200px; height: 400px; margin-left: -200px; background-color: #ff0000; } </style> <body> <div id="container"> <div id="main" class="col"> <div id="main-wrap"></div> </div> <div id="left" class="col"></div> <div id="right"class="col"></div> </div></body>圣杯布局：中间不包盒子但还是有 padding。
<style> #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; margin-left: -100%; left: -190px; } #right{ width: 190px; height: 400px; background-color: yellow; margin-left: -190px; right: -190px; } </style> <body> <div id="container"> <div id="main" class="col"></div> <div id="left" class="col"></div> <div id="right"class="col"></div> </div> </body>拓展 左右布局
<style> 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); } </style> <body> <div class="left"></div> <div class="right"></div> </body><style> #canvas{ width: 500px; height: 500px; }</style><body> <canvas id="canvas"></canvas></body><script> var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");//画一个空心圆ctx.beginPath();// arc()方法是创建弧/曲线(用于创建圆或部分圆)// context.arc(x,y,r,sAngle,eAngle,counterclockwise);// 起始角为 0// 结束角为 2*Math.PIctx.arc(100,75,50,0,2*Math.PI);ctx.lineWidth=5;ctx.strokeStyle="green";// 使用 stroke()或fill()方法在画布上绘制实际的弧ctx.stroke();//画空心圆ctx.closePath();//画一个实心圆// ctx.beginPath();// ctx.arc(200,100,50,0,360,false);// ctx.fillStyle="red";//填充颜色,默认是黑色// ctx.fill();//画实心圆// ctx.closePath();//空心和实心的组合// ctx.beginPath();// ctx.arc(100,100,50,0,360,false);// ctx.fillStyle="red";// ctx.fill();// ctx.strokeStyle="green";// ctx.stroke();// ctx.closePath();</script><style> #box{ width: 100px; height: 10px; background-color: pink; transition: all 1s ease; } #box:hover{ height: 100px; }</style><body> <div id="box"></div></body>“HTML5和CSS3的面试题有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: HTML5和CSS3的面试题有哪些
本文链接: https://lsjlt.com/news/309376.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0