怎样设置页眉区能在设置固定定位且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

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

 /*设置段落格式*/
.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，代码如下：

/*修改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

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

<!-- 在<div class="banner">下  <form action=""> 上添加代码-->
<!-- 图片 -->
<div class="pic">
    <img class="img-banner" style="" src="image/banner3.jpg">
</div>
<!-- 遮罩层 -->
<div class="topLayer"> </div>
/* 修改 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
老师，我问下，我怕页面设置固定宽高之后再不同大小显示器上会出问题，该咋弄，是设置百分比宽高还是
17 0 4
整个窗口缩小到一定程度 导航栏的文字会移到下面 这点怎么解决
1 0 4

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

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

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

了解课程

本课精华内容

问答 作业

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

18 1

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

3 1

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

3 1

什么是API

8 1

单引号和双双引号

5 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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