老师，请帮我看一下
来源：2-10 作业题
拍拍你的头
2019-07-03 23:30:41
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拍拍你的头的作业</title> <link rel="stylesheet" href="C:\Users\光\Desktop\work\css\index.css"> </head> <body> <!-- 顶部 --> <header> <div class="header"> <div class="logo"><a href=""><img src="C:\Users\光\Desktop\work\images\logo.png"></a></div> <div class="nav"> <ul> <a href=""> <li>HOME</li> </a> <a href=""> <li>ABOUT</li> </a> <a href=""> <li>GALLERY</li> </a> <a href=""> <li>FACULTY</li> </a> <a href=""> <li>EVENTS</li> </a> <a href=""> <li>CONTACT</li> </a> </ul> </div> </div> </header> <!-- banner --> <div class="banner"> <img src="C:\Users\光\Desktop\work\images\banner3.jpg"> </div> <!-- 遮罩层 --> <div class="topLayer"> </div> <div class="topLayer-top"> <form action=""> <table> <tr> <td><input type="text" placeholder="your Name"></td> </tr> <tr> <td><input type="text" placeholder="your Phone"></td> </tr> <tr> <td><input type="text" placeholder="your Email"></td> </tr> <tr> <td><textarea name="" id="" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea></td> </tr> </table> <button>SEND MESSAGE</button> </form> </div> <!-- ABOUT区 --> <div class="about"> <div class="top"> <div class="aboutTitle"> ABOUT </div> <div class="line"> <hr color="#07cbc9" /> </div> <div class="des1"> Lorem Ipsum is simply dummy text of the printing and typesetting<br />industry.Lorem Ipsum has been the industry's standard dummy<br />text ever since the 1500s. </div> </div> <div class="middle clearfix"> <div class="left"> <div class="middleTitle">A WORD<br>ABOUT US</div> <div class="box1"> <div class="des2">Praesent dignissim viverra est,sed<br>bibendum ligula congue non.Sed ac nis<br>let felis gravida commodo?Suspendisse<br>eget ullamcorper ipsum.Suspendisse<br>diam amet.</div> <button>EXPLORE</button> </div> </div> <div class="middlePic"> <img src="C:\Users\光\Desktop\work\images\bb3.jpg"> </div> <div class="right"> <div class="box2"> <div class="box2son"> <div class="number">70000</div> <div class="line2"> <hr color="#07cbc9" /> </div> <div class="word">Students</div> </div> </div> <div class="box3"> <div class="box3son"> <div class="number">600</div> <div class="line3"> <hr color="#07cbc9" /> </div> <div class="word">Faculty</div> </div> </div> </div> </div> <div class="aboutFooter"> <div class="img"> <img src="C:\Users\光\Desktop\work\images\b1.jpg"> </div> <div class="text"> <div class="triAngle"></div> <div class="textTitle">Library</div> <div class="word1">lorem Ipsum is simply dummytext of the<br>printing and typesetting industry</div> <div class="word2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div> <button>EXPLORE</button> </div> <div class="img"> <img src="C:\Users\光\Desktop\work\images\b2.jpg"> </div> <div class="text"> <div class="triAngle"></div> <div class="textTitle">Computer Lab</div> <div class="word1">lorem Ipsum is simply dummytext of the<br>printing and typesetting industry</div> <div class="word2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div> <button>EXPLORE</button> </div> <div class="text"> <div class="triAngle2"></div> <div class="textTitle">Conference Hall</div> <div class="word1">lorem Ipsum is simply dummytext of the<br>printing and typesetting industry</div> <div class="word2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div> <button>EXPLORE</button> </div> <div class="img"> <img src="C:\Users\光\Desktop\work\images\b3.jpg"> </div> <div class="text"> <div class="triAngle2"></div> <div class="textTitle">Play Ground</div> <div class="word1">lorem Ipsum is simply dummytext of the<br>printing and typesetting industry</div> <div class="word2">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a galley of type and scrambled it to make a type<br>specimen book.</div> <button>EXPLORE</button> </div> <div class="img"> <img src="C:\Users\光\Desktop\work\images\b4.jpg"> </div> <div class="clear"></div> </div> </div> <!-- GALLERY区 --> <div class="gallery"> <div class="galleryTitle"> <div class="aboutTitle"> GALLERY </div> <div class="line"> <hr color="#07cbc9" /> </div> <div class="des1"> Lorem Ipsum is simply dummy text of the printing and typesetting<br />industry.Lorem Ipsum has been the industry's standard dummy<br />text ever since the 1500s. </div> </div> <div class="galleryPic"> <div class="galPic1"> <img src="C:\Users\光\Desktop\work\images\03-01.jpg"> <div class="comment"></div> </div> <div class="galPic2"> <img src="C:\Users\光\Desktop\work\images\03-02.jpg"> <div class="comment"></div> </div> <div class="galPic3"> <img src="C:\Users\光\Desktop\work\images\03-03.jpg"> <div class="comment"></div> </div> <div class="galPic4"> <img src="C:\Users\光\Desktop\work\images\03-04.jpg"> <div class="comment"></div> </div> <div class="galPic5"> <img src="C:\Users\光\Desktop\work\images\03-05.jpg"> <div class="comment"></div> </div> <div class="galPic6"> <img src="C:\Users\光\Desktop\work\images\03-06.jpg"> <div class="comment"></div> </div> <div class="clear"></div> </div> </div> <!-- 页脚区 --> </body> </html>
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
height: 80px;
background: #07cbc9;
}
.logo {
float: left;
padding-top: 16px;
padding-left: 60px;
}
.header .nav {
float: right;
}
.header .nav ul {
padding-right: 60px;
}
.header .nav ul a {
float: left;
list-style: none;
padding-right: 20px;
height: 80px;
line-height: 80px;
text-decoration: none;
font-family: "Microsoft YaHei UI";
font-weight: bolder;
color: #ffffff;
}
.header .nav ul a:hover {
color:#000;
}
.banner {
width: 100%;
height: 800px;
}
.banner img {
width: 100%;
height: 800px;
}
.topLayer {
width: 100%;
height: 800px;
position: absolute;
background: #000;
top: 80px;
left: 0px;
opacity: 0.5;
}
.topLayer-top {
width: 600px;
height: 300px;
position: absolute;
top: 330px;
right: 50%;
margin-right: -300px;
z-index: 2;
}
.topLayer-top input {
width: 505px;
height: 39px;
border: 2px solid #7D7D7D;
color: #7D7D7D;
margin-left: 45.5px;
background-color: rgb(0,0,0,0);
}
.topLayer-top textarea {
width: 505px;
height: 115px;
margin-left: 45.5px;
border: 2px solid #7D7D7D;
background-color: rgb(0,0,0,0);
}
.topLayer-top button {
width: 123px;
height: 43px;
border: 2px solid #7D7D7D;
color: #7D7D7D;
margin-left: 236.5px;
background-color: rgb(0,0,0,0);
}
.topLayer-top input:hover{
border: 2px solid #07cbc9;
}
.topLayer-top textarea:hover{
border: 2px solid #07cbc9;
}
.topLayer-top button:hover{
border: none;
background-color: #07cbc9;
}
.top{
width: 100%;
}
.top .aboutTitle{
text-align: center;
font-size: 50px;
font-weight: bolder;
font-family: "Microsoft YaHei UI";
padding-top: 50px;
}
.top .line{
padding-top: 10px;
}
.top .line hr{
width: 30px;
margin: 0 auto;
}
.top .des1{
text-align: center;
padding-top: 10px;
color: #7D7D7D;
font-size: 20px;
}
.middle{
width: 100%;
margin: 30px auto 0px auto;
height: 380px;
}
.middle .left{
width: 370px;
margin-left: 250px;
position:absolute;
z-index: 3;
}
/*.clearfix:after{
content: ".";
height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix{
zoom: 1;
}*/
.middle .left,.middlePic,.right{
/*float: left;*/
}
.middle .left .middleTitle{
width: 130px;
text-align: center;
font-size: 25px;
}
.middle .left .box1{
width: 370px;
height: 246px;
border: 1px solid #7D7D7D;
margin-top: 10px;
background-color: rgb(255,255,255,0.5);
}
.middle .left .box1 .des2{
margin-left: 18px;
margin-top: 25px;
}
.middle .left .box1 button{
width: 102px;
height: 45px;
background-color: #000;
border: none;
color: #FFFFFF;
font-size: 16px;
margin-top: 20px;
margin-left: 18px;
}
.middle .left .box1 button:hover{
background-color: rgb(0,0,0,0);
border: 1px solid #000;
color: #000;
}
.middle .middlePic{
width: 568px;
height: 380px;
position: absolute;
left: 50%;
margin-left: -284px;
}
.middle .middlePic img{
width: 568px;
height: 380px;
}
.middle .right{
width: 238px;
position: absolute;
right: 200px;
}
.middle .right .number{
font-size: 25px;
font-weight: bolder;
text-align: center;
}
.middle .right .line2,.line3{
width: 40px;
margin: 15px auto;
}
.middle .right .word{
font-size: 15px;
text-align: center;
}
.middle .right .box2{
width: 238px;
height: 144px;
position: absolute;
border: 1px solid #07cbc9;
}
.middle .right .box2 .box2son{
position: absolute;
width: 120px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -50px;
}
.middle .right .box3{
position: absolute;
width: 238px;
height: 144px;
top: 170px;
border: 1px solid #07cbc9;
}
.middle .right .box3 .box3son{
position: absolute;
width: 120px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -60px;
margin-top: -50px;
}
.about .aboutFooter{
width: 100%;
background-color: red;
margin-top: 100px;
}
.about .aboutFooter .img,.text{
width: 25%;
height: 396px;
min-height: 300px;
}
.about .aboutFooter img{
width:100%;
height: 396px;
min-height: 300px;
}
.about .aboutFooter .img,.text{
float: left;
}
.about .aboutFooter .text{
background-color:#07cbc9;
color: #FFFFFF;
position: relative;
}
.about .aboutFooter .text .textTitle{
padding:30px 0px 0px 30px;
font-size: 30px;
}
.about .aboutFooter .text .word1{
padding: 30px 0px 0px 30px;
font-size: 15px;
}
.about .aboutFooter .text .word2{
padding: 30px 0px 0px 30px;
font-size: 12px;
color:#7D7D7D;
}
.about .aboutFooter .text button{
border: none;
background-color: black;
color: #FFFFFF;
width: 102px;
height: 45px;
margin: 50px 138.9px;
}
.about .aboutFooter .text button:hover{
background-color: rgb(0,0,0,0);
border: 1px solid #000;
color: #000;
}
.about .aboutFooter .text .triAngle{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px;
border-color:transparent #07cbc9 transparent transparent;
position: absolute;
top: 198px;
margin-top: -20px;
margin-left: -40px;
}
.about .aboutFooter .text .triAngle2{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px;
border-color: transparent transparent transparent #07cbc9;
position: absolute;
right: 0px;
margin-right: -40px;
top: 198px;
margin-top: -20px;
}
.about .aboutFooter .clear{
clear: both;
}
.gallery{
width: 100%;
}
.gallery .galleryTitle .aboutTitle{
text-align: center;
font-size: 50px;
font-weight: bolder;
font-family: "Microsoft YaHei UI";
padding-top: 50px;
}
.gallery .galleryTitle .line{
padding-top: 10px;
}
.gallery .galleryTitle .line hr{
width: 30px;
margin: 0 auto;
}
.gallery .galleryTitle .des1{
text-align: center;
padding-top: 10px;
color: #7D7D7D;
font-size: 20px;
}
.gallery .galleryPic{
width: 1200px;
background-color: red;
margin: 0 auto;
}
.gallery .galleryPic .galPic1,.galPic2,.galPic3,.galPic4,.galPic5,.galPic6{
width: 360px;
height: 304px;
}
.gallery .galleryPic .galPic1,.galPic2,.galPic3,.galPic4,.galPic5,.galPic6 img{
width: 360px;
height: 240px;
}
.gallery .galleryPic .clear{
clear: both;
}
.gallery .galleryPic .galPic1 .comment{
width: 360px;
height: 64px;
color: #FFFFFF;
background-color: #000;
}我这个gallery区域，明明将容器galPic1.。。。。都设置了高度为304px，为什么审查元素一直看是240px呢？
写回答
1回答
-
好帮手慕夭夭
2019-07-04
你好同学，因为d代码中重新设置了盒子的高度，所以之前的被覆盖了，如下
同学的本意应该是给图片设置高度240px，但是选择器不对，如下选择器使用逗号隔开，每一个都是独立的选择器，所以应该每一个选择器都指定选择img元素：
另外，img作为行内元素有一个默认的间隙，这是行内元素的一个特殊现象，特殊记着哦。
解决方式是设置成块元素，即display: block;就行。
建议同学在引入图片的时候不要使用绝对路径，在实际开发中，一般都使用相对路径。使用绝对路径的话，假如在其他电脑上显示，图片没有放在你指定的c盘，就引入不了哦
把图片放在自己作业文件夹中，如下引入
祝学习愉快，望采纳。
0
相似问题