HTML5入门 ——首页布局

         本人新手入门，对于前端设计还处于零基础阶段，没有经过专业培训，纯属无聊从慕课网中学习。如本文写的有错误，请批评指正。

         传统布局基本都是在body框架下，头中尾三个直接写<div class = "header" >  <div class="section"></div> <div class = "footer"></div>三部分构成页面的布局，从中发现很多的布局开头都添加了div,为此可见每次设计的时候都相当的麻烦。现在主流的设计模式，直接将头的div直接去掉，<header> <nav><section><footer>省去了很多的繁琐，写起代码相当的简洁。那么两种的方法如图所示：

         看完了两个页面布局之后现在通过一个简单的案例实现首页布局，正如大家所说的一样，首页一般的功能都是开头的导航栏，企业宣传轮播图，中间新闻显示信息，结尾现实企业申请的网站域名和设备号。

      导航栏布局：主页、专业服务、成功案例、在线慕课、资源中心、关于我们

对应的样式如下：

header { position: relative; height: 80px; background: #000; }

header:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; content: ''; background: #d6d6d6; }

header > .container { position: relative; z-index: 1; width: 1200px; margin: 0 auto; }

header > .container > a { display: block; float: left; margin: 5px 25px; }

header > .container > nav { float: right; }

图片轮播图布局

相对应的样式为：/* banner */

.banner { position: relative; background: #eaeaea; }

.banner:after { position: absolute; bottom: 0; left: 0; width: 100%; height: 6px; content: ''; background: #d6d6d6; }

.banner > ul { position: relative; width: 1490px; height: 538px; margin: 0 auto; padding-top: 10px; }

.banner > ul > li { position: absolute; width: 610px; height: 300px; overflow: hidden; }

.banner > ul > li.active { z-index: 2; top: 37px; right: 0; left: 0; width: 960px; height: 460px; margin: auto; border: 1px solid #fff; box-shadow: 0 30px 140px 22px rgba(0, 0, 0, .35); }

.banner > ul > li.left { z-index: 1; top: 0; bottom: 0; left: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }

.banner > ul > li.right { z-index: 1; top: 0; right: 0; bottom: 0; margin: auto; box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .35); }

.banner > ul > li > img { position: absolute; left: -30%; height: 100%; }

如图所示：

---

核心部分主要显示最近课程和企业的宣传信息，本人开始学习只能是简单的页面，所以请大家不要嘲笑。定义一个模块<section class = "main">  左边和右边分别定义<aside>  <article>两个标签在aside中dl>dt>dd>dd 。article中主要由<h1><p><img>三个标签构成布局代码如下：

相对样式如下：/* main */

.main { position: relative; width: 1200px; height: 473px; margin: 34px auto 0; }

.main h1 { font-size: 30px; font-weight: lighter; margin-bottom: 23px; }

.main h1 > samp { font-size: 30px; color: #7c7c7c; }

.main > aside { float: left; width: 450px; }

.main > aside > dl { position: relative; display: block; height: 74px; margin-bottom: 17px; }

.main > aside > dl > dt { position: absolute; top: -1px; left: 92px; font-size: 16px; font-weight: bold; line-height: 16px; text-decoration: underline; }

.main > aside > dl > dd:first-of-type { position: absolute; left: 0; }

.main > aside > dl > dd:last-of-type { position: absolute; top: 20px; left: 90px; }

.main > article { float: right; width: 720px; overflow: hidden; }

.main > article > p,

.main > article > img { margin-bottom: 20px; }

图片如图所示：

开始学习的时候失败过，失望了，也许出来工作了，再次学习需要不是单单的智商，更多的毅力与坚持。

不忘初心，继续前行

毕淑敏曾经说过：人生的三大目标：旅游、学习、工作；工作是为了更好的生活，至少不是为了生活而将自己陷入生活的困境。学习是为了增强自己的业务能力，工作的能力的法宝。旅游开拓视野，调整心态。不忘初心，继续前行。