书签 分享 收藏 举报 版权申诉 / 22
立即下载 加入VIP,免费下载
当前位置： 首页 > 高中教育 > 数学 > 网页课程设计与报告.docx

类型网页课程设计与报告.docx

  • 文档编号：9468934
  • 上传时间：2023-02-04
  • 格式：DOCX
  • 页数：22
  • 大小：185.55KB

此处显示id"nav"的内容

此处显示id"main"的内容

此处显示id"side"的内容

此处显示id"footer"的内容

 

图2-3

2、创建CSS文件

创建一个外联的层叠样式表，将CSS代码写如下：

/*body*/

#container{width:

900px;margin:

0auto;}

/*header*/

#header{height:

70px;background:

#CCFFCC;margin-bottom:

8px;}

#nav{height:

30px;background:

#CCFFCC;margin-bottom:

8px;}

/*main*/

#maincontent{margin-bottom:

8px;}

#main{float:

left;width:

664px;height:

500px;background:

#FFFF99;}

#side{float:

right;width:

228px;height:

500px;background:

#FFCC99;}

/*footer*/

#footer{height:

70px;background:

#CCFFCC;}

 

第三章网页详细设计

1、头部的和导航栏设计

头部：

分为两部分，一个是logo（3-1）靠左侧显示，一个是搜索（3-2）靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。

另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。

如果要在logo加上链接的话，那么就不能用背景图片的方法了。

产品搜索

图3-1图3-2

用如下代码实现：

搜索产品

#search{float:

right;height:

24px;margin-top:

30px;color:

#444;}

.inp_srh{width:

140px;height:

17px;padding-left:

20px;background:

url（../images/srh_bg.gif）00no-repeat;border:

1pxsolid#cbcbcb;}

.btn_srh{width:

58px;height:

23px;background:

url（../images/btn_srh.gif）00no-repeat;border:

none;cursor:

pointer;text-indent:

-999em;}

#search*{vertical-align:

middle;}

inp_srh的宽度和高度并不是实际效果图中的宽高，是因为默认情况下文本框带有内边距造成的。

另外就是padding的值也会算到总宽度上的；

btn_srh就是应用背景图像来实现的，说明一点这里的border的值为none指的是无边框，cursor定义鼠标样式为手形，text-indent:

-999em这个属性它的作用相当于word中的首行缩进，这里设置成-999，意思是向左侧缩进-999em，这样就看不到文字，所以它的作用是将按钮上的文字隐藏。

导航分为一级导航和二级导航，所以我需要在nav下再插入nav_main和nav_son两个块元素。

先设置nav的高度及背景图片样式。

#nav{height:

66px;background:

url（../images/nav_bg.gif）00repeat-x;argin-bottom:

8px;}

一级导航栏使用如下代码：

  • qiehuan（0）href="/">首页

  • 企业新闻

  • 企业简介

  • 产品展示

  • 企业历史

  • 招商加盟

  • qiehuan（6）">企业文化

  • 网上下单

  • 联系我们

    • 二级导航栏代码如下：

    block">

  • 论坛模板

    • none">

    CSS代码如下：

    #menuUL{BORDER-BOTTOM:

    0px;BORDER-LEFT:

    0px;PADDING-BOTTOM:

    0px;LINE-HEIGHT:

    150%;LIST-STYLE-TYPE:

    none;MARGIN:

    0px0px0px15px;PADDING-LEFT:

    0px;PADDING-RIGHT:

    0px;BORDER-TOP:

    0px;LIST-STYLE-IMAGE:

    none;BORDER-RIGHT:

    0px;PADDING-TOP:

    0px}

    #menu_out{PADDING-LEFT:

    4px;WIDTH:

    956px;BACKGROUND:

    url（../images/menu_left.gif）no-repeatlefttop;MARGIN-LEFT:

    auto;MARGIN-RIGHT:

    auto}

    #menu_in{PADDING-RIGHT:

    4px;BACKGROUND:

    url（../images/menu_right.gif）no-repeatrighttop}

    #menu{BACKGROUND:

    url（../images/menu_bg.gif）repeat-x;HEIGHT:

    73px}

    .menu_line{WIDTH:

    8px;BACKGROUND:

    url（../images/menu_line.gif）no-repeatcentertop}

    .menu_line2{WIDTH:

    15px;BACKGROUND:

    url（../images/menu_line2.gif）no-repeatcentertop}

    #nav{PADDING-LEFT:

    20px}

    #navLI{FLOAT:

    left;HEIGHT:

    35px}

    #navLIA{PADDING-LEFT:

    6px;DISPLAY:

    block;BACKGROUND:

    url（../images/menu_on_left.gif）no-repeatlefttop;FLOAT:

    left;HEIGHT:

    35px;CURSOR:

    pointer;TEXT-DECORATION:

    none}

    #navLIASPAN{PADDING-BOTTOM:

    10px;LINE-HEIGHT:

    14px;PADDING-LEFT:

    10px;PADDING-RIGHT:

    14px;BACKGROUND:

    url（../images/menu_on_right.gif）no-repeatrighttop;FLOAT:

    left;COLOR:

    #ffffff;FONT-SIZE:

    14px;FONT-WEIGHT:

    bold;TEXT-DECORATION:

    none;PADDING-TOP:

    11px}

    #navLI.nav_on{BACKGROUND-POSITION:

    left100%}

    #navLI.nav_onSPAN{PADDING-BOTTOM:

    7px;PADDING-LEFT:

    10px;PADDING-RIGHT:

    14px;BACKGROUND-POSITION:

    right100%;COLOR:

    #333333;TEXT-DECORATION:

    none;PADDING-TOP:

    14px}

    #menu_con{TEXT-ALIGN:

    left;PADDING-LEFT:

    20px;CLEAR:

    both}

    #menu_conLI{MARGIN-TOP:

    8px;FLOAT:

    left;HEIGHT:

    22px}

    #menu_conLIA{PADDING-LEFT:

    3px;DISPLAY:

    block;BACKGROUND:

    url（../images/menu_on_left2.gif）no-repeatlefttop;FLOAT:

    left;CURSOR:

    pointer}

    #menu_conLIASPAN{PADDING-BOTTOM:

    4px;LINE-HEIGHT:

    12px;PADDING-LEFT:

    10px;PADDING-RIGHT:

    10px;BACKGROUND:

    url（../images/menu_on_right2.gif）no-repeatrighttop;FLOAT:

    left;PADDING-TOP:

    6px}

    #menu_conLIA:

    hover{BACKGROUND:

    url（../images/menu_on_left2.gif）no-repeatleftbottom;TEXT-DECORATION:

    none}

    #menu_conLIA:

    hoverSPAN{BACKGROUND:

    url（../images/menu_on_right2.gif）no-repeatrightbottom}

    做出的效果图如下3-3：

    图3-3

    通过使用图片，使得该二级导航栏具有动态效果，导航栏部分完成。

     

    2、布局页面——侧边栏

    主体部分先从侧边栏说起，侧边栏可以共用一个样式，下面就先做一个通用的，插入如下html代码

    这里的标题采用h2标签，没必要再用个div，还有“产品导购”中“产品”二字是红色字体，这里用strong标签，这样可以省去很多没必要的定义。

    定义侧边栏的样式如下3-4：

    #side{float:

    right;width:

    228px;}

    .side_box{margin-bottom:

    8px;}

    .side_boxh2{height:

    25px;padding:

    6px10px010px;background:

    url（../images/side_bg.gif）00no-repeat;font-size:

    14px;color:

    #444;}

    .side_boxh2strong{color:

    #f30;}

    .side_con{padding:

    10px;background:

    url

    （../images/side_bg.gif）0bottomno-repeat;}

    图3-4

     

    产品导购部分，内容分为三部分，可以用ul、li列表的形式实现，前边的图标用背景图片来实现，可以在li上设置背景图片。

    产品导购

     

    “产品导购”的样式定义如下（图3-5）：

    图3-5

    .product{padding:

    0px10px;}

    .productul{background:

    url（../images/icon2.gif）5px12pxno-repeat;}

    .productulli{height:

    58px;padding:

    14px0064px;border-bottom:

    1pxdashed#dcdcdc;color:

    #777;}

    .productullistrong{display:

    block;height:

    24px;color:

    #333;}

    .productullia{color:

    #777;}

    .productullia:

    hover{text-decoration:

    underline;}

    .productulli.product3{border-bottom:

    none;}

    “产品导购”完成后，下边该“使用问答”了。

    “使用问答”部分都是一问一答的形式，问答各采用不同的图标，而且问的文字加粗了。

    所以这部分采用dl、dt、dd的形式来完成。

    最新出的这个产品如何使用？

    该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...

    最新出的这个产品如何使用？

    该产品采用全新的技术，较上一...

    最新出的这个产品如何使用？

    该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了...

    最新出的这个产品如何使用？

    该产品采用全新的技术，较上一产品有质的飞跃，功能上增强...

    最新出的这个产品如何使用？

    该产品采用全

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

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

    特殊限制：

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

    关 键  词：
    网页 课程设计 报告
    提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
    关于本文
    本文标题：网页课程设计与报告.docx
    链接地址：https://www.bdocx.com/doc/9468934.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    copyright@ 2008-2022 冰点文档网站版权所有

    经营许可证编号:鄂ICP备2022015515号-1

    收起
    在线客服
    意见反馈
    返回顶部
    展开
    QQ交谈
    返回顶部