当前位置:首页>> >>


韩国泡泡女装网.rar

收藏

资源目录
    文档预览:
    编号:20181030004000456    类型:共享资源    大小:4.35MB    格式:RAR    上传时间:2018-10-30
    尺寸:148x200像素    分辨率:72dpi   颜色:RGB    工具:   
    18
    金币
    关 键 词:
    韩国 泡泡 女装
    资源描述:
    《Web 基础实训》课程设计报告韩国泡泡女装网的设计与实现姓 名:刘昆班 级:1703学 号:2115170014完成时间:2018.7.13淮阴师范学院计算机科学与技术学院1.总体设计1.1 功能模块设计系统从功能上可以分为以下几个模块首页、新品上市、女士风尚、品牌理念、联系我们、留言板如下图所示:系统模块图以下是各个模块的具体介绍:1、 首页:(1) 展示 2015 年韩国泡泡女装网的代表女装(2) 为泡泡女装打广告(3) 可以设置这个页面为浏览器首页(4) 可以将此页面收藏在浏览器中(5) 左上方的搜索框提供用户搜索功能(6) 左侧的链接可以提供用户浏览更多的信息2、 新品上市:(1) 展示此季度最新的女装韩国泡泡女装网留言板联系我们品牌理念女士风尚新品上市首页3、 女士风尚:(1) 进一步展示女装(2) 给用户提供更多的选择(3) 提供用户很好的搭配建议(4) 点击图片下方的链接,可以提供用户更多关于此图片的详细资讯4、 品牌理念:(1) 向用户展示本品牌的理念(2) 给予用户另一种搭配方式(3) 进一步提高本品牌的影响力5、 联系我们:(1) 向用户展示了本公司的地址(2) 向用户提供了本公司的产品分类(3) 向用户提供了联系客服等信息(4) 向用户提供了本网站的工作时间6、 留言板:(1)收集必要的用户信息,以便售后服务(2)用户在本页面提供自己的意见或建议2、系统实现2.1 首页模块的实现本页面为韩国泡泡女装网的用户提供本品牌的代表产品,为用户提供更多链接以便提供更多信息。本页面共分为三个大板块分别为:header 板块、main 板块、footer 板块。main 板块中分为:left 板块和 right 板块,left 板块中分为 left-top 板块和nav 板块。header 板块是为了实现页面头部的布局,main 板块是为了实现页面主体的布局,footer 板块是为了实现页面底部的布局。left 板块是为了实现main 板块的左半边的布局,right 板块是为了实现 main 板块的右半边的布局。left-top 板块是为了实现 left 板块的上半部分的布局,nav 板块是为了实现left 板块的下半部分的布局。以上布局可以用如下图来阐释。containermain footerheaderrightleftnavleft-top box2.1.1header 头部样式设置#header{height:48px;//background-color:yellow; //border:1px solid grey;}此 css 代码设置了首页头部的样式,仅设置了高度背景色为默认白色。2.1.2main 主体各功能模块的实现(1)main 主体 :css 代码:#main{height:930px;background-color:black;//border:1px solid red; }此代码仅设置了 main 主体的大小#left{background-color: #424242;width:250px;height:850px;margin-left: 20px;float:left;}(2) main 主体中的 left此代码设置了 left 的大小格式Body 代码此代码插入了左上方的图面body 代码:搜索 此代码添加了搜索框如上图所示 css 代码:#box{width: 200px;margin: 0px auto;font-family: 'Microsoft YaHei';font-size: 14px;}input{width: 145px;border: 1px solid #e2e2e2;height: 30px;float: left;background-image: url(images/search.PNG);background-repeat: no-repeat;background-size: 25px;background-position:5px center;padding:0 0 0 40px;}#search{width: 55px;height: 32px;float: right;background: black;color: white;text-align: center;line-height: 32px;cursor: pointer;}此代码设置了搜索框的样式和初始的搜索框内容。首页新品上市女士风尚上衣}a{padding:10px;color:white;text-decoration:none;}.nav a:link{color:grey;}a:visited{color:grey;}a:hover{color:grey;text-decoration: underline;}.nav a:active{color:grey;}#box{width: 200px;margin: 0px auto;font-family: 'Microsoft YaHei';font-size: 14px;}(3)main 主体中的 right:在页面的右上方有“设置首页”和“收藏本站”的字样如图所示:这两个字样,也如左侧的超链接一样,代码如下: 收藏本站设为首页样式和左侧超链接的样式一样,在此代码不多赘述。2.1.3footer 样式设置在页面的底部如图所示:此板块也是超链接,此格式是由列表实现的:body 代码如下:首页|品牌理念|联系我们|留言板|裙子|裤子background-color:#0f0f0f;border:1px solid #0f0f0f;}#footer ul li{list-style: none;color:grey;font-size: 10px;float:left;}#line{color:grey;font-size:10px;}在此模块中可以实现的功能为:返回到首页,转到留言板,到达品牌理念和联系我们,更加方便用户的使用。而且在此页面声明了版权和技术支持的公司,而且提供了手机版和管理员登录的途径。此超链接的样式:字体雅黑,鼠标触碰到该字样时,会变为深灰色:css 代码如下: a{padding:10px;color:white;text-decoration:none;} a:visited{color:grey;}a:hover{color:grey;text-decoration: underline;}此列表横向排列,且字体前的标记消失了,css 代码如下:#right{margin-top:20px;margin-left: 30px;float:left;}#right ul li{list-style: none;color:white;float:right;font-size: 10px;font-weight: bold;margin-right: 45px;}#footer{height:93px;background-color:#0f0f0f;border:1px solid #0f0f0f;}#footer ul li{list-style: none;color:grey;font-size: 10px;float:left;}#line{color:grey;font-size:10px;}在 body 中可以看见,此处用了两个列表,并且用了换行符,来实现两个列表以及它的超链接和中间的版权声明。2.2 新品上市的功能模块的实现此页面的布局样式和首页相同,仅 main 中 right 部分的图片不同,该页面如下:图片设置的代码如下:收藏本站设为首页其余代码和首页相同,在此不多赘述。2.3 女士风尚页面的功能实现此页面样式为:此页面中与首页和新品上市页面唯一不同的是 main 中的 right 部分,此部分又分为了三个主要部分,right_top,right_middle,right_bottom,在right_midle 和 right_bottom 中又分别分为了四个小盒子。包含关系如下图所示:设置此盒子的 body 代码如下:containermain footerheaderrightleftnavleft-topboxright_top right_bottomright_middlea hb c e fd g
    展开阅读全文
    1
      金牌文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    0条评论

    还可以输入200字符

    暂无评论,赶快抢占沙发吧。

    关于本文
    本文标题:韩国泡泡女装网.rar
    链接地址:http://www.gold-doc.com/p-255461.html
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们
    [email protected] 2014-2018 金牌文库网站版权所有
    经营许可证编号:浙ICP备15046084号-3
    收起
    展开