导航结构编写
导航样式编写
编写框架容器样式
查看导航效果
页头排版

导航结构编写

导航栏由十个等宽的按钮组成，并且宽度自适应
在 <div class="nav"></div> 里面插入以下代码。

                        
<div class="menu">
    <a href="javascript:"><img src="http://codeasily.net/course/img/menu-apple-logo.svg" alt=""></a>
    <a href="javascript:">Mac</a>
    <a href="javascript:">iPad</a>
    <a href="javascript:">iPhone</a>
    <a href="javascript:">Watch</a>
    <a href="javascript:">TV</a>
    <a href="javascript:">Music</a>
    <a href="javascript:">Support</a>
    <a href="javascript:"><img src="http://codeasily.net/course/img/menu-search.svg" alt=""></a>
    <a href="javascript:"><img src="http://codeasily.net/course/img/menu-bag.svg" alt=""></a>
</div>

<a href="javascript:"></a> 表示无任何反应的空链接

本教程因为没有目录结构，所以图片地址均为绝对路径。

导航样式编写

先调整 .nav 的样式.

                        
.nav {
    height: 44px;
    background: rgba(0, 0, 0, 0.8);
    font-size: 14px;
}

为 .menu 添加样式.
这里利用了table-cell的特性实现的垂直居中.
并利用 table-layout: fixed 使每个菜单项等宽

                        
.nav .menu {
    display: table;             /* 利用display:table实现垂直居中和单元格等宽*/
    table-layout: fixed;        /* 使每个单元格等宽*/
}
.nav .menu a {
    display: table-cell;        /* table下的元素必须display:table-cell*/
    vertical-align: middle;     /* 利用table与table-cell实现的垂直居中*/
    color: #fff;
    text-align: center;
}
.nav a:hover {opacity: 0.65; }

可以为鼠标经过加入 transition过渡效果,在 .nav .menu a 里加入

                        
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;

编写框架容器样式

先初始化整体样式.

                        
/*初始化属性*/
body {
    min-width: 1024px;
    font-family: "Myriad Set Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #444;
    font-size: 12px;
}

ul{
    list-style: none;
}

a {text-decoration: none; }         /*a自带了下划线，一般去掉*/

接下来是建立自适应的核心容器 .container ，决定了导航栏、页头、内容及页脚的宽度，前期的布局和后期的响应式改造都得靠它！

慢慢来，到了第四节的时候会有神奇的事情发生哦！

                        
.container {
    width: 1024px;              /* 先从桌面设备适配，固定1024px宽度*/
    margin: 0 auto;
}

为了保证容器内的元素不撑开父容器，在.container里加入box-sizing属性

                        
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

还有一个非常重要的技巧：在文档流中的布局排版都会遇到浮动塌陷问题，本教程的解决方案是建立一个.clearfix的类

                        
.clearfix:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 1%;
}

进一步了解清除浮动的原理！

查看导航效果

为 <div class="menu"></div> 加入container类

                        
<div class="menu container"></div>

点击代码编辑器右上角的 Run 运行
觉得展示区域太小可以点击全屏展示

如果发现不是理想的结果，请检查css样式命名是否和HTML结构对应。

页头排版

在 <div class="header"></div> 里面插入以下代码。

<div class="banner clearfix container"> 在这里加clearfix类就可以清除掉与导航产生的浮动塌陷问题

                        
<div class="banner clearfix container">
    <img class="large-img" src="http://codeasily.net/course/img/iphone-6s-change_large.jpg" alt="">
    <div class="intro">
        <div class="info">
            <img src="http://codeasily.net/course/img/iphone_6s_large.png" alt="">
            <h2>The only thing that's changed<br> is everything.</h2>
            <a href="javascript:">Learn more ></a><a href="javascript:">Trade up to a new iPhone ></a>
        </div>
    </div>
</div>

页头样式如下

                        
.header {background: #fff; }
.header .banner {
    margin: 0 auto;
    height: 650px;
}

.header .banner .large-img {
    display: block;
    float: left;
    margin: 20px;
}

.header .banner .intro {
    display: table;
    float: left;
    margin-left: 40px;
    height: 650px;
}

.header .banner .info {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.header .banner .info h2 {
    margin: 20px 0;
    font-size: 32px;
    font-weight: normal;
}

.header .banner .info a {
    display: inline-block;
    margin-right: 20px;
    color: #08c;
    font-size: 18px;
}

.header .banner .info a:hover {color: #000; }

点击代码编辑器右上角的 Run 运行
觉得展示区域太小可以点击全屏展示

如果发现不是理想的结果，请检查css样式命名是否和HTML结构对应。

本节到此结束

下一节：内容区域及页脚完成

如有疑问或建议请发送到此邮箱反馈lipten@foxmail.com

css响应式网页实战

第二节