zoukankan      html  css  js  c++  java
  • 前端基础习题及答案

    1、用于完成提交信息的表单容器元素名称是什么,提交表单时的事件是什么?
    <input type="submit" /> 事件 onclick keyCode
    2,如果想要这样一种布局,横向铺满整个屏幕横向屏幕分为三块,左侧一块div占宽度20px,
    右侧一块div占宽度40px,中间区块随屏幕大小自动填充请用div+css描述
    3,当文字超过对象区域后如何使其自动显示....进行缩略显示
    4,如何设定一个div对象在其父div对象中的位置为(5px,15px)高度为50px
    5,css3中的新的盒子模型布局方法是什么,写法下一下,怎么让文字和图片上下左右水平垂直居中
    6,一个父级div里面有三个兄弟div怎么让他们三个水平或者垂直显示
    7,圆角怎么表示分别写出上左,上右,下左,下右圆角
    8,html5中最新的input type类型有哪些
    color  date  datetime  datetime-local  email  month  number  range  search  tel  time  url  week

    https://www.runoob.com/html/html5-form-input-types.html
    9,html5中对canvas了解多少

    答案见canvas绘制多啦A梦

    10,html5中新增的标签有哪些
    <article> <aside><audio><big><canvas>

    https://www.runoob.com/tags/html-reference.html

    附--答案

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title></title>
      <style>
        .box {
           300px;
          height: 100px;
          display: flex;
          margin-bottom: 20px
        }
        .one {
           20px;
          float: left;
          background: red;
        }
        .two {
           100%;
          background: skyblue;
        }
        .three {
          float: right;
           40px;
          background: pink;
        }
        .text {
          height: 20px;
           300px;
          border: 1px solid red;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .parent {
           300px;
          height: 200px;
          border: 1px solid red;
          position: relative;
          margin: 20px
        }
        .son {
          position: absolute;
           100px;
          height: 50px;
          background: greenyellow;
          left: 5px;
          top: 15px;
        }
        .five {
           500px;
          height: 500px;
          border: 10px solid skyblue;
          margin-left: 300px;
          position: relative;
        }
        .five_box {
           300px;
          height: 300px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%)
        }
        .five_box img {
           100%;
        }
        .vertical {
          display: flex;
           500px;
          height: 200px;
          border: 1px solid red;
        }
        .vertical_1,
        .vertical_2,
        .vertical_3 {
           33.33%
        }
        .vertical_1 {
          background: skyblue
        }
        .vertical_2 {
          background: pink
        }
        .vertical_3 {
          background: yellowgreen;
        }
        .level {
          display: flex;
          flex-direction: column;
           500px;
          height: 200px;
          border: 1px solid red;
        }
        .level_1 {
          height: 30px;
          background: skyblue
        }
        .level_2 {
          height: 30px;
          background: pink
        }
        .level_3 {
          height: 30px;
          background: yellowgreen
        }
        .radio {
          margin-left: 200px;
           300px;
          height: 300px;
          background: hotpink;
          border-top-left-radius: 60px;
          border-top-right-radius: 90px;
          border-bottom-left-radius: 120px;
          border-bottom-right-radius: 40px;
        }
      </style>
    </head>
    <body>
      <!-- 111 -->
      <div>
        <form action="" method="GET">
          <input type="text" name="name" />
          <input type="text" name="age" />
          <input type="submit" />
        </form>
      </div>
      <!-- 2222 -->
      <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
      </div>
      <!-- 333 -->
      <div class="text">
        我站在山的尽头
        看着云朵飞走
        你像昨夜的海市蜃楼
        给我漫天蝶游
        赴约万水千丘
        回忆太美所以人才念旧
      </div>
      <!-- 444 -->
      <div class="parent">
        <div class="son"></div>
      </div>
      <!-- 555 -->
      <div class="five">
        <div class="five_box">
          <img src="ayy1.jpg" alt="">
        </div>
      </div>
      <!-- 666 -->
      <div class="vertical">
        <div class="vertical_1">111</div>
        <div class="vertical_2">222</div>
        <div class="vertical_3">333</div>
      </div>
      <div class="level">
        <div class="level_1">111</div>
        <div class="level_2">222</div>
        <div class="level_3">333</div>
      </div>
      <!-- 水平也可以直接用浮动 -->
      <!-- 777 -->
      <div class="radio"></div>
    </body>

    </html>
  • 相关阅读:
    Qt计算器开发(三):执行效果及项目总结
    [HNOI2019]校园旅行
    How to fix nuget Unrecognized license type MIT when pack
    How to fix nuget Unrecognized license type MIT when pack
    git 通过 SublimeMerge 处理冲突
    git 通过 SublimeMerge 处理冲突
    git 上传当前分支
    git 上传当前分支
    gif 格式
    gif 格式
  • 原文地址:https://www.cnblogs.com/fly9/p/11592504.html
Copyright © 2011-2022 走看看