App下載

前端面試題——HTML5和CSS3

猿友 2021-02-05 15:21:22 瀏覽數(shù) (2983)
反饋

1. 列舉3個HTML5新標(biāo)簽，3個CSS3新特性。

  • HTML5 新標(biāo)簽 header,nav,article,footer,section,aside,audio,video,embed
  • CSS3 新特性 border-radius ,box-shadow,border-image,background-image,transition.

2. HTML5實現(xiàn)本地臨時存儲和永久存貯、讀取、刪除一條 key 為c，value 為 tom 的數(shù)據(jù)。

// 臨時存儲 
sessionStorage.setItem('c','tom')
// 永久存貯 
localStorage.setItem('c','tom')
// 讀取 
localStorage.getItem('c')
// 刪除 
localStorage.removeItem("c");//逐條刪
localStorage.clear();//刪除全部

3.用 js+css3 實現(xiàn)某 DIV 以50px每秒的速度左移 100px

<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>

4.CSS 實現(xiàn)三欄布局（左右固定200px，中間自適應(yīng)）

雙飛翼布局：都左浮動，中間包一個盒子，padding 隔開兩側(cè)寬度。左右兩側(cè)都有 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>

5.使用 html5 canvas 繪制實心原形。

<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()方法是創(chuàng)建弧/曲線(用于創(chuàng)建圓或部分圓)
	// context.arc(x,y,r,sAngle,eAngle,counterclockwise);
	// 起始角為 0
	// 結(jié)束角為 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";//填充顏色,默認(rèn)是黑色
	// 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>

6.如何使用 css3 動畫實現(xiàn)盒子 hover 時高度從10到100的動畫？

<style>
    #box{
      width: 100px;
      height: 10px;
      background-color: pink;
      transition: all 1s ease;
    }
    #box:hover{
      height: 100px;
    }
</style>
<body>
  <div id="box"></div>
</body>


HTML CSS

1 人點贊