填空(20分)
- html中的注释为<!-- -->,CSS中的注释为/* */。
- 空格的实体为 ;。
- 下拉菜单的标签为<select>,菜单中的每个选项标签<option>。
- HTML对文字加粗的两种方式<b>,<strong>。
- CSS对文字加粗的方式font-weight:bold/bolder/font-weight:900;。
- <img src="./tset.png" alt=" ">中,alt有什么含义?在浏览器无法载入图像时,显示该属性中的文本当图片加载失败的时候文本替换。
- 在<a target=””></a>中,当target_sel在当前页面打开,当target=_blank 在新标签页打开,取消a标签中的默认下划线的属性为text-decoration:none
- 在表格中,对<td>设置什么属性可以跨行 rowspan 和跨列colspan 。
- 为form表单设置提交方式的属性是method。(post/get)
- 对表单元素禁用的布尔值属性是disabled。
- 对input输入框默认聚焦的布尔值属性是autofocus。(自动聚焦)
- 对于<input type=”checkbox”>来说,默认被勾选的布尔值属性checked。
- 对字体设置颜色的CSS属性是color还是font-color?color。
- 对浮动元素清除浮动的属性是clear:left/right/both; overflow:hidden;
简答(39分)
- 常用的块级元素有(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
- 请写出相对定位,绝对定位以及固定定位属性及属性值,并写出他们之间的区别。(3分)
1.position:relative,相对定位,相对于元素自身原来的位置进行定位,不脱离文档流;通过left/right/top/bottom定位
2.position:absolute,绝对定位,如果父级元素中有定位元素,会去找最近的父级元素作为参考,进行绝对进行,如果没有,参照页面(浏览器视口)进行定位;脱离文档流,通过left/right/top/bottom定位
3.position:fixed;固定定位,固定在浏览器的视口内,脱离文档流,通过left/right/top/bottom定位
- 对以下CSS样式优先级进行排序(8分)
- Id选择器 b.类选择器 c.标签选择器d.行内样式 e.通配符* f.浏览器默认属性 g. 继承 h. !important
!important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 如何取消列表前默认实心圆标志?请用CSS代码实现。(2分)
list-style:none;list-style-type:none;
- 绝对路径和相对路径的区别(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
按钮 复选框 选择文件 图片按钮 密码 单选框 重置 提交 文本
- 写出两种隐藏元素的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分)
- 怎样居中(水平+垂直)一个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>
- 如何取消a标签的默认样式?如何设置a标签点击前 点击后 点击时 悬停时的样式及顺序?。(5分)
取消默认样式
a{
text-decoration: none;
color: black;
}
a:link{}
a:visited{}
a:hover{}
a:active{}
- 请画出下面代码运行后的样式,标注宽高和间距。(5分)
- 请画出两个元素的位置图。(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>
- 请用媒体查询写出,当屏幕尺寸小于等于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;
}