老师,好难好难啊,对着案例都做不动,后面怎么办哎
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5实战</title> <link rel="stylesheet" type="text/css" href="./css/5-6项目base.css"> <link rel="stylesheet" type="text/css" href="./css/5-6项目index.css"> <link rel="stylesheet" type="text/css" href="./css/animate.css"> </head> <body> <header class="header"> <div class="header_wrap"> <div class="header_logo">H5实战页面</div> <nav class="header_nav"> <a href="javascript:;" class="header_nav-item header_nav-item_status_active">实战课程</a> <a href="javascript:;" class="header_nav-item">商业案例</a> <a href="javascript:;" class="header_nav-item">课程体系</a> <a href="javascript:;" class="header_nav-item">集成环境</a> <a href="javascript:;" class="header_nav-item">云端学习</a> <a href="javascript:;" class="header_nav-item header_nav-item_custom_button">即刻学习</a> <div class="header_nav-tip"></div> </nav> </div> </header> <div class="screen-1"> <h2 class="screen-1_heading screen-1_heading_animate_init">实战课程重磅上线</h2> <h3 class="screen-1_subheading screen-1_heading_animate_init">一键云学习，还在等待什么？</h3> </div> <div class="screen-2"> <h2 class="screen-2_heading">每门课都是真实商业案例</h2> <h3 class="screen-2_subheading">真实案例,真实场景,在实战中实践、操作、调试</br>大牛带你体验BAT真实开发流程,所有开发过程一一为你呈现</h3> <div class="screen-2_banner"> <div class="screen-2_banner1"></div> <div class="screen-2_banner2"></div> <div class="screen-2_banner3"></div> </div> </div> <div class="screen-3"> <div class="screen-3_wrap"> <h2 class="screen-3_heading">强大的语言课程体系支持</h2> <h3 class="screen-3_subheading">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发全流程</h3> <div class="screen-3_banner"></div> <div class="screen-3_features"> <div class="screen-3_features_item"> <div class="screen-3_features_item_desc">HTML5</div> </div> <div class="screen-3_features_item"> <div class="screen-3_features_item_desc">PHP</div> </div> <div class="screen-3_features_item"> <div class="screen-3_features_item_desc">JAVA</div> </div> <div class="screen-3_features_item"> <div class="screen-3_features_item_desc">Python</div> </div> <div class="screen-3_features_item"> <div class="screen-3_features_item_desc">Node.js</div> </div> </div> </div> </div> <div class="screen-4"> <div class="screen-4_wrap"> <h2 class="screen-4_heading">省去本地复杂的环境搭建</h2> <h3 class="screen-4_subheading">你可以告别在虚拟机中调试开发了</h3> <div class="screen-4_type"> <div class="screen-4_type_item screen-4_type_item_i_1"> <div class="screen-4_type_item_desc">实战课程集成开发环境</div> </div> <div class="screen-4_type_item screen-4_type_item_i_2"> <div class="screen-4_type_item_desc">内置终端命令行</div> </div> <div class="screen-4_type_item screen-4_type_item_i_3"> <div class="screen-4_type_item_color">编译你的应用程序</div> </div> <div class="screen-4_type_item screen-4_type_item_i_4"> <div class="screen-4_type_item_desc">通过云端服务输出效果</div> </div> </div> </div> </div> <div class="screen-5"> <div class="screen-5_bg"></div> <h2 class="screen-5_heading">云端学习可以这样简单</h2> <h3 class="screen-5_subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样。</h3> </div> <div class="screen-other"> <a class="screen-other_button" href="javascript:;">继续了解学习体验</a> </div> <footer class="footer"> <a href="javascript:;" class="footer-nav_item">网站首页</a> <a href="javascript:;" class="footer-nav_item">人才招聘</a> <a href="javascript:;" class="footer-nav_item">联系我们</a> <a href="javascript:;" class="footer-nav_item">高校联盟</a> <a href="javascript:;" class="footer-nav_item">关于我们</a> <a href="javascript:;" class="footer-nav_item">讲师招募</a> <a href="javascript:;" class="footer-nav_item">意见反馈</a> <a href="javascript:;" class="footer-nav_item">友情链接</a> <br/> <span>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备13046642号-2</span> </footer> <div class="outline"> <a href="javascript:;" class="outline_item outline_item_status_active">实</a> <a href="javascript:;" class="outline_item">商</a> <a href="javascript:;" class="outline_item">课</a> <a href="javascript:;" class="outline_item">环</a> <a href="javascript:;" class="outline_item">云</a> </div> <script type="text/javascript" src="js/5-6项目index.js"></script> </body> </html>
/*BEM 设计模式
模块(没有前缀,多个单词用-连接)
元素(元素在模块之后,可以有多个层级,以_连接)
修饰(某元素、或者某模块特别的状态,必须有一个状态名和状态值,使用_链接)
*/
.header{
background: rgba(0,0,0, 0.05);
position: fixed;
top:0;
width:100%;
}
.header_wrap{
width:100%;
height:60px;
position: relative;
}
.header_logo{
width: 150px;
height: 60px;
line-height: 60px;
font-size:14px;
font-weight: bold;
color:#ffffff; ;
text-indent: 50px;
background:url('../img/logo.png') left center no-repeat;
margin-left: 11px;
position: absolute;
}
.header_nav{
position: absolute;
right:30px;
height:50px;
top:50%;
margin-top:-25px;
}
.header_nav-item{
color:#ffffff;
font-size:14px;
display: block; /*a标签是行元素,转块元素可以设置行高*/
/*width: 56px;*/
height:50px;
line-height: 50px;
text-align: center;
float: left;
margin-left:38px;
position: relative;
}
.header_nav-item:hover{
color:#f01400;
}
/*.header_nav-item_status_active{
color:#f01400;
}*/
.header_nav-item_custom_button{
width:90px;
background: #f01400;
border-radius:3px;
padding:0;
}
/*第一屏*/
.screen-1{
height:640px;
background:url("../img/sc1.jpg")no-repeat center;
/*position: relative;*/
overflow: hidden;
background-size:cover;
}body{
font-family:"Microsoft Yahei",微软雅黑;
}
a{text-decoration: none;}
*{
padding: 0;
margin: 0;
}老师帮忙看下布局,,页头怎么还是很别扭,按钮好大,怎么弄,感觉完成这个好难唉,第一大章花了快两个月了
3
收起
正在回答
3回答
同学你好， 老师这边测试同学的代码， 头部效果实现的不错呀。
建议优化： 按钮可以只添加特殊的类名
然后，利用组合选择器设置相同的样式
最后， 给按钮添加hover样式设置background属性，实现鼠标移入按钮改变背景颜色
同学不用担心，这个作业与老师讲解的项目案例实现思路大致是一样的， 同学可以先掌握老师案例的实现思想，能够独立完成视频讲解的案例， 然后根据作业要求，一屏一屏慢慢去实现就可以的， 遇到不会的也可以在问答区提问， 我们一定会帮助你解决的
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
慕言_7946275
2019-08-24 21:31:10
/*BEM 设计模式
模块(没有前缀,多个单词用-连接)
元素(元素在模块之后,可以有多个层级,以_连接)
修饰(某元素、或者某模块特别的状态,必须有一个状态名和状态值,使用_链接)
*/
.header{
background: green;
position: fixed;
top:0;
width:100%;
height:60px;
}
.header_wrap{
width:100%;
height:60px;
position: relative;
}
.header_logo{
width: 150px;
height: 60px;
line-height: 60px;
font-size:14px;
font-weight: bold;
color:#ffffff; ;
text-indent: 50px;
background:url('../img/logo.png') left center no-repeat;
margin-left: 11px;
position: absolute;
}
.header_nav{
position: absolute;
right:30px;
height:60px;
top:50%;
margin-top:-19px;
}
.header_nav-item{
color:#ffffff;
font-size:14px;
display: block; /*a标签是行元素,转块元素可以设置行高*/
/*width: 56px;*/
height:38px;
line-height: 38px;
text-align: center;
float: left;
margin-left:38px;
position: relative;
}
.header_nav-item:hover{
color:#f01400;
}
/*.header_nav-item_status_active{
color:#f01400;
}*/
.header_nav-item_custom_button{
width:90px;
background: #f01400;
border-radius:3px;
padding:0;
}
/*第一屏*/
.screen-1{
height:640px;
background:url("../img/sc1.jpg")no-repeat center;
/*position: relative;*/
overflow: hidden;
background-size:cover;
}
慕言_7946275
2019-08-24 21:30:39
按钮修改了,我设置页头绿色比较好观察理解些了,不知道对不对
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星