优酷仿站讲解幻灯片.pptx

优酷仿站讲解;头部（headerBox）;目录;目录;目录;此实验需要运用FW软件，主要用来切图，是一种电脑制图材料可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。;如何在FW中切图;此实验结构分为两大部分，将youku.html分为源代码及一个独立的css文件中，此文件的扩展名为css，然后在HTML文件中的link标记中把css文件引入到html脚本文件中，link通常放在head标记中。;body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form, fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;} body{font-size:12px;} img{border:none;} ul,ol{list-style:none;} input,select,textarea{outline:none; border:none; background:#FFF;} textarea{resize:none;} a{text-decoration:none;} /*清浮动*/ clearfix:after{content:;display:block;clear:both;} clearfix{zoom:1;};头部 .headerBox{background:#f5f5f5; height:60px;} /*用于设置宽为60px背景为#f5f5f5的背景条*/ .logo{padding-top:19px;width:320px;} /*设置“youku优酷的上边内边距和宽度*/ .searchbox{width:320px;position:relative;} /*设置“搜索框的宽度并相当位置*/ .search_input{width:216px;height:14px;line-height:14px; border:2px solid #9f9f9f;border-right:none; margin-top:10px;padding:11px 6px;font-size:14px;} /*设置输入框的宽度，行高，边框线*/ .search_btn{width:90px;height:40px; background:url(../img/search_btn.png) left top no-repeat; margin-top:10px;} /*设置搜索按钮的宽度，背景*/ ;搜索下拉框样式 .search_hover{border-color:#3EABFF;} /*当鼠标移动到上时边框颜色改变*/ .search_show{display:none;width:440px;border:2px solid #3EABFF; padding:2px 3px; position:absolute;left:0;top:48px;background:#fff;} /*设置搜索框的结果反馈相关参数*/ .search_list{width:259px;font-size:14px; border-top:1px solid #f3f3f3; border-right:1px solid #f3f3f3;} /*设置搜索框下拉列表样式*/ .search_list li{height:30px;line-height:30px;border-bottom:1px solid #f3f3f3; padding:0 8px 0 5px;} /*当鼠标移动到上时边框颜色改变*/ .search_list .active{background:#f3f3f3;} /*设置当前对象的背景色*/ .search_list li a{float:left;color:#8f8f8f;} /*设置左浮动及字体颜色*/ .search_list li span{float:right;font-size:12px;color:#8f8f8f;} /*设置左浮动，字号，颜色*/;.imgshow{width:172px;background:#f3f3f3;paddin