怎样设置页眉区能在设置固定定位且width100%的情况下

怎样设置页眉区能在设置固定定位且width100%的情况下

document.html

<!DOCTYPE html>
<meta charset="gbk"/>
<html>
<head>
    <title>Career Builder</title>
    <link rel="stylesheet" type="text/css" href="document.css">
    <script type="text/javascript" src="document.js"></script>
</head>
<body>
  <div class="header">
      <a href="#"><img src="image/logo.png" class="img-header"></a>
      <ul>
          <li>
              <a href="#"><p>CONTACT</p></a>
          </li>
          <li>
              <a href="#"><p>EVENTS</p></a>
          </li>
          <li>
              <a href="#"><p>FACULTY</p></a>
          </li>
          <li>
              <a href="#"><p>GALLERY</p></a>
          </li>
          <li>
              <a href="#"><p>ABOUT</p></a>
          </li>
          <li>
              <a href="#"><p>HOME</p></a>
          </li>
      </ul>
  </div>
  <div class="banner">
      <form action="" method="post">
          <img src="image/banner3.jpg">
          <div class="input1-form">
            <input type="text" name="" value="your Name" style="width: 450px; height: 35px;">
          </div>
          <div class="input2-form">
            <input type="text" name="" value="your Phone" style="width: 450px; height: 35px;">
          </div>
          <div class="input3-form">
            <input type="text" name="" value="your Email" style="width: 450px; height: 35px;">
          </div>
          <div class="input4-form">
            <textarea rows="" cols="" value="" style="width: 448px;height: 130px">Write Your Comment Here</textarea>
          </div>
          <div class="input5-form">
            <input type="submit" name="" value="SEND MESSAGE" style="width: 125px; height: 40px;">
          </div>
      </form>
  </div>
  <div class="about">
      <div>
          <title></title>
          <p></p>
      </div>
      <div></div>
      <div></div>
  </div>
  <div class="gallery"></div>
  <div class="footer"></div>
</body>
</html>

document.css

body{
    width: 1700px;
    margin:0 0;
    font-family: Microsoft YaHei UI;
}

/*设置顶部*/
.header{
    width: 100%;
    height: 100px;
    background-color: #07cbc9;
    position: fixed;
    top: -16px;
    right: 0;
    z-index: 800;
}

.header .img-header{
    margin-top:20px;
    margin-left: 80px;
    float: left;
}

.header ul{
    width: 1400px;
    margin-right: 120px;
}

.header ul li{
    list-style: none;
    float: right;
    height: 100px;
    margin-top: -16px;
}

.header ul li a p{
    /*设置段落格式*/
    width: 78px;
    height: 100px;
    line-height: 100px;
    color: white;
    margin-top: 0px;
    text-align: center;
}

.header ul li a{
    /*去下划线*/
    text-decoration: none;
}

.header ul li a p:hover{
    background-color: black;
}

/*设置banner区*/
.banner{
    width: 100%;
    background-color: black;
    position: absolute;
    z-index: 200;
}

/*设置背景图片和透明度*/
.banner form{
    // background: url(image/banner3.jpg) no-repeat;
    // background-size: cover;
    width: 100%;
    height: 800px;
    // opacity: 0.4;
}

.banner form img{
    position: absolute;
    z-index: 300;
}
.banner form .input1-form{
    position: absolute;
    z-index: 400;
    top: 212.5px;
    left: 624px;
}

.banner form .input2-form{
    position: absolute;
    z-index: 400;
    top: 272.5px;
    left: 624px;
}
.banner form .input3-form{
    position: absolute;
    top: 332.5px;
    left: 624px;
    z-index: 400;
}
.banner form .input4-form{
    position: absolute;
    top: 392.5px;
    left: 624px;
    z-index: 400;
}
.banner form .input5-form{
    position: absolute;
    top: 547.5px;
    left: 624px;
    z-index: 400;
}
input[value]{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0)
}


textarea{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0)
}

/*设置悬停在表单时的样式*/
textarea:hover{
    border-color: #07cbc9;
}

.banner form .div5-form input[value]:hover{
    background-color: #07cbc9;
    border: none;
}

input[value]:hover{
    border-color: #07cbc9;
}

怎样设置页眉区能在设置固定定位且width100%的情况下显示与banner区的img同宽1700px？怎么推导得到解决方法的？
陌陌青桑 2019-06-26
源自：前端油画商城案例   4-3 项目作业
0
收起

正在回答

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

4回答
好帮手慕小尤 回答被采纳获得+3积分 2019-07-07 09:20:11

同学你好，请问是想实现鼠标经过相应导航时，背景颜色变为黑色。如果是，那么已经实现了但对代码进行修改，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 /*设置段落格式*/
.header ul li a p{
    float: right;
    font-size: 15px;
    line-height: 100px;
    font-weight: bold;
    text-align: center;
}
  
.header ul li a{
    color: #FFFEFE;
    display: block;
    padding: 0 10px;
}

如果是想将顶部固定到上边栏，那么已经实现，可尝试将分辨率调高测试或完成其他模块测试。祝学习愉快！

0
收起回答
  • 陌陌青桑 提问者 #1
    不是实现这个效果。是需要让header区随页面的左右滑动而滑动。我现在已经做到无论页面怎么上下移动，header区始终在页面顶部。但banner区的背景图片太大，header并没有与图片同宽，在页面右移时，header只是保持在页面上方不动。
    2019-07-08 16:17:36
  • 陌陌青桑 提问者 #2
    我没有表述清楚，是我的不是。辛苦了，还望不吝赐教
    2019-07-08 16:18:30
  • 好帮手慕小尤 回复 提问者 陌陌青桑 #3
    同学你好，使用position: fixed;属性已经将header头固定到顶部，所以是不会随着左右滑动而滑动的。注：在作业中的【网页整体】要求每个区域宽度相对于浏览器100%显示。只要将banner区的宽度设置为100%，并将banner中的图片的宽度也设置100%，就不会出现图片过大的现象了。祝学习愉快!
    2019-07-08 16:50:55
好帮手慕小尤 2019-07-04 09:56:57

同学你好，请问同学是想将banner区设置为宽度为1700px;吗？如果是修改css，代码如下：

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
/*修改body与header中的样式*/
body{
    margin: 0px;
    padding: 0px;
    font-family: Microsoft YaHei UI;
}
 
/*设置顶部*/
.header{
    width: 100%;
    height: 100px;
    background-color: #07cbc9;
    position: fixed;
    top: 0px;
    z-index: 800;
}
 
.header .img-header{
    margin-top:20px;
    margin-left: 80px;
    float: left;
}
 
.header ul{
    width: 1400px;
    margin-right: 120px;
}
 
.header ul li{
    list-style: none;
    float: right;
    height: 100px;
    margin-top: -16px;
}
 
.header ul li a p{
    /*设置段落格式*/
    width: 78px;
    height: 100px;
    line-height: 100px;
    color: white;
    margin-top: 0px;
    text-align: center;
}
 
.header ul li a{
    /*去下划线*/
    text-decoration: none;
}
 
.header ul li a p:hover{
    background-color: black;
}
 
/*设置banner区  修改宽度*/
.banner{
    width: 1700px;
    margin: 0 auto;
    background-color: black;
}
/* 修改top距离 */
.img-banner{
    width: 100%;
    height: 800px;
    position: relative;
    top: 80px;
}
 
/* 修改遮罩层的宽度 */
.topLayer{
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
    position: absolute;
    top: 80px;
    width: 1700px;
    height: 800px;
}
.banner form .input1-form{
    position: absolute;
    z-index: 400;
    top: 212.5px;
    left: 624px;
}
 
.banner form .input2-form{
    position: absolute;
    z-index: 400;
    top: 272.5px;
    left: 624px;
}
.banner form .input3-form{
    position: absolute;
    top: 332.5px;
    left: 624px;
    z-index: 400;
}
.banner form .input4-form{
    position: absolute;
    top: 392.5px;
    left: 624px;
    z-index: 400;
}
.banner form .input5-form{
    position: absolute;
    top: 547.5px;
    left: 624px;
    z-index: 400;
}
input[value]{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0)
}
 
 
textarea{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0)
}
 
/*设置悬停在表单时的样式*/
textarea:hover{
    border-color: #07cbc9;
}
 
.banner form .div5-form input[value]:hover{
    background-color: #07cbc9;
    border: none;
}
 
input[value]:hover{
    border-color: #07cbc9;
}

祝学习愉快！

0
收起回答
  • 提问者 陌陌青桑 #1
    作业展示上的页眉区会随着页面的左右滑动而滑动。但我实现不了这个效果
    2019-07-05 19:52:39
提问者 陌陌青桑 2019-07-03 21:24:24

<!DOCTYPE html>
<meta charset="gbk"/>
<html>
<head>
    <title>Career Builder</title>
    <link rel="stylesheet" type="text/css" href="document.css">
    <script type="text/javascript" src="document.js"></script>
</head>
<body>
  <div class="header">
      <a href="#"><img src="image/logo.png" class="img-header"></a>
      <ul>
          <li>
              <a href="#"><p>CONTACT</p></a>
          </li>
          <li>
              <a href="#"><p>EVENTS</p></a>
          </li>
          <li>
              <a href="#"><p>FACULTY</p></a>
          </li>
          <li>
              <a href="#"><p>GALLERY</p></a>
          </li>
          <li>
              <a href="#"><p>ABOUT</p></a>
          </li>
          <li>
              <a href="#"><p>HOME</p></a>
          </li>
      </ul>
  </div>
  <div class="banner">
      <form action="#" method="post">
          <!doctype html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>Document</title>
          </head>
          <body>
             
          </body>
          </html>
          <!--图片-->
          <div class="pic">
            <img class="img-banner" src="image/banner3.jpg">
          </div>
          <!--遮罩层-->
          <div class="topLayer">
          <div class="input1-form">
            <input type="text" name="" value="your Name" style="width: 450px; height: 35px;">
          </div>
          <div class="input2-form">
            <input type="text" name="" value="your Phone" style="width: 450px; height: 35px;">
          </div>
          <div class="input3-form">
            <input type="text" name="" value="your Email" style="width: 450px; height: 35px;">
          </div>
          <div class="input4-form">
            <textarea rows="" cols="" value="" style="width: 448px;height: 130px">Write Your Comment Here</textarea>
          </div>
          <div class="input5-form">
            <input type="submit" name="" value="SEND MESSAGE" style="width: 125px; height: 40px;">
          </div>
      </form>
  </div>
  <div class="about">
      <div>
          <title></title>
          <p></p>
      </div>
      <div></div>
      <div></div>
  </div>
  <div class="gallery"></div>
  <div class="footer"></div>
</body>
</html>


/*修改body与header中的样式*/
body{
    /*width: 1700px;
    margin:0 0;*/
    margin: 0px;
    padding: 0px;
    font-family: Microsoft YaHei UI;
}

/*设置顶部*/
.header{
    width: 100%;
    height: 100px;
    background-color: #07cbc9;
    position: fixed;
    top: 0px;
    // right: 0;
    z-index: 800;
}

.header .img-header{
    margin-top:20px;
    margin-left: 80px;
    float: left;
}

.header ul{
    width: 1400px;
    margin-right: 120px;
}

.header ul li{
    list-style: none;
    float: right;
    height: 100px;
    margin-top: -16px;
}

.header ul li a p{
    /*设置段落格式*/
    width: 78px;
    height: 100px;
    line-height: 100px;
    color: white;
    margin-top: 0px;
    text-align: center;
}

.header ul li a{
    /*去下划线*/
    text-decoration: none;
}

.header ul li a p:hover{
    background-color: black;
}

/*设置banner区*/
.banner{
    width: 100%;
    background-color: black;
    position: absolute;
    z-index: 200;
}

/*设置背景图片和透明度*/
// .banner form{
//     // background: url(image/banner3.jpg) no-repeat;
//     // background-size: cover;
//     width: 100%;
//     height: 800px;
//     // opacity: 0.4;
// }

.img-banner{
    width: 100%;
    height: 800px;
    position: relative;
    // z-index: 300;
    top: 0px;
}

.topLayer{
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
    position: absolute;
    top: 80px;
    width: 100%;
    height: 800px;
}
.banner form .input1-form{
    position: absolute;
    z-index: 400;
    top: 212.5px;
    left: 624px;
}

.banner form .input2-form{
    position: absolute;
    z-index: 400;
    top: 272.5px;
    left: 624px;
}
.banner form .input3-form{
    position: absolute;
    top: 332.5px;
    left: 624px;
    z-index: 400;
}
.banner form .input4-form{
    position: absolute;
    top: 392.5px;
    left: 624px;
    z-index: 400;
}
.banner form .input5-form{
    position: absolute;
    top: 547.5px;
    left: 624px;
    z-index: 400;
}
input[value]{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0)
}


textarea{
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0)
}

/*设置悬停在表单时的样式*/
textarea:hover{
    border-color: #07cbc9;
}

.banner form .div5-form input[value]:hover{
    background-color: #07cbc9;
    border: none;
}

input[value]:hover{
    border-color: #07cbc9;
}



0
收起回答
好帮手慕小尤 2019-06-27 10:26:16

同学你好，在现基础的布局中，进行调试。代码如下：

1
2
3
4
5
6
7
<!-- 在<div class="banner">下  <form action=""> 上添加代码-->
<!-- 图片 -->
<div class="pic">
    <img class="img-banner" style="" src="image/banner3.jpg">
</div>
<!-- 遮罩层 -->
<div class="topLayer"> </div>
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
/* 修改 boby 与  header中的样式*/
body{
    /*width: 1700px;
    margin:0 0;*/
    margin: 0px;
    padding: 0px;
    font-family: Microsoft YaHei UI;
}
.header{
    width: 100%;
    height: 100px;
    background-color: #07cbc9;
    position: fixed;
    top: 0px;
    /*right: 0;*/
    z-index: 800;
}
/* 添加下面的代码，删除.banner form img 与.banner form */
.img-banner{
    width: 100%;
    height: 800px; 
    position: relative;
    top:0px;
}
.topLayer{
    background-color: #000;
    opacity: 0.4;
    z-index: 1;
    position: absolute;
    top: 80px;
    width: 100%;
    height: 800px;
}

祝学习愉快！

0
收起回答
  • 提问者 陌陌青桑 #1
    没有实现想要达到的效果
    2019-07-03 21:22:30
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

关于页脚的固定定位
10 0 3
请问为什么要设置固定定位?li不是已经这么设置了吗？
9 0 6
网页宽度是用100% 还是设置一个指定的宽度问题
23 0 6
整个窗口缩小到一定程度 导航栏的文字会移到下面 这点怎么解决
1 0 4
老师，我问下，我怕页面设置固定宽高之后再不同大小显示器上会出问题，该咋弄，是设置百分比宽高还是
17 0 4

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

PHP小白零基础入门
  • 参与学习           人
  • 提交作业       626    份
  • 解答问题       4928    个

想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。

了解课程

本课精华内容

问答 作业

max最大值,min最小值，请老师检查

18 1

不太理解，全局变量是什么意思？？

3 1

建表时默认值是中文时会报错

3 1

什么是API

8 1

单引号和双双引号

5 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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