CSS-作业要求-后台管理系统布局练习.docxVIP

作业需求 后台管理系统布局 作业需求 后台管理系统布局 V布局示例图片＞ header leftNav content footer V基本需求＞ 1、制作一个”后台管理系统布局”页面; 2、主要布局元素分为三个大块，页头header、页面主体main和页脚 foote匚而页面主体mFn又分为左侧导航leftNn和正文内容content; 3、 leftNav和content均为一个Class名称，并且都为块级元素， 通过CSS属性float : left将他们合并到一行进行左右布局; 4、header的高度为50像素，背景色#159,内容为Web（现在班级） 班后台管理系统，字号20像素，字体颜色，并且在header里面,水 平左对齐，垂直居中; 5、footer的高度为30像素,背景色同样为#159，内容为解释权归（班 级名称）所有，任何组织和个人严禁使用和抄袭，字号14像素,字体颜色 #e3e3e3，并且在footer里面水平居中，垂直居中; 6、main的高度占据除了 header和footer”以外的全部高度，页面不 得出现滚动条。该标签内的全部字体大小均为16像素; 7、 main内leftNav的宽度为220像素，“leftN的元素含有内间距, 上下为12像素,左右为10像素,背景色为#48c”，包含3个超链接按钮, 这三个按钮的宽度为100% （实际上显示来约200像素），高度为40像索,默 认字体颜色为，无下划线。具有1个像素实线的透明边框，当鼠标移动上 去和被选中状态下,背景色变为#159,边框的颜色变为“#acf,并且具 有5像素的圆角，具体如下： ?管理系统首页（默认被选中） ?班级基本管理 ?学员基本管理 被选中的超链接具有一个发光效果,发光效果在水平和垂直方向不做任彳可偏 移，发光范围为8像素，阴影颜色为rgba（200” 220, 240, 0.8）; 9、main内content内包含一个iframe标签，默认显示页面为管理 系统首页,当点击左侧导航按钮后，0常到对应的页面; 10、content内的iframe标签没有边框,宽W高都为100% ; 11.管理系统首页、班级基本管理和学员基本管理这三个页面包含 在项目根目录下的一个名为pages的文件夹内（注意设置这三个页面＜html＞ 标签内的lang属性的值和＜title＞标签对内的内容）; 12、这三个页面都需要包含一个公共的CSS文件,文件名为“commorucss该文件应该放置于根目录下CSS”文件夹内，设置的样式内容如下; ?charset utf?8; body { backbground-color: #fff; margin: 0; padding: 0; font: 16px 微软雅黑； color: #333; box-sizing: border-box; 13、这三个页面内都需要包含一个一级标题，标题字体大小为20像素，文本居 中,文本的内容为超链接按钮内对应的文本内容，这些样式都需要写在公共的 CSS 样式common.css内； 14. CSS样式需要使用夕噬样式”； 15、代码需要工整的缩进（以缩进线为参考）; 16、HTML和CSS关键代码节点部分需要加上代码注释 V所用关键代码提示＞ 1、2、鼠标悬浮后变为手型的CSS 1、 2、 背景颜色 CSS 属性—background-color 3、元素浮动CSS 3、 元素浮动CSS样式-float: left; 4、 元素宽度计算的写法-calcO V初级扩展＞ 1、左侧导航按钮具有一个行高,行高为46像素,并且水平、垂直居中; 2、左侧导航按钮”在鼠标悬浮上去后鼠标形状会变成一个手型 ＜中级扩展＞ 1、左侧导航的超链接按钮的显示类型变成一个block,宽度相对于父级 100% ,高度46像素; 2、左侧导航按钮当鼠标悬浮上去后的效果更改为按钮背景色变为#159”， 字体颜色不再产生变化，也不要产生下划线 V高级扩展＞ 1、消除content内的＜iframe＞元素的边框,使＜iframe＞相对于content 元素的宽度和高度均为100% （即填满整个class为content的元素） ＜注＞:若扩展功能和基本功能有冲突，优先执行扩展功能。 V作业提交基本格式＞ 邮件名为后台管理系统布局??XXX （您的姓名），附件信息如下: 后台管理系统布局-XXX （您的姓名）.zip （或rar/7z ） XXX （您的姓名） 、、cssin dex.html 、、 css img