学完html+css就可以做的前端项目实战
项目预览:
一、项目搭建
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. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐
上一篇文章:
web前端开发源码笔记_ES5 第二天