HTML5及CSS3基础知识

填空(20分)

  1. html中的注释为<!-- -->,CSS中的注释为/* */
  2. 空格的实体为 ;
  3. 下拉菜单的标签为<select>,菜单中的每个选项标签<option>
  4. HTML对文字加粗的两种方式<b><strong>
  5. CSS对文字加粗的方式font-weight:bold/bolder/font-weight:900;
  6. <img src="./tset.png" alt=" ">中,alt有什么含义?在浏览器无法载入图像时,显示该属性中的文本当图片加载失败的时候文本替换
  7. 在<a target=””></a>中,当target_sel在当前页面打开,当target=_blank 在新标签页打开,取消a标签中的默认下划线的属性为text-decoration:none
  8. 在表格中,对<td>设置什么属性可以跨行 rowspan 和跨列colspan 。
  9. 为form表单设置提交方式的属性是method。(post/get)
  10. 对表单元素禁用的布尔值属性是disabled
  11. 对input输入框默认聚焦的布尔值属性是autofocus。(自动聚焦)
  12. 对于<input type=”checkbox”>来说,默认被勾选的布尔值属性checked
  13. 对字体设置颜色的CSS属性是color还是font-color?color
  14. 对浮动元素清除浮动的属性是clear:left/right/both; overflow:hidden;

简答(39分)

  1. 常用的块级元素有(5个),行级元素有(5个)6分,少写一个-1分错写一个-1分)

常见的块级元素:body  form  select  textarea  h1-h6 html table  button  hr  p  ol  ul  dl  div

常见的行级元素: lable  span  br  a  style  em  b  i  strong  img  input  td  span

  1. 请写出相对定位,绝对定位以及固定定位属性及属性值,并写出他们之间的区别。(3分)

1.position:relative,相对定位,相对于元素自身原来的位置进行定位,不脱离文档流;通过left/right/top/bottom定位

2.position:absolute,绝对定位,如果父级元素中有定位元素,会去找最近的父级元素作为参考,进行绝对进行,如果没有,参照页面(浏览器视口)进行定位;脱离文档流,通过left/right/top/bottom定位

3.position:fixed;固定定位,固定在浏览器的视口内,脱离文档流,通过left/right/top/bottom定位

  1. 对以下CSS样式优先级进行排序(8分)
  1. Id选择器  b.类选择器  c.标签选择器d.行内样式  e.通配符*  f.浏览器默认属性 g. 继承 h. !important

!important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  1. 如何取消列表前默认实心圆标志?请用CSS代码实现。(2分)

list-style:none;list-style-type:none;

  1. 绝对路径和相对路径的区别(3分)

绝对路径以/开始从根目录开始的文件路径,例如C:\Program Files\Microsoft Office 15\ClientX64       /home/briup/Desktop/index.html

相对路径 相对于当前文件的路径,例如

./images/logo.png

6. 分别写出input标签type类型的含义(5分)

Button  checkbox  file  image  password  radio  reset  submit  text  

按钮  复选框  选择文件  图片按钮  密码  单选框  重置  提交  文本

  1. 写出两种隐藏元素的CSS属性,并说明区别(4分)

display:none;  隐藏元素且元素的位置可以被取代

visibility:hidden;  隐藏元素且元素的位置不能被取代

opacity:0;透明

<input type=hidden>提交的时候也会被提交

8. 阅读代码,说明#one、#two、#three的宽高颜色(4分)

One:green 200

Two:blue 150

Three:blue 100

9. 请写出标准盒子模型和IE盒子模型是用什么CSS属性以及属性值表示?当为元素设置width:100px;height:100px;margin:10px;padding:10px;border:10px solid red,请在纸上画图表示出来。(4分)

IE盒子    box-sizing:border-box              标准盒子: box-sizing:content-box

 

编程(41分)

  1. 怎样居中(水平+垂直)一个div中的文本?(4分,少写一个-1分错写一个-1分)

text-align:center; line-height:父元素高度;

2. 怎样居中(水平+垂直)一个div中的元素?请至少给出两种方法?(8分)

3. 实现布局中间自适应宽度,左右两栏固定宽度(6分)

<style> 

.box{ display:flex; }

.left{ width: 200px; height: 600px; background:red; }

.right{ width: 200px; height: 600px; background:red; }

.center{ width: 100%; height:600px; background:green; }

</style>  

4. 创建一个最简单的动画使#one在两秒内向右移动300px。(4分)

<div id=”one” style=”width:100px;height:100px;background:red;”></div>

 

 
 

 

  1. 如何取消a标签的默认样式?如何设置a标签点击前 点击后 点击时 悬停时的样式及顺序?。(5分)

取消默认样式

a{

      text-decoration: none;

      color: black;

    }

a:link{}

a:visited{}

a:hover{}

a:active{}

 

  1. 请画出下面代码运行后的样式,标注宽高和间距。(5分)

 

  1. 请画出两个元素的位置图。(3分)

<div style=”width:1000px;height:500px;border:1px solid black;”>

 <div style=”width:100px;height:100px;border:1px solid black;margin-top:50%;”>

 </div>

   </div>

  1. 请用媒体查询写出,当屏幕尺寸小于等于414*763像素的时候,div为100*100像素,背景色为红色,当屏幕尺寸大于等于375*667像素的时候,div为100*100像素,背景色为蓝色,当屏幕尺寸为375*667到414*763像素到的时候,div为100*100像素,背景色为黄色,给出关键代码(6分)

 

@media screen and (min-width: 414px){

      .one{

        background-color: red;

      }

    }

    @media screen and (max-width: 375px){

      .one{

        background-color: blue;

      }

    }

    @media screen and (min-width: 375px) and (max-width: 414px){

      .one{

        background-color: yellow;

      }

    }

    .one{

      width: 100px;

      height: 100px;

    }

阅读更多
换一批

没有更多推荐了,返回首页