实例四花店网页的制作.pptVIP

实例4 花店主页的制作 信息工程系 王军 第一步：规划网站 本教程将以图示为例构建网站 1、body的设定container的设定 body{ background-color:#ffd8d9; margin:1px 0px 0px 0px; padding:0px; text-align：center; font-size:12px; font-family:Arial, Helvetica, sans-serif; } 1、body的设定container的设定 #container{ position:relative; margin:0px auto 0px auto; width:700px; text-align:left; } 2、Header的制作 div id=banner img src=banner.jpg /div 3、globallink的制作 div id=globallink ul lia href=#鲜花礼品/a/li lia href=#自助订花/a/li lia href=#绿色植物/a/li lia href=#花之物语/a/li lia href=#会员中心/a/li lia href=#联系我们/a/li lia href=#支付方式/a/li /ul /div 3、globallink的制作 #globallink{ margin:0px; padding:0px; } /*可以去掉默认值*/ #globallink ul{ list-style:none; /*去掉那个圆点*/ padding:0px; margin:0px; } 3、globallink的制作 #globallink li{ float:left; /*不再按照竖排*/ text-align:center; /*居中显示*/ width:100px; /*设置导航栏目的宽度*/ } 3、globallink的制作 #globallink a{ display:block; padding:9px 6px 11px 6px; background:url(button1.jpg) no-repeat; margin:0px; } 3、globallink的制作 padding:9px 6px 11px 6px; 1、后面的四个值分别表示的是什么方向的值？ 2、a的高度是多少？ 3、globallink的制作 #globallink a:link, #globallink a:visited{ color:#630002; text-decoration:none; } 链接访问过的状态 #globallink a:hover{ color:#FFFFFF; text-decoration:underline; background:url(button1_bg.jpg) no-repeat; /* 鼠标划过的时候替换原来的背景图片 */ } 主体的制作 div id=left /div div id=main /div 4、left的制作 #left{ width:180px; float:left; background:#FFFFFF url(leftbottom.jpg) no-repeat bottom; /* 下端圆角 */ margin:1px 0px 0px 0px; } login的制作 div id=login form p用户: input type=text class=text/p p密码: input type=text class=text/p pinput type=“button” class=“btn” value=“登录” input type=“button” class=“btn” value=“注册” a href=“#”忘记密码/a /p /form /div #login{ background:url(login.jpg) no-repeat; padding:55px 0px 10px 0px; } #login form{ padding:0px; margin:0px; } #login p{ margin:0px; text-align:left; padding:5px 0px 0px 25px; } #login p input{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } #login form input