css独立文件后样式失效，请老师指导

css独立文件后样式失效，请老师指导

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
        <!--头部-->
    <div class="header">
        <!--左边logo-->
        <div class="logo"><img src="logo.png"></div>
        <!--右边导航-->
        <div class="nav">
            <ul>
                <li> <a href="#">HOME</a> </li>
                <li> <a href="#">ABOUT</a></li>
                <li><a href="#">GALLERY</a></li>
                <li><a href="#">FACULTY</a></li>
                <li><a href="#">EVENTS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>
    <!--主体-->
    <div class="main">
        <!--banner图-->
        <div class="top">
            <img src="banner3.jpg">
        </div>
        <!--遮罩层-->
        <div class="topLayer"></div>
        <!--遮罩层上方文字-->
        <div class="topLayer-top">
            <div class="text"><input type="text" value="Your Name"></div>
            <div class="text"><input type="text" value="Your Phone"></div>
            <div class="text"><input type="text" value="Your Email"></div>
            <textarea >Write Your Comment Here</textarea>
            <button class="button">SEND MESSAGE</button>
        </div>
        <!--about-->
        <div class="about">
            <div class="title">ABOUT</div>
            <div class="ttext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
            <div class="left">
                <div class="leftTitle">A WORD ABOUT US</div>
            <div class="leftText">
                <div>Praesent dignissim viverra est,sed bibendum ligula congue non. Sed ac nislet felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</div>
                <button>EXPLORE</button>
            </div>
        </div>
            <div class="mimg"><img src="bb3.jpg"></div>
            <div class="right">
                <div class="block">
                    <div>70000</div>
                    <div>Student</div>
                </div>
                <div class="block">
                    <div>600</div>
                    <div>Faculty</div>
                </div>
            </div>
        </div>
        <!--about下展示区-->
    <div class="boxDisplay">
      <div class="box">
           <div class="img"><img src="b1.jpg" alt="aboutBottom-pic1"></div> 
        <div class="text">
            <div class="title">Conference Hall</div>
            <div class="content1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
            <button>EXPLORER</button>
        </div>
        </div>
         <div class="box"> 
        <div class="text">
            <div class="title">Library</div>
            <div class="content1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
            <button>EXPLORER</button>
        </div>
         <div class="img"><img src="b2.jpg" alt="aboutBottom-pic1"></div>
        </div>
         <div class="box">
           <div class="img"><img src="b3.jpg" alt="aboutBottom-pic1"></div> 
        <div class="text">
            <div class="title">Play Ground</div>
            <div class="content1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
            <button>EXPLORER</button>
        </div>
        </div>
         <div class="box"> 
        <div class="text">
            <div class="title">Computer Lab</div>
            <div class="content1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
            <div class="content2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
            <button>EXPLORER</button>
        </div>
          <div class="img"><img src="b4.jpg" alt="aboutBottom-pic1"></div>
        </div>
    </div>
    <!--Gallery区-->
    <div class="gallery">
        <div class="gtitle">GALLERY</div>
        <div class="gtext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
        <div class="box">
        <div class="gbox">
            <div class="img"><img src="03-01.jpg"></div>
            <div class="itext">&nbsp&nbspSCIENCE LAB</div>
        </div>
        <div class="gbox">
            <div class="img"><img src="03-02.jpg"></div>
            <div class="itext">&nbsp&nbspJNDOOR STADIUM</div>
        </div>
        <div class="gbox">
            <div class="img"><img src="03-03.jpg"></div>
            <div class="itext">&nbsp&nbspTRANSPORTION</div>
        </div>
        <div class="gbox">
            <div class="img"><img src="03-04.jpg"></div>
            <div class="itext">&nbsp&nbspKIDS ROOM</div>
        </div>
        <div class="gbox">
            <div class="img"><img src="03-05.jpg"></div>
            <div class="itext">&nbsp&nbspMEDITATION CLASSES</div>
        </div>
        <div class="gbox">
            <div class="img"><img src="03-06.jpg"></div>
            <div class="itext">&nbsp&nbspKIDS PLAY GROUND</div>
        </div>
    </div>
    </div>
    </div>
     <div class="footer">2019 imooc.com 京ICP备13046642号</div>
</body>
</html>

*{
            padding:0;
            margin:0;
        }

        .header{
            width: 100%;
            height: 100px;
            background-color: #07cbc9;
        }
        .header .logo{
            float: left;
            width: 200px;
            height: 75px;
            padding-left: 100px;
            padding-top: 13px;

        }
        .header .nav{
            float: right;
        }
        .header .nav ul{
            padding-right: 80px;
        }
        .header .nav ul li{
            float: left;
            list-style: none;
            width: 80px;
            height: 100px;
            line-height: 100px;
            color: #ffffff;
            font-family: "微软雅黑";
            font-size: 20px;
            font-weight: bolder;
            margin-left: 40px;
        }
        .header .nav ul li a{
            text-decoration: none;
            color: #ffffff;
        }
        .header .nav ul li a:hover{
            color: #ffffff;
        }
        .main{
            width: 100%;
            height: 2000px;
            overflow: hidden;
            zoom:1;
        }
        .main .top{
            width: 100%;
            height: 600px;
        }
        .main .top img{
            width: 100%;
            height: 600px;
        }
        .main .topLayer{
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            height: 600px;
            background-color: #000;
            opacity: 0.5;
        }
        .main .topLayer-top{
            width: 300px;
            height: 400px;
            position: absolute;
            top: 100px;
            right: 50%;
            top: 50%;
            z-index: 2;
            margin-top: -200px;
            margin-right: -150px;
            float: left;
            padding-left: 150px;
        }

        .main .topLayer-top .text{
            width:250px;
            height:50px;
            padding-bottom: 10px;
        }
        .main .topLayer-top input{
            width: 250px;
            height: 30px;
            background-color: transparent;
            color: #ffffff;
            font-family: 微软雅黑;

        }
        .main .topLayer-top textarea{
            width:250px;
            height:60px;
            padding-bottom: 10px;
            font-family: 微软雅黑;
            color: #ffffff;
            background-color: transparent;

        }
        .main .topLayer-top .button{
            margin-top: 20px;
            margin-left: 60px;
            width: 120px;
            height: 50px;
            font-family: 微软雅黑;
            background-color: transparent;
            color: #ffffff;
        }
        .main .about{
            height: 600px;
            width: 100%;
            overflow: hidden;
            zoom: 1;

        }
        .main .about .title{
            font-size: 30px;
            margin-left:900px;
            margin-top: 30px;
            margin-bottom: 10px;
            font-family: "微软雅黑";
            font-weight: bolder;
        }
        .main .about .ttext{
            width: 350px;
            font-size: 12px;
            font-family: "微软雅黑";
            margin-left: 800px;
            margin-bottom: 20px;
        }
        .main .about .left{
            float: left;
           width: 400px;
           height: 400px;
           margin-left: 250px;
           z-index: 1;

        }
        .main .about .left .leftText{
            position: absolute;
            background-color: #fffff;
            opacity: 0.5;
            margin: 20px;
           border: 1px solid gray;
           font-family: "微软雅黑";
           font-size: 20px;
           width: 400px;
           height: 250px;
           margin-top: 20px;
           margin-left: 120px;
           padding: 10px;
           z-index: 1;
        }
        .main .about .left .leftTitle{
            width: 200px;
            margin-left: 220px;
           font-family: "微软雅黑";
          font-size: 30px;
        }
        .main .about .mimg{
            float: left;
            width: 600px;
            height: 400px;
            z-index: -1;

        }
        .main .about img{
            float: left;
            width: 600px;
            height: 400px;
            

        }
        .main .about button{
            width: 120px;
            height: 60px;
            background-color: #000;
            font-size: 20px;
            margin-top: 20px;
            margin-left: 120px;
            color: #ffffff;
        }
        .main .about .right{
            float: left;
            width: 400px;
            height: 300px;
        }
        .main .about .right .block{
            width: 200px;
            height: 140px;
            padding: 10px;
            font-size: 40px;
            font-family: "微软雅黑";
            color: #000;
            text-align: center;
            border: 2px solid  #07cbc9;
            margin-left: 10px;
            margin-bottom: 20px;
            

        }

        .boxDisplay{
    width: 1200px;
    height: 600px;
    position: absolute;
    top: 2300px;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden;
    zoom: 1;
    /*border: 1px solid #5d5d5d;*/
}
.boxDisplay .box{
    width: 300px;
    height: 600px;
    float: left;
}
.boxDisplay .box .img{
    width:300px;
    height: 300px;
}
.boxDisplay .box img{
    width:300px;
    height: 300px;
}
.boxDisplay .box .text{
    width:300px;
    height: 300px;
    background-color: #07cbc9;
}
.boxDisplay .box .text .title{
    padding: 20px;
    font-size: 20px;
    color: #ffffff;
    font-family: "微软雅黑";
    font-weight: bolder;
   
}
.boxDisplay .box .text .content1{
    padding:10px 10px; 
     font-family: "微软雅黑";
    font-size: 16px;
    color: #ffffff;
  
}
.boxDisplay .box .text .content2{
    padding:10px 10px; 
     font-family: "微软雅黑";
    font-size: 12px;
    color: rgb(220,220,220);
}
.boxDisplay .box .text button{
    display: block;
    width: 100px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
    margin-left:100px;
    margin-top: 20px;
}
.main .gallery{
    position: absolute;
    top: 1950px;
    height: 800px;
    width: 100%;
}
.main .gallery .gtitle{
    font-size: 30px;
    margin-left:900px;
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: "微软雅黑";
    font-weight: bolder;

}
.main .gallery .gtext{
    width: 350px;
    font-size: 12px;
    font-family: "微软雅黑";
    margin-left: 800px;
    margin-bottom: 20px;

}
.main .gallery .box{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 600px;
    width: 1200px;
}
.main .gallery .box .gbox{
    float: left;
    width: 400px;
    height: 300px;

}
.main .gallery .box .gbox img{
    width: 380px;
    height: 250px;
}
.main .gallery .box .gbox .itext{
    width: 380px;
    height: 30px;
    color: #ffffff;
    background-color: #000;
    font-family: "微软雅黑";
    font-size: 20px;
    margin-top: -5px;
    margin-bottom: 10px;
    padding-top:10px;
}
.footer{
    position: absolute;
    top: 2800px;
    width: 100%;
    height: 100px;
    background-color: #07cbc9;
    text-align: center;
    color: #ffffff;\
    font-family: "微软雅黑";
}
qq_cookies_oqrHNO 2019-03-10
源自：网页布局案例   2-9 作业题
2
收起

正在回答 回答被采纳积分+1

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

1回答
好帮手慕阿满 2019-03-11 14:50:10

同学你好，试了同学的代码，css样式可以使用。同学说的css样式失效应该是css引入路径问题，问一下同学html和css文件是在同一个目录下吗？css文件名有写对吗？建议同学去检查一下，如果不是，修改一下css样式引入的路径。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

0
收起回答
  • 提问者 qq_cookies_oqrHNO #1
    好的，谢谢老师，还想请问about下的绿色短线怎么实现，尝试了用div块设置宽度和高度发现没变化，请老师指教或给出短线部分范例代码
    2019-03-11 14:56:39
  • 好帮手慕阿满 回复 提问者 qq_cookies_oqrHNO #2
    参考一下这个问答https://class.imooc.com/course/qadetail/93720，祝：学习愉快~
    2019-03-11 18:03:31
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

链入外部样式和导入外部样式
1 3 5
关于引用 导入的css文件
51 0 3
css样式失效
61 0 19
2-13编程练习 css为何以文件夹形式显示，怎么写代码？
0 0 16
登录之后Servlet转发到bookList.jap页面之后，css格式失效
15 0 3

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

从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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