现代殡葬技术与管理专业群课程主题物流管理系统主页设计.pptx

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

CONTENTSCONTENTS物流管理系统主页设计项目实训

物流管理系统主页设计项目实训编写style.css公共样式代码03物流网站项目析01编写HTML结构代码02实现header响应式效果04

物流网站项目01物流管理系统主页设计项目实训物流管理系统主页设计项目实训

页面结构组成：响应式页面由top、center、bottom三大部分构成。top里面包括导航菜单，在div中嵌套ul列表制作导航菜单；center包含div#left和div#right两部分，点击左边区域右边切换页面；bottom部分设置版权信息。物流网站项目-分析01物流管理系统主页设计项目实训物流管理系统主页设计项目实训页面结构项目结构示意图

项目目录结构中的各个目录及文件说明：项目目录里面包含images文件，以及companyAdd.htmlwelcome.html文件。images文件目录里存放项目中用到的图片。项目素材目录物流网站项目-分析01物流管理系统主页设计项目实训物流管理系统主页设计项目实训

STEP01body??!--top部分?--??div?id=“top/div??!--?center部分?--??div?id=“centerdiv?id=“left/divdiv?id=“right/div/div??!--?bottom部分?--??div?id=“bottom/div/body创建index.html在index.html文件中，编写HTML结构代码。编写HTML结构代码02物流管理系统主页设计项目实训物流管理系统主页设计项目实训

设置div#top样式在html文件中编写导航菜单样式。/*头部导航设置*/????#top{??????width:1024px;??????height:228px;??????padding:0;??????margin:0auto;???????background-image:url(images/bg.jpg);????????background-repeat:no-repeat;??????}????.navli{??????padding:0;??????list-style:none;??????display:inline-block;????????margin-left:20px;????????margin-top:16%;??????color:white;??????font-size:20px;??????font-weight:bold;????}

????.nav{???????????border:1pxsolidred;??????????margin:0%;??????padding:0%;??????height:inherit;????}STEP02编写style.css公共样式代码03物流管理系统主页设计项目实训物流管理系统主页设计项目实训

??#left{??????width:20%;??????height:530px;??????border:1pxsolidred;??????display:inline-block;??????margin-right:2px;??????vertical-align:top????}????#left.leftmenuli{??????list-style:none;??????margin:40px25px;????}????#right{??????width:78%;??????height:530px;??????border:1pxsolidred;??????display:inline-block;??????vertical-align:top????}实现he