css扁平化博客学习总结(三)header代码实现

页头、banner、正文、页脚的宏观布局

1.布局顺序的重要性:

由大到小,着眼最大的部分,慢慢细分。

<body>
<header><!-- 页头开始 -->
  <nav></nav>
  <div id="banner"></div>
</header><!-- 页头结束 -->
<div class="content"><!-- 内容开始 -->
</div><!-- 内容结束 -->
<footer><!-- 页脚开始 -->
</footer><!-- 页脚结束 -->
</body>

2.css用外部文件方式引入

一个页面写多个css完全不必要,浏览器都是直接首位相接解析,分多个文件和1个文件效果是相同的。

2个之内最好。

注:分成太多css文件,会加大服务器请求数,请求数越多,响应就会越慢。

3.加入css,进行初始布局

nav{
background: #ccc;
height: 50px;
}
#banner{
background: #777;
height: 700px;
}

4.设计nav,加上css效果。此时不进行阴影之类的细节处理,先完成下面的布局。

<nav>
  <ul>
    <li class="logo"><a href="#">leo</a></li>
    <li><a href="#">简历</a></li>
    <li><a href="#">作品</a></li>
    <li><a href="#">文章</a></li>
    <li><a href="#">首页</a></li>
  </ul>
</nav>

css代码:

nav ul{
list-style: none;
margin: 0;
}
nav ul li{
display: inline-block;
line-height: 50px;
float: right;
margin-right: 20px;
}
nav ul li a{
line-height: 50px;
text-decoration: none;
display: inline-block;
height: inherit;

}
nav ul li.logo{
float: left;
}

5.设计banner,给页面所以button设定统一样式,然后给banner页面定制特定的按钮,不深入细节,继续往下布局。

<div id="banner">
  <div class="inner">
    <h1>leo</h1>
    <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor iididunt ut     labore et dolore magna aliqua. Ut enim ad min.</p>
    <button>养我</button>
    <div class="more">
      更多
    </div>
  </div>
</div>

css代码:

#banner .inner{
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 160px;
}
#banner .inner h1{
  margin: 0;
}
button{
  border: none;
  background-color: #333;
  color: #eee;
  padding: 10px;
}
#banner button{
  padding: 14px 40px;
}
#banner .inner .more{
  margin-top: 245px;
}
.sub-heading{
  line-height: 30px;
  margin: 20px;
}

6.回头查看header,进行优化,优化了nav下的logo展示

header完整HTML代码:

<header><!-- 页头开始 -->
  <nav>
    <div class="logo"><a href="#">leo</a></div>
    <ul>
      <li><a href="#" class="active">简历</a></li>
      <li><a href="#">作品</a></li>
      <li><a href="#">文章</a></li>
      <li><a href="#">首页</a></li>
    </ul>
  </nav>
  <div id="banner">
    <div class="inner">
      <h1>leo</h1>
      <p class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor       iididunt.</p>
      <button>点我</button>
      <div class="more">
         更多
      </div>
    </div>
  </div>
</header><!-- 页头结束 -->

header完整class代码:

nav{
background: #ccc;
height: 50px;
}
#banner{
background: #777;
height: 700px;
}
nav ul{
list-style: none;
margin: 0;
float: right;
}
nav ul li , nav .logo{
display: inline-block;
line-height: 50px;
margin-right: 20px;
}
nav ul li a{
line-height: 50px;
text-decoration: none;
display: inline-block;
height: inherit;
color: #fff;
}
nav ul li.logo{
float: left;
}
#banner .inner{
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1{
margin: 0;
}
button{
border: none;
background-color: #333;
color: #eee;
padding: 10px;
}
#banner button{
padding: 14px 40px;
}
#banner .inner .more{
margin-top: 280px;
}
.sub-heading{
line-height: 30px;
margin: 20px;
}
.logo{
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
}
.logo a{
color: #fff;
text-decoration: none;
padding: 10px;
}

时间: 07-18

css扁平化博客学习总结(三)header代码实现的相关文章

css扁平化博客学习总结(二)css样式重置

css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline:

css扁平化博客学习总结(一)模块分析

一.模块分析 1.每开发一个项目之前,首先要对项目进行一个大致规划,它到底要做什么功能,它有什么具体需求. 2.所以需要进行模块化分析,把这些东西具象化,把一个问题模块化,对需求有一个宏观的了解. 3.有一个模块的概念后,把模块进行细分,细分成更小的模块,然后逐一击破. 不进行模块分析的恶劣影响: 不做模块分析,一上手就想到哪儿做到哪儿,很容易一叶障目,不能看到全貌,你会发现做着做着就失控了.因为有些地方出现了矛盾,你会发现要修改的成本很高,还不如推倒重写. 新手很容易着眼于细节,首先不应该从细

android fragment 博客 学习记录

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和各种API,如果你还不了解,请看:Android Fragment 真正的完全解析(上). 本篇将介绍上篇博客提到的:如何管理Fragment回退栈,Fragment如何与Activity交互,Fragment与Activity交互的最佳实践,没有视图的Fragment的用处,使用Fragment创

github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)

使用的yilia主题之后,还需要进行自己的定制配置 1.图片的位置 比如打赏的支付宝二维码图片,是在当前博客的source/assets/img/下 (不是当前主题) 配置:(在yilia主题下文件里themes\yilia文件夹下的_config.yml) # 打赏基础设定:0-关闭打赏: 1-文章对应的md文件里有reward:true属性,才有打赏: 2-所有文章均有打赏 reward_type: 1 # 打赏wording reward_wording: '谢谢你请我吃糖果' # 支付宝

JAVA学习-第三个代码模型

第三个代码模型:对象比较 在讲解具体的概念之前,再来观察一种引用传递的形式,本类接收本类对象. 范例:观察程序代码(暂时不要去思考代码意义) class Person { private String name ; public Person(String name) { this.name = name ; }       // 接收本类对象          public void change(Person temp) {                    temp.name = "李

MySQL 一致性读 深入研究 digdeep博客学习

http://www.cnblogs.com/digdeep/p/4947694.html 一致性读,又称为快照读.使用的是MVCC机制读取undo中的已经提交的数据.所以它的读取是非阻塞的. 相关文档:http://dev.mysql.com/doc/refman/5.6/en/innodb-consistent-read.html A consistent read means that InnoDB uses multi-versioning to present to a query a

[android] 看博客学习hashCode()和equals()

equals()是Object类提供的一个方法,众所周知,每一个java类都继承自Object,所以说每一个对象都有一个equals()方法,我们在用这个方法时却一般重写这个方法 Object类中equals()方法源码 public boolean equals(Object obj) { return (this == obj); } 此时比较的是两个引用是否指向同一个对象,我们来使用这个方法的时候往往是希望比较两个对象逻辑上是否相等 String类重写了equals()方法,因此: Str

[android] 看博客学习Android常见的几种RuntimeException

异常分为两种: 1.编译时异常 当编译时异常抛出时,需要对其进行处理声明,否则编译不通过 2.运行时异常 编译时不检测,运行时 如果抛出,程序会立刻停止 NullPointerException 空指针引用异常 ClassCastException 类型转换异常 IllegalArgumentException 非法参数异常 ArithmeticException 算数运算异常 IndexOutOfBoundsException 下标越界异常 NumberFormatException 数字格式

Kinect for Windows SDK v2.0 开发笔记 博客学习网址,Mark!!!

http://blog.csdn.net/u014365862?viewmode=contentshttp://blog.csdn.net/dustpg/article/category/2408183