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

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

  1. 1、本文档共13页,可阅读全部内容。
  2. 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多

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

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

文档评论(0)

方世玉 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

版权声明书
用户编号:6101050130000123

1亿VIP精品文档

相关文档