溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“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.PI
ctx.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的面試題有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
