网页布局实习报告.docx

--bottom-->

3.3页面的浏览

3.2.1制作内容与导航

页面的整体框架有了大体设计之后，对各个模块进行分别的处理就容易得多。

首先制作页面的首页，然后内容页在根据首页的风格进行具体的设计。

该页分为上、中、下3个部分，中间又分为左、右两个部分，左边主要有教师简介和课程介绍。

右边又分为上、中、下3部分，上面是一张图片，中间是学习内容和图片，下面又分为左、右两部分左边是图片加文字，右边也是一样的，主要使主页整体看起来简洁大方。

整个导航的背景直接使用141px宽的图片，使用决定定位的方法。

此时页面的导航栏效果如图3.2.1所示。

图3.2.1#top块的导航

整个导航采用项目列表的HTML的

• 标签实现，再使用左浮动，设定margin和padding的值实现。

  HTML代码如下：

  --top-->

  • 首页
  • 课程介绍
  • 学习内容
  • 模拟实验
  • 单位换算
  • 相关资源

  • 搜索

  • 笔记本
  • 联系老师
  • 帮助

   

  CSS代码如下：

  body.html{width:

  100%;height:

  100%;line-height:

  24px;}

  *{margin:

  0;padding:

  0;font-size:

  12px;}

  a{color:

  #000;text-decoration:

  none;}

  ul,ol{margin:

  0;padding:

  0;list-style:

  none;}

  body{background:

  url（../img/beij.jpg）repeat-x;}

  .content{width:

  918px;margin:

  0auto;background:

  url（../img/000.1.jpg）repeat;padding:

  0px9px;}

  /*top*/

  .top{height:

  100px;background:

  url（../img/1.jpg）no-repeatcenter;}

  .top{height:

  141px;background:

  url（../img/1.jpg）0toprepeat-x;padding-left:

  400px;}

  .topul{margin:

  0auto;}

  .topli{float:

  left;text-align:

  center;line-height:

  45px;background:

  url（../img/21.jpg）no-repeat;}

  .toplia{font-family:

  "微软雅黑";font-size:

  14px;color:

  #FFF;font-weight:

  bold;display:

  block;padding:

  015px;}

  .toplia:

  hover{color:

  #C00}

  .nav{height:

  52px;background:

  url（../img/0.1.jpg）0toprepeat-x;padding-left:

  250px;}

  .navul{margin:

  0auto;}

  .navli{float:

  left;text-align:

  center;line-height:

  25px;}

  .navlia{font-family:

  "微软雅黑";font-size:

  13px;color:

  #FFF;font-weight:

  bold;display:

  block;padding:

  00px;}

  .navlia:

  hover{color:

  #C00}

  3.2.2制作页面左侧列表

  最后在设定超链接和标题内容。

  这个学院有哪些老师和课程介绍。

  如图3.2.2.1和图3.2.2.2所示。

  图3.2.2..1教师简介

  图3.2.2.2课程介绍

  左则例表的HTML代码如下。

   

  教师简介

  陈福南，女士，副教授，重庆人，1972年生，中共党员，1994年7月毕业于重庆大学化工学院，现为西南大学化学化工学院教学人员。

  任教以来讲授过专科、本科、教育硕高帅硕士等....

  >>>>点击进入

   

  课程介绍

  《化工基础》是一门理论密切联系生的产实际技术应用课程，他以化工生产为研究对象，以理论的应用为重点，研究化工类生产中具有共同特点的单元操作和化学反应器基础原理，具有工理性、应用性和综合性的特点......

  >>>>点击进入

  左则列表的CSS代码如下。

  .mainh3{font-family:

  "微软雅黑";font-size:

  14px;color:

  #0CF;font-weight:

  bold;display:

  block;padding:

  020px;}

  .mainulh3:

  hover{color:

  #FFF}

  .main-imges{width:

  918px;height:

  523px;padding:

  0px0px;background-color:

  #0F0;}

  .main-left{width:

  293px;height:

  523px;padding:

  0px0px;background:

  url（../img/213.jpg）;}

  img{float:

  left;

  margin-right:

  50px;

  margin-bottom:

  10px;

  margin-left:

  10px;

  }

  #d1{

  width:

  274px;

  height:

  40px;

  margin-left:

  10px;

  color:

  #fff;

  background:

  url（../img/3.jpg）;

  }

  #d2{

  width:

  274px;

  height:

  200px;

  padding-top:

  10px;

  margin-left:

  10px;

  }

  #d3{

  width:

  274px;

  height:

  40px;

  margin-left:

  10px;

  margin-top:

  10px;

  color:

  #fff;

  background:

  url（../img/3.jpg）;

  }

  #d4{

  width:

  274px;

  height:

  150px;

  padding-top:

  10px;

  margin-left:

  10px;

  }

  .footerp{width:

  271px;

  height:

  0px;

  margin-top:

  40px;

  padding-left:

  190px;

  }

  .footerp:

  hover{color:

  #0CF;}

  3.2.3制作页面主题内容

  学院的主要学习那些内容和图片和有哪些分析，如图3.2.3.1所示。

  图3.2.3.1主题内容部分

  右则的内容和图片的HTML代码如下。

   

  学习内容

  • 第一章
  • 第二章
  • 第三章
  • 第四章
  • 第五章

  第一章绪论

  【内容提要】介绍本课程的性质和内容。

  在对化工生产的基本过程作出介绍和分析之后，给出单元操作和反应过程的概念。

  对化工生产中的四个基本规律，即物料衡算、能量衡算、平衡关系和过程速率，进行较详细的阐述和讨论。

  同时，对化工生产工艺流程图作简要介绍。

  >>>>点击进入

  换算单位

  相关资源

   

  模拟实验

   

  >>>>点击进入

  右则的内容和图片的CSS代码如下。

  .main-contect{float:

  right;width:

  629px;height:

  523px;padding:

  0px0px;background-color:

  #fff;}

  #d5{

  width:

  54px;

  height:

  50px;

  color:

  #fff;

  margin-left:

  20px;

  background:

  url（../img/5.jpg）;

  }

  #d6{

  width:

  370px;

  height:

  16px;

  margin-top:

  0px;

  margin-left:

  100px;

  background:

  url（4.jpg）;}

  #cont{float:

  left;

  width:

  444px;

  height:

  95px;

  margin-top:

  20px;

  background:

  url（../img/26.jpg）;}

  #d7{width:

  444px;

  height:

  140px;

  margin-top:

  20px;

  margin-right:

  0px;;}

  #d8{

  width:

  322px;

  height:

  9px;

  margin-top:

  0px;

  margin-left:

  70px;

  background:

  url（../img/19.jpg）;}

  #d9{

  width:

  600px;

  height:

  148px;

  margin-top:

  20px;

  margin-left:

  20px;

  }

  #d11{

  width:

  178px;

  height:

  162px;

  margin-bottom:

  30px;

  margin-left:

  430px;

  background:

  url（../img/8yimkuyho.jpg）;}

  #d12{float:

  left;

  width:

  105px;

  height:

  16px;

  background:

  url（../img/12.jpg）;}

  #top{

  width:

  629px;

  height:

  20px;

  background:

  url（../img/2556.jpg）;

  }

  #contect{width:

  629px;

  height:

  233px;

  background:

  url（../img/2557.jpg）;

  }

  .contecth3{font-family:

  "微软雅黑";font-size:

  14px;color:

  #FFF;font-weight:

  bold;display:

  block;padding:

  015px;

  }

  .contectulh3:

  hover{color:

  #fff;}

  #bottom{float:

  left;

  width:

  627px;

  height:

  277px;

  background:

  url（../img/2558.jpg）;

  }

  #con{width:

  444px;

  height:

  277px;

  }

  #botto{

  float:

  right;

  width:

  180px;

  height:

  279px;

  background:

  url（../img/uioukk.jpg）;}

  #dw{width:

  90px;

  height:

  25px;

  margin-top:

  65px;

  margin-left:

  12px;

  }

  #do{width:

  90px;

  height:

  22px;

  margin-top:

  70px;

  margin-left:

  12px;

  }

  #dop{font-family:

  "微软雅黑";font-size:

  13px;color:

  #FFF;font-weight:

  bold;display:

  block;padding:

  017px;}

  #dop:

  hover{color:

  #C00;}

  #dwp{font-family:

  "微软雅黑";font-size:

  13px;color:

  #FFF;font-weight:

  bold;display:

  block;padding:

  017px;}

  #dwp:

  hover{color:

  #C00;}

  #d6{height:

  16px;background:

  url（4.jpg）0toprepeat-x;padding-left:

  2px;}

  #d6ul{margin:

  0auto;}

  #d6li{float:

  left;text-align:

  center;line-height:

  20px;background:

  url（4.jpg）no-repeat;}

  #d6lia{font-family:

  "微软雅黑";font-size:

  14px;color:

  #FFF;font-weight:

  bold;display:

  block;padding:

  025px;}

  #d6lia:

  hover{color:

  #C00}

  #bot{float:

  right;width:

  180px;height:

  277px;padding:

  0px0px;background:

  url（../img/uioukk.jpg）;}

  .aip{width:

  555px;

  height:

  20px;

  margin-top:

  80px;

  padding-left:

  510px;

  }

  .aip:

  hover{color:

  #0CF;}

  .aup{width:

  555px;

  height:

  20px;

  margin-top:

  120px;

  padding-left:

  350px;

  }

  3.2.4制作页面底部内容

  最后，是页面下方的脚注。

  #bottom脚注与其他页面一样，保持简单、清新的风格。

  本例中脚注

  块里只有一个学院名称和网址，

  
  文档加载中……请稍候！
  如果长时间未打开，您也可以点击刷新试试。

  下载文档到电脑，查找使用更方便

  下载	加入VIP,免费下载

  还剩页未读，继续阅读

  
  举报
  版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

  配套讲稿：

  如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

  特殊限制：

  部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

  关 键  词：

  网页 布局 实习 报告

    冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
  该用户的其他资源 更多>>

  • 《曹刿论战》知识点归纳与专项阅读.docx

  • 《安塞腰鼓》教学实录doc.docx

  • 《传统文化的继承》同步练习5人教版必修3.docx

  • 《富兰克林自传》读后感15篇.docx

  • 《老龄产业发展现状问题与对策研究》.docx

  • 《企业安全生产台帐》word版.docx

  • 《》教案.docx

  • 《公共营养师》基础部分试题及答案.docx

  • 《基金科目二》试题及答案解析6.docx

  • 《建筑业企业资质等级标准》建建82号.docx

  • 《苦夏冯骥才》阅读答案3.docx

  • 《普通化学》.docx

  • 《安全标准化二级年度自评工作首次会议议程范文》.docx

  • 《观刈麦范文》.docx

  • 《常用文体写作》题库与答案.docx

  • 《阿房宫赋》鉴赏教学实录5篇.docx

  • 《蝉》教案.docx

  • 《妇女维权倡议书3篇》.docx

  • 《健康评估》考试试题及答案 客观题一套.docx

  • 《三毛流浪记》阅读试题.docx

  • 《食用菌工厂化栽培实施方案》.docx

  • 《铁路机车操作规程》63页word.docx

  • 《信息系统安全系统等级保护基本要求》二级三级等级保护要求比较.docx

  • 《中小学德育工作指南》解读.docx

  • 7古代东方国家及古希腊古罗马的学前教育可编辑修改word版.docx

  • 《对幼儿行为习惯养成教育的研究》之结题报告.docx

  • 《工笔人物》课程教学大纲.docx

  • 《彩色的梦》教案.docx

  • 《红红楼梦》31回至40回故事梗概.docx

  • 《看上去很美》观后感.docx

  • 《汽轮机本体检修》高级工题库完整.docx

  • 《别了司徒雷登》.docx

  猜你喜欢

  • 最新范文暑期报社实习实习总结（共4页）2400字.docx

  • 最新范文最新助理工作计划范文参考（共2页）600字.docx

  • 最新范文学院会计工作计划范文（共7页）4300字.docx

  • 最新范文暑期大学生话务员实习总结（共5页）2700字.docx

  • 最新公证员实习报告模板_2篇（共4页）2300字.docx

  • 最新关于协和医大本科生的科研实习报告总结（共2页）900字.docx

  • 最新范文一年级《生命的秘密》教学工作计划范文（共3页）1600字.docx

  • 最新范文暑期大学生实习总结（共3页）1800字.docx

  • 最新会计营业部工作总结精选范文（共1页）600字.docx

  • 最新范文暑期服装店实习报告范文最新范文字（共4页）2400字.docx

  • 最新范文医保工作计划免费模板（共5页）3100字.docx

  • 最新金工实习报告（共4页）2100字.docx

  • 最新范文暑期优秀实习工作总结（共4页）2600字.docx

  • 最新范文医生年终总结（共5页）2800字.docx

  • 最新临床医学实习报告范文（共7页）4500字.docx

  • 最新范文司法行政工作总结范文4篇（共29页）19600字.docx

  • 最新人力资源部实习报告范文（共3页）1700字.docx

  • 最新范文医药代表工作总结范文4篇（共11页）7100字.docx

  • 最新范文苏宁仓库实习报告（共5页）3100字.docx

  关于本文

  本文标题：网页布局实习报告.docx
  链接地址：https://www.bingdoc.com/p-16178435.html
  
  相关资源 更多

  • 网页美工实习报告.docx
  • 网站美工实习报告.docx
  • 网页美工实训报告.docx
  • 网页美工实习报告Word文档下载推荐.docx
  • 网站美工实习报告范文（共4页）2700字.docx
  • 网站美工实习报告精选（共5页）3100字.docx
  • XX网站美工专业实习报告.docx
  • XX网站美工专业实习报告.docx
  • 网站美工实习报告文档格式.docx
  • 网站美工编辑实习报告范文.docx