学完html+css就可以做的web前端开发项目实战——博雅互动

博雅互动项目预览：

一、项目搭建

css部署：一定注意css引入顺序

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

1.1header

结构

1
2

3   

4       
5       

6           博雅互动
7       
8       

9           

10              
首页
11              
博雅游戏
12              
博雅新闻
13              
关于我们
14              
客服中心
15              
投资者关系
16              
加入我们
17          
18      
19      

20          中文
21          EN
22      
23  
24

样式：

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 验证消息：CS，这里有你想要的