8张图中添加小三角的定位问题

8张图中添加小三角的定位问题

定位后会随网页缩放改变位置,目前搞不太懂定位问题

相关代码:

相关截图:

spacer.gif

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body onload="move()">
<div class="header">
<div class="header-logo">
<a href="#"><img src="img/logo.png"></a>
</div>
<div class="header-list">
<ul>
<li><a href="#" name="header_a">HOME</a></li>
<li><a href="#" name="header_a">ABOUT</a></li>
<li><a href="#" name="header_a">GALLERY</a></li>
<li><a href="#" name="header_a">FACULTY</a></li>
<li><a href="#" name="header_a">EVENTS</a></li>
<li><a href="#" name="header_a">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="banner-img">
<img src="img/banner3.jpg">
</div>
<div class="banner-form">
<form>
<input type="text" name="banner_text" value="your Name" class="banner-text1" onmouseover="huaguo()"><br>
<input type="text" name="banner_text" value="your Phone" class="banner-text1" onmouseover="huaguo()"><br>
<input type="text" name="banner_text" value="your Email" class="banner-text1" onmouseover="huaguo()"><br>
<input type="text" name="banner_text" value="Write Your Comment Here" class="banner-text2" onmouseover="huaguo()"><br>
<input type="button" name="banner_btn" value="SEND MESSAGE" class="banner-btn">
</form>
</div>
</div>
<div class="about">
<div class="about-header">
<div class="about-header-title">
<h1>ABOUT</h1>
</div>
<div class="about-header-line"></div>
<div class="about-header-font">
<p>Lorem ipsurm is simply dummy text of the printint and typeseting
industry lorem ipsurn has been ths industry standard dummy
text ever since the 1500s.</p>
</div>
</div>
<div class="about-banner">
<div class="about-banner-left">
<div class="about-banner-left-title">
<p>A WORD ABOUT US</p>
</div>
<div class="about-banner-left-form">
<div class="about-banner-left-form-font">
<p>Praesent dignissim viverra eat,sed bibendum ligula congue non. Sed ac nisel leils gravida communode? Suspendise eget ullamcorper ipsum. Suspendisse diam amet.</p>
</div>
<div class="">
<input type="button" class="about-banner-left-form-btn" name="about-btn" value="EXPLORE">
</div>
</div>
</div>
<div class="about-banner-center">
<img src="img/bb3.jpg">
</div>
<div class="about-banner-right">
<div class="about-banner-right-first">
<div class="about-banner-right-first-top">70000</div>
<div class="about-banner-right-first-center"></div>
<div class="about-banner-right-first-bottom">Students</div>
</div>
<div class="about-banner-right-second">
<div class="about-banner-right-second-top">600</div>
<div class="about-banner-right-second-center"></div>
<div class="about-banner-right-second-bottom">Faculty</div>
</div>
</div>
</div>
<div class="about-footer">
<div class="about-footer-img">
<img src="img/b1.jpg">
</div>
<div class="arrow1"></div>
<div class="about-footer-div">
<div class="about-footer-div-d1">
Library
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>
<div class="about-footer-img">
<img src="img/b2.jpg">
</div>
<div class="about-footer-div">
<div class="about-footer-div-d1">
Computer Lab
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>
<div class="about-footer-div">
<div class="about-footer-div-d1">
Conference Hall
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>
<div class="about-footer-img">
<img src="img/b3.jpg">
</div>
<div class="about-footer-div">
<div class="about-footer-div-d1">
Play Ground
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>
<div class="about-footer-img">
<img src="img/b4.jpg">
</div>
</div>
</div>
<div class="gallery">

</div>
<div class="footer"></div>
</body>
</html>



*{
padding: 0px;
margin: 0px;
font-family: Microsoft YaHei UI;

}

a{
text-decoration: none;
}

.header{
width: 100%;
margin: 0 auto;
background-color: #07cbc9;
overflow: hidden;
}

.header .header-logo{
margin-left: 50px;
float: left;
}

.header .header-list{
float: right;
}

.header .header-list ul{
list-style: none;
margin-right: 30px;
}

.header .header-list ul li{
float: left;
margin-right: 20px;
margin-top: 17px;
}

.header .header-list ul li a{
color: #fff;
}

/*.header .header-list ul li a:hover{
background-color: #000;
}
*/
.banner{
width: 100%;
height: 610px;
margin: 0 auto;
overflow: hidden;
/* background-image: url(../img/banner3.jpg);
background-size: cover;*/
}

.banner .banner-img{
z-index: -1;
position: absolute;
}

.banner .banner-img img{
width:100%;
height: 613px;
}

.banner .banner-form{
width: 100%;
height: 613px;
background-color: #000;
opacity: 0.4;
z-index: 1;
position: absolute;
box-sizing: border-box;
padding-top: 100px;
}

.banner .banner-form input{
border: 1px solid #fff;
background-color:transparent;
margin-top: 40px;
color: #fff;
box-sizing: border-box;
}

.banner .banner-form .banner-text1{
width: 30%;
height: 30px;
margin-left: 35%;
padding-left: 10px;
}

.banner .banner-form .banner-text2{
width: 30%;
height: 100px;
margin-left: 35%;
padding-left: 10px;
}

.banner .banner-form .banner-btn{
width: 10%;
height: 30px;
margin-left: 45%;
}

.about{
width: 100%;
margin: 0;
padding: 0;
}

.about .about-header .about-header-title h1{
margin: 0 auto;
margin-top: 30px;
width: 120px;
}

.about .about-header .about-header-line{
width: 40px;
background-color:#07cbc9;
display:block;
height: 2px;
margin:15px auto;
}

.about .about-header .about-header-font{
width: 100%;
}

.about .about-header .about-header-font p{
text-align: center;
width: 400px;
margin: 15px auto;
color: #A2A2A2;
font-size: 10px;
}

.about .about-banner{
width: 61%;
margin: 0 auto;
overflow: hidden;
}

.about .about-banner .about-banner-left{
float: left;
}

.about-banner-left-title p{
font-size: 20px;
text-align: center;
width: 150px;
}

.about-banner-left-form{
border: 1px solid #A2A2A2;
background-color: #fff;
opacity: 0.8;
overflow: hidden;
width: 230px;
height: 150px;
padding: 20px 10px;
box-sizing: border-box;
margin-top: 20px;
margin-left: 20px;
}

.about-banner-left-form-font p{
width: 200px;
color: #000;
font-size: 10px;
position: relative;
}

.about-banner-left-form-btn{
margin-top: 10px;
background-color: #000;
color: #fff;
width: 70px;
height: 30px;
border: none;
}

.about .about-banner .about-banner-center{
float: left;
margin-left: -80px;
}

.about .about-banner .about-banner-center img{
width: 400px;
}

.about .about-banner .about-banner-right{
float: left;
}

.about-banner-right-first{
border: 1px solid #07cbc9;
width: 150px;
height: 100px;
text-align: center;
margin-left: 30px;
}

.about-banner-right-first-top{
font-size: 20px;
margin-top: 10px;
}

.about-banner-right-first-center{
width: 40px;
background-color:#07cbc9;
display:block;
height: 2px;
margin:15px auto;
}

.about-banner-right-first-bottom{
font-size: 10px;
}

.about-banner-right-second{
border: 1px solid #07cbc9;
width: 150px;
height: 100px;
text-align: center;
margin-left: 30px;
margin-top: 30px;
}

.about-banner-right-second-top{
font-size: 20px;
margin-top: 10px;
}

.about-banner-right-second-center{
width: 40px;
background-color:#07cbc9;
display:block;
height: 2px;
margin:15px auto;
}

.about-banner-right-second-bottom{
font-size: 10px;
}

.about .about-footer{
width: 100%;
margin: 0 auto;
margin-top: 50px;
}

.about .about-footer .about-footer-img{
width: 25%;
height: 300px;
float: left;
}

.about .about-footer .about-footer-img img{
width: 100%;
height: 100%;
}

.about .about-footer .about-footer-div{
width: 25%;
height: 300px;
float: left;
background-color: #07cbc9;
padding: 40px;
box-sizing: border-box;
}

.about-footer-div-d1{
color: #fff;
font-size: 20px;
}

.about-footer-div-d2{
color: #fff;
font-size: 15px;
margin-top: 10px;
}

.about-footer-div-d3{
color: #fff;
font-size: 10px;
margin-top: 10px;
}

.about-footer-div-d4{
width: 70px;
margin: 0 auto;
margin-top: 30px;
}

.about-footer-div-d4-btn{
width: 70px;
height: 30px;
margin-top: 10px;
background-color: #000;
color: #fff;
border: none;
text-align: center;
line-height: 30px;
}

.arrow1{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: transparent #07cbc9 transparent transparent;
position: relative;
left: 270.2px;
top: 1270px
}


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

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

1回答
好帮手慕燕燕 2021-01-16 12:05:49

同学,你好!老师这边运行了同学的代码,有以下问题

1、为顶部的logo图片添加样式,设置左浮动

.header .header-logo img{
    margin-left: 150px;
    float: left;
    margin-top: 15px;
}

2、banner-img宽度设置为100%,否则图片右侧有空白

.banner .banner-img{
z-index: -1;
position: absolute;
width: 100%;
}

3、同学的代码about区域和下面的8张图放在一个div中,about区域的head和banner要放到一个div中,外层加一个div即可,然后单独设置宽度样式,可设置固定宽度,页面缩放位置不会变化

<div class="about">
<div class="about-h">
<div class="about-header">
<div class="about-header-title">
<h1>ABOUT</h1>
</div>
<div class="about-header-line"></div>
<div class="about-header-font">
<p>Lorem ipsurm is simply dummy text of the printint and typeseting
industry lorem ipsurn has been ths industry standard dummy
text ever since the 1500s.</p>
</div>
</div>


<div class="about-banner">
<div class="about-banner-left">
<div class="about-banner-left-title">
<p>A WORD ABOUT US</p>
</div>
<div class="about-banner-left-form">
<div class="about-banner-left-form-font">
<p>Praesent dignissim viverra eat,sed bibendum ligula congue non. Sed ac nisel leils gravida communode? Suspendise eget ullamcorper ipsum. Suspendisse diam amet.</p>
</div>
<div class="">
<input type="button" class="about-banner-left-form-btn" name="about-btn" value="EXPLORE">
</div>
</div>
</div>
<div class="about-banner-center">
<img src="img/bb3.jpg">
</div>
<div class="about-banner-right">
<div class="about-banner-right-first">
<div class="about-banner-right-first-top">70000</div>
<div class="about-banner-right-first-center"></div>
<div class="about-banner-right-first-bottom">Students</div>
</div>
<div class="about-banner-right-second">
<div class="about-banner-right-second-top">600</div>
<div class="about-banner-right-second-center"></div>
<div class="about-banner-right-second-bottom">Faculty</div>
</div>
</div>
</div>
</div>

<div class="about-footer">
<div class="about-footer-img">
<img src="img/b1.jpg">
</div>

<div class="arrow1"></div>

<div class="about-footer-div">
<div class="about-footer-div-d1">
Library
</div>

<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>

<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book
</div>

<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>

</div>
<div class="about-footer-img">
<img src="img/b2.jpg">
</div>
<div class="about-footer-div">
<div class="about-footer-div-d1">
Computer Lab
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>

<div class="about-footer-div">
<div class="about-footer-div-d1">
Conference Hall
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>
<div class="about-footer-img">
<img src="img/b3.jpg">
</div>
<div class="about-footer-div">
<div class="about-footer-div-d1">
Play Ground
</div>
<div class="about-footer-div-d2">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="about-footer-div-d3">
Lorm Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkonwn printer took a galley of type and scrambled it to make a type specimen book
</div>
<div class="about-footer-div-d4">
<input type="button" name="about-btn" class="about-footer-div-d4-btn" value="EXPLORE">
</div>
</div>
<div class="about-footer-img">
<img src="img/b4.jpg">
</div>
</div>
</div>

css样式设置如下:

.about-h {
width: 61%;
padding-top: 50px;
background-color: white;
margin: 0 auto;
position: relative;
}
​.about .about-banner{
// width: 61%;
width: 1080px;
margin: 0 auto;
overflow: hidden;
}

4、arrow1样式设置使8张图片中的第一张图片位置不正确,可将其注释掉

/*
.arrow1{
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: transparent #07cbc9 transparent transparent;
position: relative;
left: 270.2px;
top: 1270px
}
*/

祝学习愉快~

  • 提问者 WEIQ1 #1

    谢谢老师解答,

    在第3个问题中,给about-h区设置宽度,再为about-banner区设置宽度,因为内部三个div宽度是固定的还是会导致偏移

    第4个问题,我想要添加图片上的三角,但是无法正确的定位到它该到的位置,注释掉固然解决了偏移问题,但是还是无法正确添加三角区域

    所以不知道在提交作业后老师能否提供源码以查漏补缺。

    2021-01-16 14:02:58
  • 好帮手慕燕燕 回复 提问者 WEIQ1 #2

    同学,你好!提交作业后,老师会运行同学提交的完整代码,所有的问题都会给出建议及解决方法,同学说的三角区域指的是about区域吗,可参考以下代码:

       <!-- ABOUT部分  -->
    <div id="about" style="witdh:100%">
    <div class="about">
    <div class="abouttop">
    <h3>ABOUT</h3>
    <label class="line"></label>
    <p class="p">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. </p>
    <div class="aboutleft">
    <h4>A WORD ABOUT US</h4>
    </div>
    <div class="img">
    <img height="100%" src="images/bb3.jpg">
    </div>
    <div class="aboutright">
    <div class="aboutrighttop">
    <h5>70000</h5>
    <label class="line"></label>
    <p>Students</p>
    </div>
    <div class="aboutrighttop">
    <h5>600</h5>
    <label class="line"></label>
    <p>Faculty</p>
    </div>
    </div>
    <div class="aboutmiddle">
    <div class="aboutleftbottom">
    <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</p>
    <a href="#" data-toggle="modal" data-target="#myModal">EXPLORE</a>
    </div>
    </div>
    </div>
    </div>


    <div class="big" style="margin-top:100px;" >
    <div class="aboutimg arrow">
    <img src="images/b1.jpg">
    </div>
    <div class="abouttext">
    <h4>Library</h4>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h5>
    <p> 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 make a type specimen book. </p>
    <a href="#" data-toggle="modal" data-target="#myModal1">EXPLORE</a>
    </div>
    <div class="aboutimg arrow">
    <img src="images/b2.jpg">
    </div>
    <div class="abouttext">
    <h4>Computer Lab</h4>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h5>
    <p> 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 make a type specimen book. </p>
    <a href="#" data-toggle="modal" data-target="#myModal2">EXPLORE</a>
    </div>


    <div class="abouttext">
    <h4>Conference Hall</h4>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h5>
    <p> 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 make a type specimen book. </p>
    <a href="#" data-toggle="modal" data-target="#myModal3">EXPLORE</a>
    </div>
    <div class="aboutimg arrow2">
    <img src="images/b3.jpg">
    </div>
    <div class="abouttext">
    <h4>Play Ground</h4>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h5>
    <p> 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 make a type specimen book. </p>
    <a href="#" data-toggle="modal" data-target="#myModal4">EXPLORE</a>
    </div>
    <div class="aboutimg arrow2">
    <img src="images/b4.jpg">
    </div>


    </div>
    </div>
    /*-- About Section --*/
    .about{
    width: 1080px;
    padding-top:50px;
    background-color:white;
    margin:0 auto;
    position:relative;
    overflow: hidden;
    }
    h3{
    color: #000;
    font-size: 50px;
    text-align:center;
    }
    label.line{
    background-color:#07cbc9;
    display:block;
    width: 40px;
    height: 2px;
    margin:15px auto;
    }
    h4{
    font-size:35px;
    font-weight:normal;
    }
    h6{
    color: #BDBDBC;
    padding-bottom: 30px;
    width: 45%;
    margin: 0 auto;
    font-size: 15px;
    line-height: 25px;
    text-align:center;
    }
    .p{
    color: #797979;
    padding-bottom: 30px;
    width: 45%;
    margin: 0 auto;
    font-size: 15px;
    line-height: 25px;
    text-align:center;
    }
    .aboutleft{
    width:200px;
    float: left;
    text-align: center;
    }
    .img{
    float: left;
    margin: 0 35px;
    height: 380px;
    }

    .aboutright{
    font-size:40px;
    color:black;
    width: 240px;
    float: left;
    text-align: center;
    }
    .aboutright p{
    font-size:20px;
    text-align: center;
    }
    .aboutrighttop{
    border:1px solid #07cbc9;
    padding:20px 60px;
    margin-bottom: 30px;
    }
    .aboutleftbottom {
    border: 1px solid #C5C5C5;
    padding: 25px 25px;
    text-align: left;
    position: absolute;
    width: 320px;
    top: 350px;
    color: black;
    background-color: rgba(255, 255, 255, 0.4);
    }
    .aboutleftbottom p{
    margin-bottom:10px;
    line-height:25px;
    }
    .aboutleftbottom a{
    background-color:black;
    padding:10px 15px;
    color:white;
    border:2px solid black;
    margin:8px 0px;
    display:inline-block;
    }
    .aboutleftbottom a:hover{
    color:black;
    border:2px solid black;
    background:transparent;
    }
    /*.big img{
    height: 700px;
    width: 100%;
    }*/
    .big div{
    height: 396px;

    width: 25%;
    min-width: 296px;
    float: left;
    overflow: hidden;
    }
    /*.big{
    margin:0;
    padding:0;
    }*/
    .aboutimg{
    padding:0;
    height:396px;
    position: relative;
    }
    .aboutimg img{
    width:100%;
    height:100%;
    }
    .abouttext{
    height:396px;
    background-color:#07cbc9;
    color:white;
    /*padding: 30px 50px;*/
    text-align:left;
    }
    .abouttext h4 {
    font-weight: 500;
    /*font-size: 35px;*/
    font-size: 30px;
    text-align:left;
    padding: 30px 0 15px 50px;
    }
    .abouttext h5 {
    /*padding-bottom: 12px;*/
    line-height: 30px;
    font-weight: 400;
    color: #F7F5F5;
    font-size: 18px;
    /*font-size: 20px;*/
    text-align:left;
    padding: 0 50px 12px;
    }
    .abouttext p {
    line-height: 22px;
    font-size: 14px;
    /*font-size: 18px;*/
    color: #DDD;
    text-align:left;
    margin-bottom:10px;
    padding: 0 50px;
    }
    .abouttext a{
    background-color:black;
    padding:10px 20px;
    color:white;
    display: block;
    width:60px;
    margin:0 auto;
    margin-top:45px;
    border: 2px solid black;
    font-size: 13px;
    }
    .abouttext a:hover{
    border: 2px solid black;
    background:transparent;
    }

    ​祝学习愉快~

    2021-01-16 18:44:21
  • 提问者 WEIQ1 回复 好帮手慕燕燕 #3

    好的,谢谢老师


    2021-01-17 15:47:37
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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