项目13-芙蓉商城制作

芙蓉商城制作项目要点div-ul-li实现导航菜单 01.02.div-dl-dt-dd实现图文混编03.伪类样式控制超链接样式技能目标使用div-ul-li实现导航菜单局部布局01.02.使用div-dl-dt-dd实现图文混编03.使用伪类样式控制超链接样式6.1分块制作商城网站首页6.1.2制作商城网站首页的总体布局首先书写首页的总体页面组织结构6.1.2制作商城网站首页的总体布局首先书写首页的总体页面组织结构6.1.2制作商城网站首页的总体布局然后增加首页的总体页面组织结构的样式在样式表中首先设置全局的属性，使用全局选择器设置内外边距为0，整个网页的超链接为不带下划线；列表默认为不带列表符号，代码如下：/*设置整个网页的通用默认样式*/*{margin:0px;padding:0px;}a{text-decoration:none;}ul{list-style:none;}6.1.2制作商城网站首页的总体布局样式分析：一、总体布局1）container需要一个自适应的高度，container宽度设置为980px，水平居中。2）header、main、footer的宽度和外层的container宽度一致：width:100%；3）header高度由背景图片确定是150px，添加背景图片，分别量取效果图得到main和footer的高度是400px和100px；4)分别为header、main、footer加背景颜色。6.1.2制作商城网站首页的总体布局6.1.2制作商城网站首页的总体布局二、主体main部分

.leftcategory{background:#666;width:20%}.rightsidebar{background:blue;width:20%}.midcontent{background:red;width:60%;}6.1.2制作商城网站首页的总体布局6.1.2制作商城网站首页的总体布局二、主体main部分

.leftcategory,.midcontent,.rightsidebar{float:left;width:20%;height:100%}/*相同属性集体声明*/6.1.2制作商城网站首页的总体布局6.1.3实现顶部布局6.1.3实现顶部布局6.1.3实现顶部布局1、首先书写首页的顶部组织结构6.1.3实现顶部布局浏览效果6.1.3实现顶部布局2、然后增加首页的顶部的组织结构的样式logo的width和height:根据logo图片大小进行设置up_right_menu的宽width为header的40%，高height:40pxup_right_hello宽度稍大为70%，高height:30px；nav的宽100%，高height:30px可以为各部分区块增加背景颜色6.1.3实现顶部布局样式6.1.3实现顶部布局样式整个顶部header，使用一张背景图片，注意图片的background-position属性的设置。logo、up_right_menu、up_right_hello设置浮动nav设置成？6.1.3实现顶部布局样式6.1.3实现顶部布局样式6.1.3实现顶部布局样式6.1.3实现顶部布局6.1.4实现顶部制作-logo+顶部菜单6.1.4实现顶部制作-logo+顶部菜单6.1.4实现顶部制作-logo+顶部菜单1、首先将logo图片呈现出来，替代背景颜色6.1.4实现顶部制作-logo+顶部菜单2、右上部菜单的组织结构（内容）6.1.4实现顶部制作-logo+顶部菜单2、右上部菜单的组织结构（内容）6.1.4实现顶部制作-logo+顶部菜单6.1.5实现顶部制作-欢迎词+底部导航6.1.5实现顶部制作-欢迎词+底部导航欢迎词的字体设置成：白色、24px6.1.5实现顶部制作-欢迎词+底部导航设置nav导航菜单，导航菜单分成左右两部分：nav_left和nav_right，具体组织代码如下：6.1.5实现顶部制作-欢迎词+底部导航1、左半部nav_left用表单，具体组织代码如下：6.1.5实现顶部制作-欢迎词+底部导航、左半部nav_left样式设置如下：

padding-left:20px;字体颜色color:#FFFFFF;float:left;6.1.5实现顶部制作-欢迎词+底部导航6.1.5实现顶部制作-欢迎词+底部导航、将左右两部分分别设置不同的背景颜色

6.1.5实现顶部制作-欢迎词+底部导航、导航条右半部分nav_right组织结构代码如下：

6.1.5实现顶部制作-欢迎词+底部导航、将左右两部分分别设置不同的背景颜色，并且都设置为左浮动

6.1.5实现顶部制作-欢迎词+底部导航、设置左右两部分的宽度：通过测量背景图片左宽：495px?右宽:485px;

6.1.5实现顶部制作-欢迎词+底部导航、设置左右两部分的宽度：通过测量背景图片左宽：495px右宽:485px;

6.1.5实现顶部制作-欢迎词+底部导航在图像处理工具中量得每一个菜单项的宽度是121px，这样设置每个li宽度121px，取消右部和整个nav的背景颜色。6.1.5实现顶部制作-欢迎词+底部导航

设置网站统一的超链接形式a{text-decoration:none;color:#000000;}调整li是其基本居中6.1.5实现顶部制作-欢迎词+底部导航

去掉左部的背景色6.2.1实现中部商品分类制作6.2.1实现中部商品分类制作6.2.1实现中部商品分类制作首先完成左部商品分类leftcategory的组织结构，具体组织代码如下：6.2.1实现中部商品分类制作样式分析如下：1、背景图片宽203，高6416.2.1实现中部商品分类制作2、内容部分占据的宽是203-20=183，高是641-35=6083、内容与块边缘的距离用填充padding设置左右各10px，上填充356.2.1实现中部商品分类制作4、设置h1：加粗，14px,宋体行高27px5、每个项目li都左浮动，宽度占据183/3=61,字体14px6、每个无序列表所占高度是608/4=152，列表项共5行，每行的高度（152-27）/5=125/5=25px可以设置为li的行高。6.2.1实现中部商品分类制作7、调整中部的midcontent和sidebar的宽度高度左边：203/980=20.7%查看中间图片的宽524px,524/980=59.3%20.7%+59.3%=80%因此右边剩下20%整理所有的超链接,设置超链接的统一样式。6.2.2实现中部主题制作6.2.2实现中部主题制作6.2.1实现中部主题制作首先完成中部midcontent的组织结构1、分成上下两块<divclass="midcontent_top"></div><divclass="midcontent_list"></div>2、上块是一张图片3、下块是9个dl-dt-dd图文结构6.2.2实现中部主题制作思考样式：header与main之间隔开3px6.2.2实现中部主题制作思考样式：1、显示出上部图片和下边背景1）设置midcontent、midcontent_top、midcontent_list的宽度是527px2）设置midcontent_top的高度是190px3）设置midcontent_list的高度440：块高height:403px;填充padding:37px0px0px0px;6.2.2实现中部主题制作思考样式：2、设置中部midcontent与左边分类leftcategory留有一定空隙3、midcontent_top与midcontent_list之间要隔开一定距离6.2.2实现中部主题制作思考样式：4、设置midcontent_list水平居中6.2.2实现中部主题制作思考样式：5、注意dt中图片的宽和高？midcontent_list块的内容部分的宽和高？midcontent_list块中有3行3列的dl

每个dl的宽度：527/3=175每个dl的高度：403/3=134每个dl都设置左浮动6.2.2实现中部主题制作思考样式：6、dd中文字大小14pxImg图片大小？图片加边框6.2.3实现中部右边制作6.2.3实现中部右边制作main部分的右部rightsidebar分成上、中、下三部分，分别以rightsidebar_top、rightsidebar_center、rightsidebar_foot命名。6.2.3实现中部右边制作6.2.3实现中部右边制作思考样式：1、midcontent与rightsidebar留2px空隙2、rightsidebar最大可以设置的宽度？6.2.3实现中部右边制作思考样式：1、midcontent与rightsidebar留2px空隙leftcategory：183+10+10+2=205midcontent：527+2=5292、rightsidebar：980-205-529=2466.2.3实现中部右边制作rightsidebar_top的组织结构：图文dl-dt-dd6.2.3实现中部右边制作rightsidebar_top的样式：1)宽、高2）dt?3)img?4)dd?6.2.3实现中部右边制作rightsidebar_center的组织结构：图文dl-dt-dd6.2.3实现中部右边制作rightsidebar_center的样式：1)宽、高、背景，其他？2）dt?3)img?4)dd?？6.2.3实现中部右边制作调整rightsidebar_center的样式使其更美观6.3实现首页footer制作6.3实现首页footer制作6.3实现首页footer制作首先：书写内容6.3实现首页footer制作然后：样式设置与main之间留空隙水平居中取消原来footer的高度；消一些过度使用的背景实现注册页register.html的制作注册页的顶部和底部可以复用首页的顶部和底部。使用<iframe>实现首顶部和底部的复用。分离首页顶部为单独的页面文件，存为header.html分离底部为单独的页面文件，存为footer.html实现注册页register.html的制作header.html的内容结构<body><divid="container">

<divid="header"><divclass="logo">……</div><!--logo结束-->……

</div><!--顶部(header)结束-->

</div><!--id="container"结束--></body>实现注册页register.html的制作footer.html的内容结构<body><divid="container"><divid="footer"><p></p><hr/><p></p><p></p><p></p>

</div><!--底部(footer)结束--></div><!--整个容器(container)结束--></body>实现注册页register.html的制作<iframe>内嵌框架的基本语法如下：<iframesrc="引用的页面地址"width=""height=""scrolling="是否显示滚动条"frameborder="边框"></iframe>src：为被嵌入网页的地址；scrolling：是否有滚动条，yes有，no无，auto是根据被显示的HTML自动显示或隐藏；width：宽度；height：高度，高度、宽度可以为百分比，可以为具体高宽数值，不需要跟单位。实现注册页register.html的制作在网站register.html页面的顶部、底部位置，引用上述分离的header.html和footer.html最初的register.html对应的代码：<body><iframeid="header"src="header.html"width="980"height="150"frameborder="0"scrolling="no"></iframe><divid="registermain"></div><!--registermain结束--><iframeid="footer"src="footer.html"width="980"height="120"frameborder="0"scrolling="no"></iframe></body>实现注册页register.html的制作register.html引用应用的样式实现注册页register.html的制作最初的register.html页面效果：实现注册页register.html的制作register.html页面主体部分的位置空间：根据背景图片大小确定：width:980px;height:520px;实现注册页register.html的制作修改register.html的页面组织结构实现注册页register.html的制作背景图片替换register.html背景颜色：实现注册页register.html的制作register.html页面内容可以用表格来布局，使用4行3列的表格，左边提示文字在第一列，第二列是文本框、密码框以及图片按钮，第三列是协议部分，协议跨4行。实现注册页register.html的制作实现注册页register.html的制作分析register页面的样式1）查看页面效果图，内容占据的宽高？内填充？实现注册页register.html的制作分析register页面的样式2）4行总高度？每一行的高度？3）最左边文字提示列的宽度？文字右对齐4）中间列的宽度？居中显示5）input的宽高？border的设置？实现登录页login.html的制作登录页的顶部和底部可以复用首页的顶部和底部。使用<iframe>实现首顶部和底部的复用。实现登录页login.html的制作login.html引用应用的样式实现