博雅互动项目预览：
一、项目搭建
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}web前端学习交流裙liu wu san si qi jiu liu er yi 验证消息：51
获取更多前端项目实战视频教程、源码笔记案例、前端学习资料、学习路线，