项目预览：

一、项目搭建

css部署：一定注意css引入顺序
1 清除默认样式css文件  reset.css
2 可以引入原子类（可以下载，自己整理） base.css
3 公共样式（比如头部，底部很多面相同的样式） common.css    （书写一次css文件可以多个html引入）  
4 单页面样式（比如首页，游戏页面）   index.css  game.css(单独只引入一次)

1.1header

结构

1<!-- header头部开始 -->
2<div class="header">
3   <div class="inner">
4       <!-- 同级的logo nav lang -->
5       <h1 class="logo">
6           <a href="" title="鼠标悬停提示文本" target="_blank">博雅互动</a>
7       </h1>
8       <div class="nav">
9           <ul>
10              <li><a href="">首页</a></li>
11              <li><a href="">博雅游戏</a></li>
12              <li><a href="">博雅新闻</a></li>
13              <li><a href="">关于我们</a></li>
14              <li><a href="">客服中心</a></li>
15              <li><a href="">投资者关系</a></li>
16              <li class="join"><a href="">加入我们</a></li>
17          </ul>
18      </div>
19      <div class="lang">
20          <a href="">中文</a>
21          <a href="">EN</a>
22      </div>
23  </div>
24</div>

样式：

1/*公共样式*/
2/*特殊标签样式*/
3a {
4   text-decoration: none;
5   color: #fff;
6}
7/*版心*/
8.inner {
9   width: 1000px;
10  /*块级元素水平居中*/
11  margin: 0 auto;
12}
13
14/*头部样式*/
15.header {
16  width: 100%;
17  height: 58px;
18  background-color: #191D3A;
19}
20.header .inner .logo {
21  /*同级元素并排 + 宽高    浮动  同级元素要浮动都浮动*/
22  float: left;
23  width: 205px;
24  height: 48px;
25  /*对于父子盒有距离尽量使用padding*/
26  padding-top: 10px;
27  padding-left: 20px;
28  overflow: hidden;
29}
30.header .inner .logo a {
31  /*a是行内元素 想设置宽高*/
32  display: block;
33  /*渲染背景图大小*/
34  width: 157px;
35  height: 35px;
36  /*外链式背景图渲染  相对路径*/
37  background-image: url(../images/logo.png);
38
39  /*a标签里面的文字让爬虫看  用户看不到*/
40  text-indent: -9999em;
41}
42.header .inner .nav {
43  float: left;
44  width: 626px;
45  height: 58px;
46}
47.header .inner .nav ul li {
48  /*fl是盒子属性  不能继承*/
49  float: left;
50  width: 85px;
51  height: 58px;
52  border-left: 1px solid #252947;
53}
54.header .inner .nav ul li a {
55  display: block;
56  height: 58px;
57  line-height: 58px;
58  background-color: #191D3A;
59  color: #818496;
60  font-size: 12px;
61  text-align: center;
62}
63.header .inner .nav ul li.cur a {
64  background-color: #252947;
65  color: #fff;
66}
67/*特殊join层叠*/
68.header .inner .nav ul li.join {
69  width: 100px;
70  height: 46px;
71  padding-left: 9px;
72  padding-top: 12px;
73}
74.header .inner .nav ul li.join a {
75  width: 98px;
76  height: 32px;
77  border: 1px solid #3ACA7A;
78  background-color: #38B774;
79  color: #fff;
80  line-height: 32px;
81  /*border-radius圆点*/
82  border-radius: 3px;
83}
84.header .inner .lang {
85  float: right;
86  /*脱标   不设置宽高内容撑高*/
87  line-height: 58px;
88  font-size: 12px;
89  overflow: hidden;
90}
91.header .inner .lang a {
92  float: left;
93  color: #444866;
94}
95/*特殊类名*/
96.header .inner .lang a.first {
97  margin-right: 12px;
98}
99/*轮换类名*/
100.header .inner .lang a.cur {
101 color: #38B774;
102} 
103/*固定定位*/
104.top {
105 width: 68px;
106 height: 29px;
107 position: fixed;
108 /*脱标 浏览器的四个顶点*/
109 bottom: 74px;
110 right: 20px;
111}
112.top a {
113 display: block;
114 height: 29px;
115 background: url(../images/top.png) no-repeat 0px -40px;
116}
117.top a:hover {
118 background-position: 0px 0px;
119}

扫描下方二维码添加微信：haomei0452

领取 前端资料、项目实战视频教程、源码笔记案例、学费优惠 ！

爱创课堂是一家专门做前端培训的机构，由百度高级工程师，《JavaScript设计模式》作者张容铭老师亲自授课，全程20个项目实战，真正做到学习完即可到企业正常工作！

 
我们前端课程的五大优势：
 
1. 名师亲自授课，根据企业需求 实时跟进课程大纲，保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式（一个班20—30人，保证老师可以照顾到每一位同学，学员有充足的时间练习）

3. 签订就业协议，帮助学员制作简历，投递简历，模拟面试，不用担心就业问题，目前学员平均就业薪资12K

4. 免费学习一周，不满意不收取任何费用

5. 与中国石油，中国电信，软通等知名企业合作，进行企业内训，并进行学员就业推荐