HTML第六章作业

1.什么是盒子模型?盒子模型的属性有那几个?它们的作用分别是什么?
1)CSS将网页中所有元素都看成一个个盒子。
2)盒子模型属性有边框、内边距和外边距。
3)边框设置网页元素边框的颜色、粗细和样式;外边距指与其他盒子之间的距离,也就是指网页中元素与元素之间的距离,便于精确控制盒子的位置;内边距用于控制内容与边框之间的距离,以便精确控制内容在盒子中的位置。
2.盒子模型有哪几种解析方式?它们有什么区别?
content-box:默认值,盒子的宽度或高度 = border+padding+(margin)+ width/height。
border-box:盒子的宽度或高度等于元素内容的宽度或高度。从盒子模型的介绍可知,这里内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子宽度或高度-border-padding)。
3.制作图北大青鸟网站的中心开班信息模块。要求如下:
<页面宽度250px,整体居中显示,背景使用线性渐变及1px的灰色圆角边框。
<标题左侧的小图标以背景图片的方式实现,标题颜色为白色。
<使用无序实现开班信息列表,列表前的小三角箭头和下方的虚线均使用背景图像的方式实现。
<列表超链接文本颜色为灰色,无下划线,当鼠标悬浮在超链接文本上是,字体颜色改变无下划线。
<页面中涉及的盒子模型解析方式都使用border-box。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4.制作图商品分类列表页面。
<商品列表放在一个div中,<div的四边框均为2px的橙色实线圆角边框。
<用结构伪类选择器选择每个列表并为其加上背景图每个列表下方1px的灰色虚线边框,但是最后一个列表项没有。
<文本超链接为黑色粗体,当鼠标悬浮在超链接文本上变色,平切无下划线。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
5.制作权威课程免费体验登录页面。
<页面文本颜色为白色,*的字体颜色为红色。
<使用无序列表排版单元素。
<无序列表内容在页面中居中显示。
<“免费体验”按钮使用背景图像的方式实现。
<按语义化使用表单元素,且是圆角边框。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

展开阅读全文

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