学完html+css就可以做的前端项目实战

爱创课堂专业前端培训
微信：haomei0452
前端资料免费分享平台

关注

博雅互动项目预览：

一、项目搭建

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

复制代码

1.1header

结构

123 4 5 6 博雅互动7 8 9 10 首页11 博雅游戏12 博雅新闻13 关于我们14 客服中心15 投资者关系16 加入我们17 18 19 20 中文21 EN22 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}1314/*头部样式*/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);3839 /*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}

复制代码

分享本文到朋友圈即可扫码领取项目实战视频教程+源码笔记案例

爱创课堂官网：www.icketang.com

喜欢记得来一个