顶部导航条和旁边的导航条都不能定位

顶部导航条和旁边的导航条都不能定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
我把代码贴上来麻烦老师帮忙看一下 谢谢
 
 
<!-- <!DOCTYPE html> 因为在js中，
document.body.scrollTop不需要设置dtd所以删掉试试
-->
<html>
<head>
    <meta charset="UTF-8">
    <title>慕课手机</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
<header class="head">
    <div class="head_container">
        <div class="head_container_logo">慕课手机</div>
        <nav class="head_container_nav">
            <a href="#" class="head_container_nav_item">首页</a>
            <a href="#" class="head_container_nav_item">外观</a>
            <a href="#" class="head_container_nav_item">配置</a>
            <a href="#" class="head_container_nav_item">型号</a>
            <a href="#" class="head_container_nav_item">说明</a>
            <a href="#" class="head_container_nav_item head_container_nav_item_button">立即购买</a>
            <div class="head_container_nav_tip"></div>
        </nav>
    </div>
</header>
<div class="main">
    <div class="screen_1">
        <h1 class="screen_1_title screen_1_title_animate_init"><b>慕课手机</b> 让你的生活更精彩</h1>
        <div class="screen_1_photo screen_1_photo_animate_init"></div>
        <div class="screen_1_shadow screen_1_shadow_animate_init"></div>
    </div>
 
    <div class="screen_2">
         
            <h1 class="screen_2_title">优美的设计，更令人着迷</h1>
            <h3 class="screen_2_title_subheading">采用受欢迎的设计，让他更加出色。<br />
                款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显的格外精致。
            </h3>
         
        <div class="screen_2_photo">
            <div class="screen_2_point screen_2_icon1">高清摄像</div>
            <div class="screen_2_point screen_2_icon2">超薄机身</div>
            <div class="screen_2_point screen_2_icon3">大屏显示</div>
        </div>
         
    </div>
 
    <div class="screen_3">
        <div class="screen_3_container">
            <h2 class="screen_3_head">外形小巧，功能强大的手机</h2>
            <h3 class="screen_3_subhead">采用受欢迎的设计，让它更加出色。<br>
            款式小巧、轻便手感更舒服。绚丽高清的显示屏，整个外观显得格外精致。</h3>
            <div class="screen_3_feature">
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_num">5.7</div>
                    <div class="screen_3_feature_item_lan">英寸大屏</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_num">1200</div>
                    <div class="screen_3_feature_item_lan">万像素</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_num">3D</div>
                    <div class="screen_3_feature_item_lan">Touch</div>
                </div>
                <div class="screen_3_feature_item">
                    <div class="screen_3_feature_item_num">A9</div>
                    <div class="screen_3_feature_item_lan">处理器</div>
                </div>
            </div> <!-- end item -->
            <div class="screen_3_photo"></div>
        </div>  <!-- end screen3—container -->
    </div>
 
    <div class="screen_4">
            <h2 class="screen_4_heading">丰富的手机型号</h2>
            <h3 class="screen_4_subheading">找到合适你手机</h3>
            <div class="screen_4_photocotent">
                <div class="screen_4_item screen_4_containerphoto1"> <div class="screen_4_item_color">慕课红 <br>32G/64G/128G</div></div>
                <div class="screen_4_item screen_4_containerphoto2"> <div class="screen_4_item_color">土豪金 <br>32G/64G/128G</div></div>
                <div class="screen_4_item screen_4_containerphoto3"><div class="screen_4_item_color">太空灰 <br>32G/64G/128G</div></div>
                <div class="screen_4_item screen_4_containerphoto4"> <div class="screen_4_item_color">绅士黑 <br>32G/64G/128G</div></div>
            </div>
    </div>
 
    <div class="screen_5">    
        <h2 class="screen_5_heading">游戏、学习、拍照，有这一部就够了</h2>
        <h3 class="screen_5_subheading">看视频、拍摄高清视频与照片视频聊天、通话相结合，一机多功能，让您的生活更加丰富多彩。</h3>
        <div class="screen_5_photo"></div>
    </div>
 
    <div class="screen_6">
        <div class="screen_6_button">立即购买</div>
    </div>
 
</div>
<div class="outline">
    <a href="#" class="outline_item">首页</a>
    <a href="#" class="outline_item">外观</a>
    <a href="#" class="outline_item">配置</a>
    <a href="#" class="outline_item">型号</a>
    <a href="#" class="outline_item">说明</a>
</div>
<footer>
    <p>©2016 imocc.com 京ICP备13046642号</p>
</footer>
<script src="js/index.js"></script>
</body>
</html>
幕布斯1065030 2018-01-17
源自：H5+CSS3+JS实现炫酷网页   5-4 导航条的双向绑定
49
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

5回答
小于飞飞 回答被采纳获得+3积分 2018-01-18 10:18:42

1.顶部导航当滚动时也是定位在上面，要设置固定定位，如下：

1
2
3
4
5
6
7
.head_container {
   height: 80px;
   width: 1350px;
   background-color: #f7f7f7;
   position: fixed;
   top: 0px;
}

2. 导航条都不能定位，是想实现什么效果。不是很清楚，可以具体描述。

希望对你有帮助，动手实践，加油！


0
收起回答
  • 幕布斯1065030 提问者 #1
    不好意思，我表达有误。应该是点击对应的导航，不能跳转
    2018-01-18 10:22:00
  • 小于飞飞 #2
    因为链接href的设置，导致点击就刷新下页面，所以document.body.scrollTop的为0，跳转不到相应的位置，修如下：<a href="javascript:;" class="outline_item">首页</a>，其它同理，动手实践，加油！
    2018-01-18 11:10:57
  • 幕布斯1065030 提问者 回复 小于飞飞 #3
    ok ，实验之后到达了预期效果。谢谢老师。
    2018-01-18 21:10:21
提问者 幕布斯1065030 2018-01-17 21:22:52

reset.css我没贴上来。我看好多同学都是这里有问题，不知道是不是一样的。求指导，谢谢了

0
收起回答
提问者 幕布斯1065030 2018-01-17 21:21:48
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
// 获取元素
var getElem = function ( selector ) {
    return document.querySelector(selector);
}
// 获取所有元素
var getElemAll = function ( selector ) {
    return document.querySelectorAll(selector);
}
// 获取元素样式
var getCls = function ( element ) {
    return element.getAttribute('class');
}
// 设置元素样式 (其实没啥用，直接有添加样式替代)
var setCls = function ( element, cls ) {
    return element.setAttribute('class', cls);
}
// 给元素添加样式
var addCls = function ( element, cls ) {
    var baseCls = getCls(element);
    if (baseCls.indexOf(cls) === -1) { // 如果baseCls这个样式中没有找到cls,则设置样式为
        setCls( element,baseCls+' '+cls);// 原样式baseCls+cls
    }
    return; 
}
// 给元素删除样式
var delCls = function ( element, cls ) {
    var baseCls = getCls(element);
    if (baseCls.indexOf(cls) !== -1) {
        setCls( element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
    }
    return; 
}
 
// 第一步 初始化样式init
var screenAnimateElements = {
    '.screen_1' : [
        '.screen_1_title',
        '.screen_1_photo',
        '.screen_1_shadow',
    ],
    '.screen_2' : [
        '.screen_2_title',
        '.screen_2_title_subheading',
        '.screen_2_photo',
        '.screen_2_point',
        '.screen_2_icon1',
        '.screen_2_icon2',
        '.screen_2_icon3',
    ],
    '.screen_3' : [
        '.screen_3_head',
        '.screen_3_subhead',
        '.screen_3_photo',
        '.screen_3_feature',
    ],
    '.screen_4' : [
        '.screen_4_heading',
        '.screen_4_subheading',
        '.screen_4_photocotent',
        '.screen_4_containerphoto1',
        '.screen_4_containerphoto2',
        '.screen_4_containerphoto3',
        '.screen_4_containerphoto4',
    ],
    '.screen_5' : [
        '.screen_5_heading',
        '.screen_5_subheading',
        '.screen_5_photo',
    ]
};
// 设置屏幕内元素为初始状态
var setScreenAnimateInit = function ( screenCls ) {
    var screen = document.querySelector(screenCls); // 获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];// 需要设置动画的元素
    for (var i = 0; i < animateElements.length; i++) {    
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');
    }
}
//  第二步附加：初始化第一屏的动画（1. skipScreenAnimateInit 2.跳过 init ）
 
setTimeout(function(){playScreenAnimateDone('.screen_1');},100)
 
// 播放屏内元素动画
var playScreenAnimateDone = function ( screenCls ) {
    var screen = document.querySelector(screenCls); // 获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];// 需要设置动画的元素
    for (var i = 0; i < animateElements.length; i++) {    
        var element = document.querySelector(animateElements[i]);
        var baseCls = element.getAttribute('class');
        element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
    }
}
 
window.onload = function () {
    //    一旦载入就执行一边初始化
    for ( k in screenAnimateElements ) {
        if(k == '.screen_1'){
          continue;
    }
        setScreenAnimateInit(k);
    }
}
 
// 第二步 屏幕滚动到哪里就播放到哪里
/*****
        点击nav和outline不能跳转  本以为是不是声明位置的原因不对导致
        不能跳转的，经实验然，发现不是。问题待解决
            var navItems = getElemAll('.head_container_nav_item');
            var outlineItems = getElemAll('.outline_item');
        经过检查也发现getElemAll方法也没有错，也获取到了相应的正确的
        元素。
*****/
var navItems = getElemAll('.head_container_nav_item');
var outlineItems = getElemAll('.outline_item');
var switchNavItemsActive = function ( idx ) {
 
    for (var i = 0; i < navItems.length; i++) {
        delCls( navItems[i], 'head_container_nav_item_active');
    }
    addCls( navItems[idx], 'head_container_nav_item_active');
 
    for (var i = 0; i < outlineItems.length; i++) {
        delCls( outlineItems[i], 'outline_item_active');
    }
    addCls( outlineItems[idx], 'outline_item_active');
}
// 直接让0高亮
switchNavItemsActive(0);
window.onscroll = function () {
    /*** 
         document.documentElement.scrollTop 是用于有DTD声明的
         document.body.scrollTop 是用于没有DTD声明的
         为了到达练习效果，先使用了document.body.scrollTop
         后面需要改回来，按照标准来。
     ***/
    // var top = document.documentElement.scrollTop;
    var top = document.body.scrollTop;
    // console.log(top);
    if ( top>80 ) {
        addCls( getElem('.outline'),'outline_status_in');
        addCls( getElem('.head_container'), 'head_status_black');    
    }else {
        delCls( getElem('.head_container'), 'head_status_black');
        delCls( getElem('.outline'),'outline_status_in');
 
        switchNavItemsActive(0);
    }
 
    if ( top> (800*1 -100) ) {
        playScreenAnimateDone('.screen_2');
        switchNavItemsActive(1);
    }
 
    if ( top> (800*2 -100) ) {
        playScreenAnimateDone('.screen_3');
        switchNavItemsActive(2);
    }
 
    if ( top> (800*3 -100) ) {
        playScreenAnimateDone('.screen_4');
        switchNavItemsActive(3);
    }
 
    if ( top> (800*4 -100) ) {
        playScreenAnimateDone('.screen_5');
        switchNavItemsActive(4);
    }
}
 
// 第三步双向绑定
 
var navItems = getElemAll('.head_container_nav_item');
var outlineItems = getElemAll('.outline_item');
 
 
var setNavJump = function (i,lib) {
    var elem = lib[i];
    elem.onclick = function () {
        // console.log(i);
        document.body.scrollTop = i*800;
    }
}
 
 
for (var i = 0; i < navItems.length; i++) {
     setNavJump(i,navItems);
 }
for (var i = 0; i < outlineItems.length; i++) {
     setNavJump(i,outlineItems);
 }
 
 // 滑动门特效
var navTip = getElem('.head_container_nav_tip');
var setTip = function ( idx,lib ) {
 
    lib[idx].onmouseover = function () {
        // console.log(this.idx);
        navTip.style.left = (idx*52)+ 'px';
    }
 
    var activeIdx = 0;
    lib[idx].onmouseout = function () {
        // console.log(this.idx);
        for (var i = 0; i < navItems.length; i++) {
            if (getCls(lib[i]).indexOf('head_container_nav_item_active')) {
                activeIdx = i;
                break;
            } 
        }
        navTip.style.left = (idx*52)+ 'px';
    }
}
 
 for (var i = 0; i < navItems.length; i++) {
     setTip(i,navItems);
 }


0
收起回答
提问者 幕布斯1065030 2018-01-17 21:21:19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
/*第一屏动画样式*/
.screen_1_shadow,
.screen_1_photo,
.screen_1_title {
    transition: all 1s;
}
.screen_1_shadow_animate_init,
.screen_1_title_animate_init {
    opacity: 0;
    transform: translate(0,100%);
}
.screen_1_shadow_animate_done,
.screen_1_photo_animate_done,
.screen_1_title_animate_done {
    /*在第一次写的时候错误的将opacity写成了0所以看不见这个模块*/
    opacity: 1;
    transform: translate(0,0);
}
.screen_1_photo_animate_init {
    opacity: 0;
    transform: translate(0,-100%);
}
 
 
/*第二屏动画样式*/
.screen_2_title,
.screen_2_title_subheading,
.screen_2_photo {
    transition: all 1s;
}
.screen_2_photo_animate_init,
.screen_2_title_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_2_title_animate_init {
    opacity: 0;
    transform: translate(0,-100%);
}
.screen_2_photo_animate_done,
.screen_2_title_subheading_animate_done,
.screen_2_title_animate_done {
    opacity: 1;
    transform: translate(0,0);
}
 
 
/*.screen_2_point {
    transition: all 1s 1s;
}
.screen_2_point_animate_init
 {
    opacity: 0;
    transform: translate(-100%,0);
}
.screen_2_point_animate_done
 {
    opacity: 1;
    transform: translate(0,0);
}*/
 
 
 
/*.screen_2_icon1,
.screen_2_icon2,
.screen_2_icon3*/ 
.screen_2_point{
    transition: all 0.5s 1s;
}
/*.screen_2_icon1_animate_done,
.screen_2_icon2_animate_done,
.screen_2_icon3_animate_done*/
 .screen_2_point_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_2_icon1_animate_init
 {
    opacity: 0;
    transform: translate(-100%,0);
}
.screen_2_icon2_animate_init,
.screen_2_icon3_animate_init
 {
    opacity: 0;
    transform: translate(100%,0);
}
 
 
/*第三屏动画*/
.screen_3_feature,
.screen_3_head,
.screen_3_subhead,
.screen_3_photo {
    transition: all 1s;
}
.screen_3_head_animate_init,
.screen_3_subhead_animate_init{
    opacity: 0;
    transform: translate(-100%,0);
}
.screen_3_photo_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_3_head_animate_done,
.screen_3_subhead_animate_done,
.screen_3_photo_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_3_feature_animate_init{
    opacity: 0;
    transform: scale(0.5);
}
.screen_3_feature_animate_done{
    opacity: 1;
    transform: scale(1);
}
.screen_3_feature_item {
    transition: all 1s;
}
.screen_3_feature_item:hover {
    transform: scale(1.1);
    border: 1px solid #fff;
    cursor: pointer;
}
/*第四屏*/
.screen_4_heading,
.screen_4_subheading,
.screen_4_photocotent{
    transition: all 1s;
}
.screen_4_photocotent_animate_init,
.screen_4_heading_animate_init,
.screen_4_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_4_photocotent_animate_done,
.screen_4_heading_animate_done,
.screen_4_subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
.screen_4_containerphoto1{
    transition: all 1s .5s;
}
.screen_4_containerphoto2{
    transition: all 1s 1s;
}
.screen_4_containerphoto3{
    transition: all 1s 1.5s;
}
.screen_4_containerphoto4{
    transition: all 1s 2s;
}
 
.screen_4_containerphoto1_animate_init,
.screen_4_containerphoto2_animate_init,
.screen_4_containerphoto3_animate_init,
.screen_4_containerphoto4_animate_init{
    opacity: 0;
}
.screen_4_containerphoto1_animate_done,
.screen_4_containerphoto2_animate_done,
.screen_4_containerphoto3_animate_done,
.screen_4_containerphoto4_animate_done{
    opacity: 1;
}
 
/*第五屏*/
.screen_5_heading,
.screen_5_subheading,
.screen_5_photo{
    transition: all 1s;
}
 
.screen_5_photo_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_5_photo_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen_5_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen_5_heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen_5_subheading_animate_done,
.screen_5_heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
/*设置帧动画*/
@-webkit-keyframes bounce {
        0%,100%{
            transform: scale(0);
        }
        50%{
            transform: scale(1);
        }
}
 
/*使用帧动画*/
.screen_2_point:after,
.screen_2_point:before {
    content: ' ';
    display: block;
    width: 20px; 
    height: 20px;
    position: absolute;
    top: 7px;
    /*left: 1px;*/
    background-color: rgba(255,0,0,0.4);
    -webkit-animation: bounce 2s infinite;
    border-radius: 50%;
}
 
.screen_2_point:before {
    -webkit-animation: bounce 2s infinite 1s; 
}
 
.screen_2_icon1:after,
.screen_2_icon1:before {
    left: 150px;
}
 
/*导航条 status back 样式*/
.head {
    transition: all 1s;
}
 
.head_status_black {
    background-color: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
}
.head_status_black .head_container_nav_item,
.head_status_black .head_container_logo {
    color: #fff;
}
.head_status_black .head_container_nav_item_active {
    color: #f01400;
}
/*侧边栏大纲 _status_in 样式*/
.outline {
    opacity: 0;
    transition: all 1s;
    transform: translate(100%,0);
}
 
.outline_status_in {
    opacity: 1;
    transform: translate(0,0);
}
 
.outline_item_active {
    color: #f01400;
}


0
收起回答
提问者 幕布斯1065030 2018-01-17 21:20:18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
.head_container {
    height: 80px;
    width: 1350px;
    background-color: #f7f7f7;
    position: relative;
}
 
.head_container_logo {
    width: 135px;
    height: 40px;
    color: #2b3137;
    font-size: 20px;
    line-height: 40px;
    text-indent: 50px;
    background: url(../img/logo.png) left center no-repeat;
    background-size: 38px 38px;
    position: absolute;
    top: 50%;
    margin-top: -26px;
    left: 80px;
}
 
.head_container_nav {
    position: absolute;
    width: 490px;
    height: 38px;
    right: 10px;
    top: 50%;
    margin-top: -18px;
}
 
.head_container_nav_item {
    color: #292f35;
    font-size: 16px;
    height: 38px
    line-height: 38px;
    display: inline-block;
    /*或者可以使用*/
    /*display: block;
    float: left;*/
    margin-right: 15px;
    position: relative;
}
 
.head_container_nav_item:hover {
    color: #f01400;
}
 
/*.head_container_nav_item_active {
    color: #f01400;
}*/
 
.head_container_nav_item_active::after{
    /*content: " ";*/
    /*下面这三句是设置伪元素的样式*/
    /*display: block;
    width: 100%;
    height: 2px;
    background-color: #f01400;*/
    /*下面要给这个块级元素定位,需要position为absolute,所以父元素也要设置position*/
    /*之后在具体调位置*/
    /*position: absolute;
    left: 0;
    bottom: -10px;*/
} 
 
.head_container_nav_item_button {
    width: 90px;
    height: 35px;
    line-height: 35px;
    background-color: #07111b;
    color: #f4f4f5;
    text-align: center;
    border-radius: 3px;
}
 
.head_container_nav_tip {
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #f01400;
    bottom: 0;
    left: 0;
    margin-left: 1px;
    transition: all .5s;
}
 
 
 
/*第一屏*/
.screen_1 {
    position: relative;
    height: 800px;
    background: url(../img/bg-screen-1.png);
    overflow: hidden;
} 
 
.screen_1_title {
    position: absolute;
    font-size: 40px;
    line-height: 40px;
    top: 210px;
    left: 432px;
}
 
.screen_1_title b {
    color: #f01400;
}
 
.screen_1_photo {
    width: 1375px;
    height: 305px;
    top: 340px;
    background: url(../img/screen-1-phone.png)  no-repeat center;
    position: absolute;
    background-size: 90%;
    z-index: 3; 
}
 
.screen_1_shadow {
    position: absolute;
    width: 1233px;
    height: 411px;
    top: 400px;
    background: url(../img/screen-1-shadow.png);
    z-index: 2;
    opacity: 0.8;
}
 
/*第二屏*/
.screen_2 {
    height: 800px;
    background-color: #fafafa;
    position: relative;
    overflow: hidden;
}
 
.screen_2_title {
    color: #f01400;
    font-size: 35px;
    text-align: center;
    position: absolute;
    top: 145px;
    left: 400px;
}
 
.screen_2_title_subheading {
    width: 500px;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    text-align: center;
    margin-top: 15px;
    position: absolute;
    top: 180px;
    left: 355px;
}
 
.screen_2_photo {
    width: 800px;
    height: 560px;
    background: url(../img/screen-2-phone.png) no-repeat;
     
    position: absolute;
    top: 280px;
    left: 300px;
}
 
.screen_2_icon1 {
    width: 170px;
    height: 35px;
    line-height: 35px;
    background: url(../img/icon-point-right.png) no-repeat right;
    position: absolute;
    top: 145px;
    left: -100px;
}
.screen_2_icon2 {
    width: 170px;
    height: 35px;
    line-height: 35px;
    background: url(../img/icon-point-left.png) no-repeat left;
    position: absolute;
    top: 35px;
    right: 50px;
    text-indent: 100px;
}
.screen_2_icon3 {
    width: 170px;
    height: 35px;
    line-height: 35px;
    background: url(../img/icon-point-left.png) no-repeat left;
    position: absolute;
    top: 375px;
    right: -55px;
    text-indent: 100px;
}
 
/*第三屏*/
.screen_3 {
    height: 800px;
    background: url(../img/bg-screen-3.png) no-repeat;
    background-size: cover;
    overflow: hidden;
}
 
.screen_3_container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
 
.screen_3_head {
    color: #fff;
    float: left;
    top: 180px;
    position: absolute;
}
.screen_3_subhead {
    color: #fff;
    float: left;
    top: 248px;
    position: absolute;
    font-size: 14px;
}
 
.screen_3_feature {
    width: 310px;
    height: 290px;
    position: absolute;
    top: 380px;
    left: 20px;
}
 
.screen_3_feature_item {
    width: 138px;
    height: 118px;
    border: 1px solid #cd7173;
    border-radius: 3px;
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 20px;
    color: #fff;
    text-align: center;
}
 
.screen_3_feature_item_num {
    margin-top: 30px;
    font-size: 25px;
}
.screen_3_feature_item_lan {
    margin-top: -5px;
}
 
.screen_3_photo {
    width: 750px;
    height: 610px;
    background: url(../img/screen-3-phone.png) no-repeat;
    overflow: hidden;
    top: 200px;
    right: 0;
    position: absolute;
}
 
 
/*第四屏*/
.screen_4 {
    height: 800px;
    background: #fff;
    overflow: hidden;
    position: relative;
}
 
.screen_4_heading {
    position: absolute;
    color: #f01414;
    top: 155px;
    left: 505px;
    font-size: 30px;
}
.screen_4_subheading {
    position: absolute;
    top: 220px;
    left: 555px;
    font-size: 14px;
}
 
.screen_4_photocotent {
    width: 1260px;
    height: 270px;
    position: absolute;
    margin: 0 auto;
    top: 305px;
    left: 100px;
    /*margin: 0 auto;*/
}
 
.screen_4_item {
    width: 220px;
    height: 270px;
    margin-right: 90px;
    float: left;
}
 
.screen_4_item_color {
    position: absolute;
    top: 290px;
    color: #2c3238;
    text-align: center;
    margin-left: 60px;
}
 
.screen_4_containerphoto1 {
    background: url(../img/phone-1.png) no-repeat;
}
.screen_4_containerphoto2 {
    background: url(../img/phone-2.png) no-repeat;
}
.screen_4_containerphoto3 {
    background: url(../img/phone-3.png) no-repeat;
}
.screen_4_containerphoto4 {
    background: url(../img/phone-4.png) no-repeat;
}
/*第五屏*/
.screen_5{
    height: 800px;
    position: relative;
    overflow: hidden;
    background: #d9dde1;
}
 
.screen_5_heading {
    position: absolute;
    top: 185px;
    left: 435px;
    font-size: 30px;
    color: #f01414;
}
.screen_5_subheading {
    position: absolute;
    top: 225px;
    left: 350px;
    font-size: 16px;
    color: #262c33;
}
.screen_5_photo {
    width: 1920px;
    height: 450px;
    left: 50%;
    margin-left: -860px;
    position: absolute;
    bottom: -100px;
    background: url(../img/bg-screen-5.png) no-repeat center;
    background-size: contain;
}
 
.screen_6 {
    height: 317px;
    background: url(../img/bg-screen-buy.png);
    position: relative;
}
 
.screen_6_button {
    height: 80px;
    line-height: 80px;
    text-align: center;
    width: 245px;
    background-color: #f01414;
    color: #f7a0a0;
    border-radius: 3px;
    position: absolute;
    top: 120px; 
    left: 555px;
    transition: all .5s;
}
 
.screen_6_button:hover {
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
 
.outline {
    position: fixed;
    padding: 5px 10px;
    bottom: 240px;
    right: 0;
    z-index: 3;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
 
.outline_item {
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 5px 0;
    margin-top: 5px;
    border-top: 1px solid #eee;
    color: #39999f;
}
 
.outline_item:first-child {
    border: none;
}
 
.outline_item_active {
    color: red;
}
footer {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 16px;
    background-color: #07111b;
    color: #d2d2d3;
}


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

CSS-2-10项目作业。滑到gallery部分导航条定位失败
2 0 4
顶部导航条问题
16 0 4
响应式导航条折叠
40 0 6
导航页码的数量又怎么配置呢
1 0 3
2-7作业导航问题
20 0 3

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

了解课程

本课精华内容

问答 作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码