拼友狗项目-div+css的静态页面

使用超链接作为logo的布局，并在里面放文字（文字可以SEO）/*标题区*/.header{position:relative;height:105px;}.logo{position:absolute;顶部：25px；左：0；宽度：175px；height:56px;}.logoa{display:block;/*溢出：隐藏；*/宽度：175px；高度：56px；背景：url(../img/logo.png)不重复；/*text-indent:-999px;*/font-size:0;}然后设置logo对于背景图片：然后使用text-indent缩进属性，让文字不可见。第2个框是搜索，搜索模块定位到第3个框是hotwrods，热词模块定位到第4个框是shopcar，购车模块统计部分使用绝对定位做统计，统计部分不给宽度，因为可能要买的片数比较多，让片数支持就打开，给个高度。一定要注意左下角不是圆角的，其他三个是圆角的。计数{位置：绝对；顶部：-5px；/*文本应该左对齐才能向右对齐*/left:100px;背景色：#e60012；高度：14px；填充：03px；行高：14px；颜色：#fff；/*border-radius:左上角,右上角,右下角,左下角;*/border-radius:7px7px7px0;}3).nav制作导航框。该列具有高度并具有下边框。box1浮动在左边dorpdown下拉导航包含dtddbox2浮动在右边navitemsnavigationbargroup2)。footer在底部制作页脚页面框底部的列给出了一个高灰色背景的页脚。首先，有一个大核心。核心包含一号盒子mod_service服务模块模块。模块的含义包含2号框mod_help。帮助模块包含3号框mod_copyrightModule3)。mod_service服务模块还是做成ul>li的结构，li分成左右两个框，一个是图片，一个是文字。4).主要主模块制作部分为指数独享。需要一个新的样式文件index.css。主框的宽度是980像素，距离左边是220，给个margin-left就可以了，给了高度就不用清除float了。主要包含左方框、左浮动焦点焦点图模块，主要包含右方框、右浮动newsflash新闻快讯模块5）。newsflashnewsflash模块1号盒是新闻，新闻模块2号盒是生活服务，生活服务模块3号盒是特价特价6)。news模块注意这里我们分为上下两个模块，但是两个模块都使用了div1boxnews-hdnewshead模块给了一个高度和下边框dotted2boxnews-bdnewstopic部分包含了ul和li以及link7).lifeservice生活服务模块这里有个小技巧。lifeservice框的宽度是250，但是里面的4个小li可以让lifeservice中的ul的宽度达到252。接下来的4个lilifeservice小框溢出来隐藏上面多余的部分。这里的图片使用了CSSsprite技术8).recommend推荐模块包含2个框，只是浮动第一个框recom-hd和第二个框recom-bd注意1)里面的小竖线。floorareafloor注意这层一大箱子包含，不给高度，内容是多少，算多少2)。家电模块，家电这个模块不需要写样式版本居中对齐因为这些模块基本都是一样的，后面的模块基本都是用这些样式，所以我们有如下两个盒子命名为：盒子1box-hd给出一个高度，并且有一个下边框，分为左右两个框。Box2box-bd没有给出高度。3).box-hd模块的左侧高度为h3，右侧为div。div之所以命名为tab-list，是因为它使用了tab切换效果，所以里面要用ul和li。4).根据tab切换的原理，box-bd模块应该还需要一个tab-content内容，将里面的5个box打包成5个大栏。列宽不一致，ul>li布局图片过渡效果整体。.box-bdimg{/*transition是自己写的，谁做动画，就给谁加*/transition:all.2s;}/*我们的鼠标经过图片后向右移动8px*/.box-bdimg:hover{margin-left:8px;}5).Sidebarfixedtool使本模块固定定位，包含li2.列表页制作1).列表页面准备列表页面是一个新的页面，我们需要新建一个list.html，因为列表页面的头部和底部基本一致。我们需要将首页头部底部的结构复制到头部底部的样式中，列表也需要。所以list.html还需要引入common.css和一个新的list。css文件是样式文件，把内容写在list.html结构中即可2）。列表页的header和nav可以通过修改秒杀框sk，定位到秒杀1来修改。boxsk_listcontainsulandli2ontheleftThesidefloatingsk_concontainsulandli3).列表页主框sk_container包含所有列表页的所有主要内容。box1sk_container给宽1200不给高2boxsk_hd，插入一张图片即可3boxsk_bd包含大量ul和li4)。sk_goodslayoutthisli我们命名为sk_goods1号位置有一个包含这张图片和下面的标题，将图片插入seckill_mod_goods_img可以使鼠标在图片位置2号标题H5上滑动滑动的效果命名为sk_goods_title，位置3为价格div，命名为sk_goods_price，位置4为div，命名为sk_goods_progress这里，我们采取代码的形式，把导航栏的第5个位置写成a，链接命名为sk_goods_buy，这里注意，因为父框已经有左右padding，所以我们这里使用适当的定位5)。分页使页面最大的盒子就是我们的divNameitpage注意里面所有的盒子都是行内块。框1被命名为page_num，带有一个跨度（意思是页码）。将a放入其中并将a转换为内联块。设置样式pn_prev上一页pn_next下一页框2命名为spanpage_skip（skip跳转的意思）有input和button1）。详情页detail.html常用词名称描述主体de_container面包屑导航crumb_wrap产品介绍product_intro(介绍)预览包preview_wrap(左边部分)预览缩略图preview_img预览列表preview_list左按钮arrow_prev右按钮arrow_next小图列表preview_items商品详情信息区itemInfo_wrap(右边部分）头名sku_nameskull骷髅新闻新闻摘要评价remarkpricesummarysummary_pricedeliverytosummary_stocksupportsummary_supportchoosechoosechoosebuttongroupchoose_btns选择数量choose_amountminusreduce添加到购物车addshopcarproductdetailsproduct_detail(详细描述)onthe左侧一旁的详细描述detail2)。Breadcrumbnavigationcrumb_wrapBreadcrumbnavigation面包屑导航的由来是童话里的一句话：当汉塞尔和格莱特穿过森林时，为了不让他们找不到回家的路，他们会在路上撒上面包屑，这样他们就可以找到自己的家了。基于这些面包屑回家的路。3).产品介绍模块1号框这个模块命名为产品模块product_intro（介绍介绍）。不要给这个模块赋予高度，因为右侧模块的内容高度是不固定的。里面有2个盒子，分为2号盒子和3号盒子21号盒子是预览区preview_wrap，给宽高，向左浮动。3号框是itemInfo_wrap，商品详细信息区，给宽度，不给高度，向左浮动4）。在预览区制作1号框，命名为preview_img，用于图片预览。图片，我们截图的时候，398*398像素的2号框，命名为预览列表preview_list3.1preview_list使得带有左右按钮的框arrow_prevarrow_next，可以用来定位。中间用ul，命名为list-item，给width和height，然后margin:0auto;只是水平居中对齐5)。在产品详情区创建itemInfo_wrap，并将此框命名为itemInfo。方框1是头部sku_name。专栏2是最新消息。方框3是产品的详细摘要。之所以下面是总结部分，是因为格式基本一致。以下是详细的命名说明头名sku_name头骨新闻摘要评价备注价格摘要summary_price促销摘要summary_促销发货summary_stock支持summary_supportchoosechoosechoosechooseversionchoose_versionchoosetypechoose_typechoosebuttongroupchoose_btnschooseamountchoose_amountadd表示加减去reduce光标：不允许;禁止符号加入购物车addshopcar按dldtdd写6)。productdetailsmoduleproduct_detailbigboxisproduct_detailmodule不给高度，别忘了清除1号框左浮动命名aside是宽度不给高度2号框右浮动命名为detail如果有是宽度，没有给出高度因为tab_con里面也包含了很多对应上面tab_list中的li的ul.item。6.2）detaillayout的1号框命名为detail_tab_list，给个高度就可以了，把ul和li放在里面。请注意，这是选项卡列切换布局。2号框名为detail_tab_con，里面也包含了很多ul.items和上面tab_list中的li。一一对应。##7.注册页面register注册页面名称描述注册区域registerarea注册内容reg-formerrorerrorsuccesssuccessdefaultdefault7.1registerarealayout