8张图中添加小三角的定位问题
定位后会随网页缩放改变位置,目前搞不太懂定位问题
相关代码:
相关截图:
<!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
}
22
收起
正在回答 回答被采纳积分+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
}
*/
祝学习愉快~
Python全栈工程师2020
- 参与学习 人
- 提交作业 5211 份
- 解答问题 2433 个
Facebook曾声称“只招全栈工程师”!全栈用人需求猛增,市面人才紧缺。 0基础进击Python全栈开发,诱人薪资在前方!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星