日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

前端学习-试卷

發布時間：2025/7/25 HTML 45 豆豆
生活随笔 收集整理的這篇文章主要介紹了 前端学习-试卷 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前端學習-試卷 1（滿分100+20，90分及格）

?一、填空題（每題4分，共20分）：

  • html{ font-size: 12px; } div{ font-size: 2.5rem }，div的字號是： _30px_____
  • 有上下兩個div分別標記為A和B，A{ margin-bottom: 20px } B{ margin-top: 30px }，在不考慮瀏覽器兼容的前提下，AB之間的間距是：__30px______
  • 使一個div左右居中且上下外邊距均為3倍字號的最簡潔寫法是：__margin:3em auto__________________
  • 在不使用浮動的前提下，能使塊級元素橫向排列的css屬性是：_________inline inline-block _________
  • 在css選擇器中，聲明節點ID的選擇器是：______#____選擇器

    • ?二、選擇題（每題4分，共同20分）：

  • (?D )? 可以呈現透明度的圖片格式是：

    • A.? jpg

    B.? gif

    C.? png8

    D.? png24

    //透明度！=透明度0//只有PNG24

    //GIF PNG8都是不帶阿爾法通道的

    ?

    • (??C? )? 下列選項哪個為群組選擇器：

    A.? div > span >p{ ... }

    B.? div #span #p{ ... }

    C.? div, span, p{ ... }

    D.? div .span .p{ ... }

    ?

  • (??? A)? 下列選擇，不是塊級元素和行內元素差異的是：

    • A.? 需要清除浮動與否

    B.? 獨占一行與另起一行

    C.? 高寬屬性有效與否

    D.? 與相鄰元素在同一行與否?

  • ?(?C )? 下列標簽中，默認為inline-block的是：

    • A.? section

    B.? article

    C.? label

    D.? blockquote

    //html有默認IB ，所有表單元素都是默認IB? //C是表單元素?

  • ?(??C? )? 能控制元素隱藏并占位的屬性是：

    • A.? overflow: hidden;

    B.? display: none;

    C.? visibility: hidden;

    D.? text-indent: -100%;

    ?? //A 隱藏溢出部分 //B隱藏 C可視區域可見與否，占位。?

    三、是非題（每題4分，共20分）：

  • (錯)?<!DOCTYPE HTML>是錯誤的聲明寫法，聲明文檔類型必須使用小寫；
  • (??錯? )? 一張網頁只能有一個<head>，但可以有多個<body>；
  • (??錯? )? 內聯樣式表應當寫在網頁內部，外聯樣式表應當寫在網頁外部；
  • (???是?? )? rgba和opacity都是實現透明度，不同的是：rgba僅針對于顏色透明；而opacity可使dom元素及元素所有內容透明；
  • (??是? )? content屬性可以用在任何元素的before/after偽類上，用來插入生成內容。?

    • 四、應用題（每題10分，共40分）：

  • 用最簡潔的方式編寫一個clearfix類，用于清除浮動：?

    • . .clearfix:before,.clearfix:after {???? content:"";???? display:table; };

    ?.clearfix:after {???? clear:both;???? overflow:hidden; } ;

    .clearfix {???? zoom:1; }/* for ie6 & ie7 */?

  • 闡述5個塊級元素和行內元素的區別：

    • 1.

    2. 默認情況下塊級元素寬度自動填滿其父元素寬度,行內元素

  • 獨占一行與另起一行
  • 高寬屬性有效與否
  • ?與相鄰元素在同一行與否?
    • 補充代碼，使得容器內的多行文字上下左右居中顯示：

    html：

    <div>

    <p></p>

    </div>

    css：

    div{

    display: table;

    }

    p{

    [補充代碼]

    }

    補充代碼：display: table-row;?

  • 找出代碼中的5處錯誤，在語義相同的前提下，加以改正：

    • div{

    width: auto;

    height: none;

    line-height: 1;

    text-align: justify;

    display: table-caption;

    position: none;

    visibility: show;

    verticle-align: center;

    list-style: point;

    }

    改正：

    height:0;

    position:static;

    visibility: visible;

    list-style:: disc;

    cursor: point;

    ?五、附加題（每題10分，共20分）：

  • 使用純css，實現一個自動切換的幻燈片效果：
  • #wrap{
  • ????? position: relative;
  • ????? width: 300px;
  • ????? height: 200px;
  • }
  • .a,.b{
  • ????? position: absolute;
  • ????? left: 0;
  • 10. ????? top: 0;
  • 11. ????? width: 100%;
  • 12. ????? height: 100%;

    • 13. }

    14. .a{

  • 15. ????? background: #f00;
  • 16. ????? opacity: 1;
  • 17. ????? -webkit-animation: show 6s linear 0s infinite normal both;

    • 18. }

    19. .b{?

  • 20. ????? background: #ff0;
  • 21. ????? opacity:1;
  • 22. ????? -webkit-animation: show 6s linear 3s infinite normal both;

    • 23. }

    24. @-webkit-keyframes show{

  • 25. ????? 0%,20%{
  • 26. ?????????? opacity:1;
  • 27. ????? }
  • 28. ????? 40%,60%{
  • 29. ?????????? opacity: 0;
  • 30. ????? }
  • 31. ????? 80%,100%{
  • 32. ?????????? opacity: 1;
  • 33. ????? }

    • 34. }

    35. <div id="wrap">

  • 36. ????? <div class="a"></div>
  • 37. ????? <div class="b"></div>
  • 38. ????????????????
  • 39. ????????????????

    • 40. </div>

  • 41. ?

    • 42. 編寫一個表單，要求如下：

    1).? 點擊按鈕自動提交

    2).? 表單請求類型為post

    3).? 表單提交參數：account、password、captcha

    4).? 使用html5自帶屬性校驗元素是否為空

    ?

    <form action=”/”method=”post””這里貌似有一串那個什么設置編碼還是什么的”>

    <label for=”account”>account：</label>

    <input type=”text” name=”account” id=”account”required/>

    <label for=”password”>account：</label>

    <input type=”password” name=”password” id=”password”required/>

    <label for=”captcha”>account：</label>

    <input type=”text” name=”captcha” id=”captcha”required/>

    ????? <input value=”submit” type=”submit”/>

    </form>

    ?

    轉載于:https://www.cnblogs.com/eveblog/p/4728062.html

    總結

    以上是生活随笔為你收集整理的前端学习-试卷的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。