- 1、请说明常见的网页布局类型都有哪些?以及每种类型的布局,都适用于哪种类型的网站页面?
- 2、请简单说明viewport的作用?
- 3、请简单说明块级元素与内联元素(行内元素)的区别?
- 4、请说明display样式值none、block、inline、inline-block的作用区别?
- 5、请写出弹性布局(伸缩盒)的常用样式?(至少写出5个)
- 6、请说明响应式布局的作用及特点?以及响应式布局的实现方式?
- 7、请说明超链接标签target属性的作用,并列出target常用属性值?
- 8、请写出去掉超链接文字下划线的样式?
- 9、给超链接标签,添加鼠标悬停效果,使用的是哪一个伪类选择器?
- 10、请写出列表标签的常用样式?(至少写出3个)
- 11、请写出,通过CSS实现列表选项,全部横向排序的样式?
- 12、请写出CSS中常用的伪类选择器?(至少写出5个)
- 13、请写出HTML中video标签的常用属性及作用?(至少写出8个)
- 14、请简单说明HTML中表单的作用及特点?
- 15、请写出HTML中常用的表单元素都有哪些?(至少写出10个)
- 16、请写出HTML中常用的表单元素属性都有哪些?(至少写出8个)
- 17、请写出与表单元素相关的CSS样式都有哪些?(至少写出10个)
1、请说明常见的网页布局类型都有哪些?以及每种类型的布局,都适用于哪种类型的网站页面?
标签正文型布局:文章页面、注册页面
左右框架型布局:管理系统页面
T字型布局:小型网站页面
国字型布局:大型网站页面
2、请简单说明viewport的作用?
3、请简单说明块级元素与内联元素(行内元素)的区别?
1).行内元素:不独占一行,不能设置宽高
2).块级元素:独占一行,能设置宽高
4、请说明display样式值none、block、inline、inline-block的作用区别?
值 | 描述 |
---|---|
none | 此元素不会被显示。 |
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
5、请写出弹性布局(伸缩盒)的常用样式?(至少写出5个)
属性 | 描述 |
---|---|
display | 指定 HTML 元素盒子类型。 |
flex-direction | 指定了弹性容器中子元素的排列方式 |
justify-content | 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。 |
align-items | 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。 |
flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行。 |
align-content | 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐 |
flex-flow | flex-direction 和 flex-wrap 的简写 |
order | 设置弹性盒子的子元素排列顺序。 |
align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
flex | 设置弹性盒子的子元素如何分配空间。 |
6、请说明响应式布局的作用及特点?以及响应式布局的实现方式?
可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面<br />**实现方式:**<br /> 1)CSS3-Media Query(最简单的方式,但是无法满足很多需求) <br /> 2)借助原生Javascript(成本高,不推荐使用) <br /> 3)第三方开源框架(比如bootstrap,可以很好的支持浏览器的响应式布局)
7、请说明超链接标签target属性的作用,并列出target常用属性值?
作用:在何处打开目标 URL
值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
8、请写出去掉超链接文字下划线的样式?
a{
text-decoration:none;
}
9、给超链接标签,添加鼠标悬停效果,使用的是哪一个伪类选择器?
10、请写出列表标签的常用样式?(至少写出3个)
无序列表:type=”none” 无样式
type=”disc”实心圆 (默认值)
type=”circle”空心圆
type=”square”实心方块
11、请写出,通过CSS实现列表选项,全部横向排序的样式?
ui li{
width:70px;
margin:0 10px;
float: left;/*该处换为display:inline-block;同样效果*/
}
12、请写出CSS中常用的伪类选择器?(至少写出5个)
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
/*该元素是另一个元素的第一个子元素。*/
p:first-child {
color: blue;
}
13、请写出HTML中video标签的常用属性及作用?(至少写出8个)
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 “autoplay”,则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |