现代殡葬技术与管理专业群课程主题音乐网站页面设计.pptx

网页设计客户端技术课程现代殡葬技术与管理专业群教学资源库主讲人：严志课程主题：音乐网站页面设计

音乐网站页面设计项目实训CSS代码编写03项目概述01HTML布局02

项目概述01音乐网站页面设计项目实训项目实训

主页面结构组成：页面整体由container构成，内含header、middle、bottom三大部分构成。header里面包括音乐网站头部logo和菜单；middle包含Iframe内联框架；bottom部分设置版权信息。HTML布局02物流管理系统主页设计项目实训物流管理系统主页设计项目实训页面结构

header区块组成：由logo_section、search_box、menu三大部分构成。logo_section里包括网站logo区域search_box包含搜索区域，menu部分设置网站导航。headerHTML布局02物流管理系统主页设计项目实训物流管理系统主页设计项目实训

#logo_section{width:auto;height:auto;margin-top:60px;?margin-left:60px;float:left;display:inline;}#logo_sectionh1{padding-top:10px;font-size:42px;color:#fff;??margin:0px;font-weight:normal;}#logo_sectionh1span{color:#900;font-size:36px;}#logo_sectionh2{font-size:18px;color:#00c6d8;??padding-top:5px;font-weight:normal;}CSS代码-搜索CSS03物流管理系统主页设计项目实训物流管理系统主页设计项目实训

#search_box{width:335px;height:50px;float:right;margin-top:90px;margin-right:20px;padding-top:15px;background:url(../images/search_box_bg.jpg)no-repeat;}CSS代码–搜索CSS03物流管理系统主页设计项目实训物流管理系统主页设计项目实训

#menu{width:930px;height:49px;margin:0auto;padding:00030px;color:#03a0a6;}#menuul{float:left;width:930px;margin:0;padding-top:4px;list-style:none;}#menuulli{display:inline;}#menuullia{float:left;width:110px;padding-top:8px;font-size:14px;??font-weight:bold;text-align:center;text-decoration:none;color:#ffffff;}#menulia:hover,#menuli.current{color:#003399;??height:36px;background:url(../images/menu_current.jpg)repeat-x;}CSS代码–导航CSS03物流管理系统主页设计项目实训物流管理系统主页设计项目实训

项目总结页面内导航技术，采用超链接+Iframe实现页面导航；Div块状元素具备内联元素特性的display属性设置；熟悉div+css网页设计布局技术；CSS样式设置及调试技巧。

感谢聆听，批评指导