品优购首页布局-头部

10. 品优购首页布局

效果图：

项目结构如下：

命名集合：

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dorpdown 包含 .dd .dt
导航右侧	navitems

1). shortcut 制作

通栏的盒子命名为shortcut 快捷导航的意思，注意，这里给行高，可以继承给里面的子盒子。
里面包含版心的盒子
版心盒子里面包含1号左侧盒子左浮动
版心盒子里面包含2号右侧盒子右浮动

上述效果实现代码

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿涛的品优购 - 优质！优质！</title>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <link rel="stylesheet" href="style-test/common-test.css">
    <link rel="stylesheet" href="style-test/page-home-test.css">
</head>
<body>
    <!-- 页面顶部 -->
    <div class="nav-bottom">
        <!-- 顶部的头部 -->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <!-- 左侧的盒子 -->
                        <ul class="fl">
                            <!-- <li class="f-item">品优购欢迎您！</li> -->
                            <li class="f-item">品优购欢迎您！
                            <li class="f-itme">请
                                <a href="login.html">登录</a>
                                <span>
                                <a href="register.html">免费注册</a>
                                 </span>
                            </li>
                        </ul>

                        <ul class="fr">
                            <li class="f-item">
                                <a href="member-order.html">我的订单</a>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">
                                <a href="member.html">我的品优购</a>
                                <span class="arr"></span>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">品优购会员</li>
                            <li class="f-item space"></li>
                            <li class="f-item">企业采购</li>
                            <li class="f-item space"></li>
                            <li class="f-item">关注品优购 <span class="arr"></span></li>
                            <li class="f-item space"></li>
                            <li class="f-item">客户服务 <span class="arr"></span></li>
                            <li class="f-item space"></li>
                            <li class="f-item">网站导航 <span class="arr"></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</body>
</html>

css代码：

/*!plugins/normalize/normalize.css*/


/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/* 添加html和body的一些基础东西 */
html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

/*公共样式*/
.fl {
	float: left;
}
.fr {
	float: right;
}
/*版心*/
.w {
	width: 1200px;
	margin: 0 auto;
}


/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

/* 设置当鼠标进过a的链接时候连接变成红色 */
a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #333
}

.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

/* 这里是设置页面顶部的最上边的css样式 */

/* 设置top的内容是居中的 */
.top {
    height: auto;
}

.top {
    /* 设置背景色 */
    background-color: #EAEAEA;
    /* 设置行高和盒子一样高，就能让字体垂直居中了 */
    line-height: 30px;
    overflow: hidden;
}

.py-container {
    margin: 0 auto;
    width: 1200px;
    /* background-color: aquamarine; */
}

.shortcut {
    height: 30px;
    /* background-color: aqua; */
}

.fl li {
    /* 让盒子左浮动起来 */
    float: left;
}
.Brand-item,
.f-item {
    position: relative;
    float: left;
    list-style-type: none;
}

/* 设置头部的top文字和盒子一样宽，保证居中 */
/* .shortcut ul li {
    line-height: 30px;
} */

/* 设置所有的链接的小都是这种颜色 并且所有的下划线都是消失 */
a {
    color: #28a3ef;
    text-decoration: none;
}

/* 设置当鼠标移动的到链接的时候就会变色，并出现下划线 */
a:hover {
    color: #4cb9fc;
    text-decoration: underline;
  }


/* 设置头部的top右边的小竖线，设置分割 */
.space {
    /* 设置这个这个space的上下差距为8px,左右的距离为10px */
    margin: 8px 10px;
    /* 设置盒子的宽度为1px */
    width: 1px;
    /* 高度为13px */
    height: 13px;
    /* 背景色为#666色 */
    background: #666;
}

/* 开始使用字体图标 */
/* 第一步先将下列代码复制到里面，千万要注意路径，不然不起作用 */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts-test/icomoon.eot?5oyl41');
    src: url('../fonts-test/icomoon.eot?5oyl41#iefix')
    format('embedded-opentype'), 
    url('../fonts-test/icomoon.ttf?5oyl41')
    format('truetype'), url('../fonts-test/icomoon.woff?5oyl41') 
    format('woff'), url('../fonts-test/icomoon.svg?5oyl41#icomoon') 
    format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 第二步在在合适的位置引入 'icomoon' 字体就行 */
.arr {
    font-family: 'icomoon';
}

2). header 制作

header盒子必须要有高度
1号盒子是 logo 标志定位
2号盒子是 search 搜索模块定位
3号盒子是 hotwrods 热词模块定位
4号盒子是 shopcar 购车车模块
- count 统计部分用绝对定位做
- count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了给一个高度
- 一定注意左下角不是圆角其余三个是圆角

测试上述代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>阿涛的品优购 - 优质！优质！</title>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <link rel="stylesheet" href="style-test/common-test.css">
    <link rel="stylesheet" href="style-test/page-home-test.css">
</head>

<body>
    <!-- 页面顶部 -->
    <div class="nav-bottom">
        <!-- 顶部的头部 -->
        <div class="nav-top">
            <div class="top">
                <div class="py-container">
                    <div class="shortcut">
                        <!-- 左侧的盒子 -->
                        <ul class="fl">
                            <!-- <li class="f-item">品优购欢迎您！</li> -->
                            <li class="f-item">品优购欢迎您！
                            <li class="f-itme">请
                                <a href="login.html">登录</a>
                                <span>
                                <a href="register.html">免费注册</a>
                                 </span>
                            </li>
                        </ul>

                        <ul class="fr">
                            <li class="f-item">
                                <a href="member-order.html">我的订单</a>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">
                                <a href="member.html">我的品优购</a>
                                <span class="arr"></span>
                            </li>
                            <li class="f-item space"></li>
                            <li class="f-item">品优购会员</li>
                            <li class="f-item space"></li>
                            <li class="f-item">企业采购</li>
                            <li class="f-item space"></li>
                            <li class="f-item">关注品优购 <span class="arr"></span></li>
                            <li class="f-item space"></li>
                            <li class="f-item">客户服务 <span class="arr"></span></li>
                            <li class="f-item space"></li>
                            <li class="f-item">网站导航 <span class="arr"></span></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--头部-->
            <div class="header">
                <div class="py-container">
                    <div class="yui3-g Logo">
                        <div class="yui3-u Left logoArea">
                            <a class="logo-bd" title="品优购" href="home.html"></a>
                        </div>

                        <div class="yui3-u Center searchArea">
                            <div class="search">
                                <form action="" class="sui-form form-inline">
                                    <div class="input-append">
                                        <input type="text" id="autocomplete" type="text" class="input-error input-xxlarge">
                                        <button id="height-test" class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                                    </div>
                                </form>
                            </div>

                            <div class="hotwords">
                                <ul>
                                    <li class="f-item">品优购首发</li>
                                    <li class="f-item">亿元优惠</li>
                                    <li class="f-item">9.9元团购</li>
                                    <li class="f-item">每满99减30</li>
                                    <li class="f-item">亿元优惠</li>
                                    <li class="f-item">9.9元团购</li>
                                    <li class="f-item">办公用品</li>
                                </ul>
                            </div>
                        </div>

                        <div class="yui3-u Right shopArea">
                            <div class="fr shopcar">
                                <div class="show-shopcar">
                                    <span class="car"></span>
                                    <a class="sui-btn btn-default btn-xlarge" href="cart.html">
                                        <span>我的购物车</span>
                                        <i class="shopnum">0</i>
                                    </a>
                                    <div class="clearfix shopcarlist"></div>
                                </div>
                            </div>
                        </div>





                    </div>
                </div>
            </div>

        </div>
    </div>


</body>
</html>

css代码如下：

/*!plugins/normalize/normalize.css*/


/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/* 添加html和body的一些基础东西 */
html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

/*公共样式*/
.fl {
    float: left;
}

.fr {
    float: right;
}

/*版心*/
.w {
    width: 1200px;
    margin: 0 auto;
}


/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}

/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}

/*去掉列表前面的小点*/
li {
    list-style: none;
}

/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;
    /*ie6*/
    vertical-align: middle;
}

/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}

/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

/* 设置当鼠标进过a的链接时候连接变成红色 */
a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #333
}

.hide,
.none {
    display: none;
}

/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

/* 这里是设置页面顶部的最上边的css样式 */

/* 设置top的内容是居中的 */
.top {
    height: auto;
}

.top {
    /* 设置背景色 */
    background-color: #EAEAEA;
    /* 设置行高和盒子一样高，就能让字体垂直居中了 */
    line-height: 30px;
    overflow: hidden;
}

.py-container {
    margin: 0 auto;
    width: 1200px;
    /* background-color: aquamarine; */
}

.shortcut {
    height: 30px;
    /* background-color: aqua; */
}

.fl li {
    /* 让盒子左浮动起来 */
    float: left;
}

.Brand-item,
.f-item {
    position: relative;
    float: left;
    list-style-type: none;
}

/* 设置头部的top文字和盒子一样宽，保证居中 */
/* .shortcut ul li {
    line-height: 30px;
} */

/* 设置所有的链接的小都是这种颜色 并且所有的下划线都是消失 */
a {
    color: #28a3ef;
    text-decoration: none;
}

/* 设置当鼠标移动的到链接的时候就会变色，并出现下划线 */
a:hover {
    color: #4cb9fc;
    text-decoration: underline;
}


/* 设置头部的top右边的小竖线，设置分割 */
.space {
    /* 设置这个这个space的上下差距为8px,左右的距离为10px */
    margin: 8px 10px;
    /* 设置盒子的宽度为1px */
    width: 1px;
    /* 高度为13px */
    height: 13px;
    /* 背景色为#666色 */
    background: #666;
}

/* 开始使用字体图标 */
/* 第一步先将下列代码复制到里面，千万要注意路径，不然不起作用 */
@font-face {
    font-family: 'icomoon';
    src: url('../fonts-test/icomoon.eot?5oyl41');
    src: url('../fonts-test/icomoon.eot?5oyl41#iefix') format('embedded-opentype'),
        url('../fonts-test/icomoon.ttf?5oyl41') format('truetype'), url('../fonts-test/icomoon.woff?5oyl41') format('woff'), url('../fonts-test/icomoon.svg?5oyl41#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 第二步在在合适的位置引入 'icomoon' 字体就行 */
.arr {
    font-family: 'icomoon';
}


/* ==================header css模块制作====================== */

body,
html {
    margin: 0;
    padding: 0;
    color: #666;
    font: 12px "宋体";
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}


body {
    margin: 0;
    background-color: #fff;
    color: #333;
    font-size: 12px;
    font-family: tahoma, arial, "Hiragino Sans GB", "Microsoft Yahei", \5b8b\4f53, sans-serif;
    line-height: 18px;
}

/* 设置头部的下面一条像素为2px的下划线 */
.header {
    border-bottom: 2px solid #b1191a;
}

.yui3-g {
    display: -webkit-flex;
    display: -ms-flexbox;
    letter-spacing: -.31em;
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
    text-rendering: optimizespeed;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
  }
  /* 设置Logo的高度为105px */
  .Logo {
    height: 105px;
  }

  /* 子集和父亲的高度一样高 */
  div.yui3-g > div.yui3-u {
    height: 100%;
  }

  .yui3-g [class*="yui3-u"] {
    font-family: sans-serif;
  }

  .yui3-u {
    /* 将块级元素转变成行级元素，就可以将左中右放置在一条线上 */
    display: inline-block;

    vertical-align: top;
    /* 设置中文和英文字体的间距 */
    word-spacing: normal;
    letter-spacing: normal;
    zoom: 1;
    text-rendering: auto;
  }
  /* 设置宽度为210px */
  .Left {
    width: 210px;
  }

  /* 设置图片的位置和大小 */
  .logo-bd {
    display: block;
    margin: 25px auto;
    width: 175px;
    height: 55px;
    background: url(../images-test/logo.png) no-repeat;
  }

  /* 设置与父亲的高度一样 */
  div.yui3-g > div.yui3-u {
    height: 100%;
  }
  .yui3-g [class*="yui3-u"] {
    font-family: sans-serif;
  }

  .yui3-u {
    /* 转为行级块元素 */
    display: inline-block;
    vertical-align: top;
    word-spacing: normal;
    letter-spacing: normal;
    zoom: 1;
    text-rendering: auto;
  }
  .Center {
    position: relative;
    z-index: 99;
    width: 740px;
  }

  .searchArea .search {
    /* 设置上 30px 下 -10px 居中 */
    margin: 30px auto -10px;
      margin-top: 30px;
      margin-right: auto;
      margin-bottom: -10px;
      margin-left: auto;
    /* 设置宽度为570px */
     width: 570px;
  }

  .sui-form {
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 18px;
  }
  .sui-form {
    margin: 0;
  }

  .sui-form input[type="text"].input-error {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  }

  .sui-form input[type="text"].input-xxlarge {
    padding-right: 4px;
    padding-left: 4px;
    width: 490px;
  }

  .search .input-append .input-error {
    padding: 5px;
      padding-right: 5px;
      padding-left: 5px;
    border: 2px solid #c81523 !important;
    border-radius: 0;
  }

  .sui-form.form-inline input {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }

  .sui-form .input-append {
    position: relative;
  }

  .sui-form input[type="text"] {
    display: inline-block;
    padding: 2px 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    height: 18px;
    border: 1px solid #ccc;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #fff;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    color: #555;
    vertical-align: middle;
    font-size: 14px;
    line-height: 18px;
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
  }

  .search .input-append .btn-danger {
    height: 32px;
    border-color: #c81523;
    border-radius: 0;
    background: #c81523;
    font-family: "微软雅黑";
    line-height: 22px;
  }

  [type="reset"], [type="submit"], button, html [type="button"] {
    -webkit-appearance: button;
  }
  .btn-danger {
    border: 1px solid #e8351f;
      border-top-color: rgb(232, 53, 31);
      border-right-color: rgb(232, 53, 31);
      border-bottom-color: rgb(232, 53, 31);
      border-left-color: rgb(232, 53, 31);
    background-color: #ea4a36;
    color: #fff;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  }
  .btn-xlarge {
    padding: 4px 20px;
    font-size: 14px;
    line-height: 22px;
  }

  .input-error {
    float: left;
  }

  /* 按钮的style的设置 */
  .sui-btn {
    float: left;
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 4px 14px;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #eee;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  #height-test {
    width: 68.00px;
  }

  /* 热词搜索 */
  .searchArea .hotwords {
    overflow: hidden;
    margin: 0 auto;
    width: 570px;
  }

  .hotwords ul li:first-child {
    color: red;
  }
.hotwords ul li {
    padding: 12px 25px 0 0;
  }
  
  
  .Brand-item, .f-item, .grid-service-item {
    position: relative;
    float: left;
    list-style-type: none;
  }
/*   
  li {
    line-height: 18px;
  } */

  /* 头部右侧的我的购物车 */
  div.yui3-g > div.yui3-u {
    height: 100%;
  }
  .yui3-g [class*="yui3-u"] {
    font-family: sans-serif;
  }
  .yui3-u {
    display: inline-block;
    vertical-align: top;
    word-spacing: normal;
    letter-spacing: normal;
    zoom: 1;
    text-rendering: auto;
  }
  .Right {
    position: relative;
    width: 250px;
  }

  .shopArea .shopcar {
    position: relative;
    margin: 30px auto -1px;
    width: 180px;
  }

  .shopArea .car {
    position: absolute;
    padding: 0 7px;
    width: 30px;
    height: 30px;
    background-image: url(../images-test/icons.png);
    background-position: 160px -81px;
  }

  .yui3-u {
    word-spacing: normal;
    letter-spacing: normal;
    text-rendering: auto;
  }
  
  .shopArea .shopcar a {
    padding: 4px 42px;
  }
  .shopcar .btn-default {
    border: 1px solid #dfdfdf;
    border-radius: 0;
    background: #f7f7f7;
    font-size: 12px;
  }
  .btn-xlarge {
    padding: 4px 20px;
    font-size: 14px;
    line-height: 22px;
  }
  .sui-btn {
    display: inline-block;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 2px 14px;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background-color: #eee;
    color: #333;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  }

  .shopnum {
    position: absolute;
    top: -5px;
    right: 62px;
    padding: 4px;
    height: 6px;
    border-radius: 6px;
    background: #c81623;
    color: #fff;
    font-size: 5px;
    line-height: 6px;
  }

测试结果如下：