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>
  • 相关阅读:
    NET中的类型和装箱/拆箱原理
    转 C# 装箱和拆箱[整理]
    理解线程同步
    IsBackground的理解
    赛马会面试题
    FTP上传类
    FTPS加密上传
    转载WPF SDK研究 之 AppModel
    SQL Server查看错误日志存档编号及其详情
    Hive基础编程入门(一)
  • 原文地址:https://www.cnblogs.com/fly9/p/11592504.html
Copyright © 2011-2022 走看看