页头、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完整CSS代码：

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;
}

css扁平化博客学习总结（三）header代码实现的更多相关文章

  1. css扁平化博客学习总结（二）css样式重置

    css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, block ...

  2. css扁平化博客学习总结（一）模块分析

    一.模块分析 1.每开发一个项目之前,首先要对项目进行一个大致规划,它到底要做什么功能,它有什么具体需求. 2.所以需要进行模块化分析,把这些东西具象化,把一个问题模块化,对需求有一个宏观的了解. 3 ...

  3. css扁平化博客学习总结（四）content代码实现

    1.根据功能,把不同的部分写出来,方便扩展 <div class="content"><!-- 内容开始 --> <section class=&qu ...

  4. FPGA一个博客学习

    FPGA一个博客学习 http://bbs.ednchina.com/BLOG_PERSONALCAT_100185_2001619.HTM

  5. HelloDjango 第 09 篇：让博客支持 Markdown 语法和代码高亮

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...

  6. 做个开源博客学习Vite2 + Vue3 （三）博客设计和代码设计

    项目搭建好了之后是不是可以编码了呢? 等等不要着急,我们是不是应该先设计一下?比如博客的功能等? 博客设计 先做个简单的个人博客,因为是个人版,所以可以省略注册.登录这些功能,表结构也可以简单一点. ...

  7. python+selenium之悠悠博客学习笔记

    1 Python之自动化测试框架selenium学习 offical website 悠悠之selenium浅谈·博客园 悠悠软件测试系列 1.1 基础环境准备 1.1.1 python包下载工具的安 ...

  8. 做个开源博客学习Vite2 + Vue3 （一）搭建项目

    前言 不会 webpack,遇到报错就一头雾水,完全不知道怎么办,而且体积还大速度还慢. 所以尤雨溪做了 vite 后就很向往,只是知道自己水平有限还是等大佬先趟趟坑,等差不多了在跳. 现在vite2 ...

  9. css大牛的博客

    一个不能再牛的个人简历,请用pc观看:http://strml.net/ 用css来画圆http://jingyan.baidu.com/article/c910274be4dd69cd371d2d4 ...

随机推荐

  1. 【Hadoop代码笔记】通过JobClient对Jobtracker的调用详细了解Hadoop RPC

    Hadoop的各个服务间,客户端和服务间的交互采用RPC方式.关于这种机制介绍的资源很多,也不难理解,这里不做背景介绍.只是尝试从Jobclient向JobTracker提交作业这个最简单的客户端服务 ...

  2. rabbitMQ 笔记

    1. 端口 rabbitMQ  server 使用的端口是5672  ,   AMQP协议的端口 rabbitMQ  web 使用的端口是15672  ,   管理工具的端口 rabbitMQ  cl ...

  3. 如何使用 SPICE client (virt-viewer) 来连接远程虚拟机桌面?

    如何使用 SPICE client (virt-viewer) 来连接远程虚拟机桌面? 什么是SPICE? SPICE (Simple Protocol for Independent Computi ...

  4. Delphi XE5 安卓手机要求

    1 ARMv7 的 CPU v6 的肯定不支持. 2 黑屏是因为你的手机 CPU 不支持 NEON 特性.或者是 T2 海思 CPU .这 2 个不支持. 3 系统版本  2.3.3 到 2.3.9 ...

  5. Stage3D学习笔记（四）：正交矩阵

    我们上一章节显示图片的时候,会发现我们制定的顶点在Stage3D中其实是存在一个区间的: x轴(从左到右):[-1.0-1.0] y轴(从下到上):[-1.0-1.0] z轴(从近到远):[0-1.0 ...

  6. 转（HP大中华区总裁孙振耀退休感言）

    开篇转发一篇好文,苦闷,消沉,寂寞,堕落的时候看看. 发现这篇文章是09年之前就有人转发到自己博客了.放到自己的地盘,容易记起有这么个心灵鸡汤.   一.关于工作与生活 我有个有趣的观察,外企公司多的 ...

  7. DRM加密技术是怎么一回事

    有时我们在播放从网上下载的影视文件时会要求输入用户许可证,否则就不能正常播放,听说是用了一种DRM技术,请简单介绍一下. 答:通常这是利用了多媒体DRM加密技术保护版权(DRM是数字权限管理技术的缩写 ...

  8. 模拟京东商城登陆HttpRequest

    利用Winform HttpRequest 模拟登陆京东商城 目前只获取订单信息,可以获取图片等其他信息 using System; using System.Collections.Generic; ...

  9. Codeforces Round #324 (Div. 2) A. Olesya and Rodion 水题

    A. Olesya and Rodion Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/p ...

  10. [原创]如何写好SqlHelper

    所有写数据库应用的都会遇到SqlHelper.每个人实现的也不同,网上现成的例子也很多.但在实际操作中,大部分都不实用.什么样的才是实用的?答:适合应用场景的! 下面来介绍下我写的一个关于Oracle ...