老师,好难好难啊,对着案例都做不动,后面怎么办哎

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!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 &copy 2015 imooc.com All Rights Reserved |&nbsp京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;
     
}

老师帮忙看下布局,,页头怎么还是很别扭,按钮好大,怎么弄,感觉完成这个好难唉,第一大章花了快两个月了

慕言_7946275 2019-08-24

源自：宣传页项目 5-6 作业题

收起

3回答

好帮手慕慕子回答被采纳获得+3积分 2019-08-25 10:09:00

同学你好，老师这边测试同学的代码，头部效果实现的不错呀。

建议优化：按钮可以只添加特殊的类名

然后，利用组合选择器设置相同的样式

最后，给按钮添加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

按钮修改了,我设置页头绿色比较好观察理解些了,不知道对不对

收起回答

提问者慕言_7946275 #1

/*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; }

2019-08-24 21:30:52