老师，banner里的按钮为什么定位效果不对？

来源：4-5 小慕医生项目开发（4）

练习时常两年半的前端练习生

2022-03-29 20:56:15

*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul, ol{
list-style: none;
}
header{

}
header .header-top{
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
header .header-top .logo{
float: left;
padding-top: 39px;
}
header .header-top .logo h1{
width: 192px;
height: 63px;
color: #00978E;
}
header .header-top .tool{
float: right;
width: 266px;
height: 67px;
padding-top: 35px;
padding-bottom: 29px;
}
header .header-top .tool .r1{
padding-bottom: 10px;
}
header .header-top .tool .r1 .tel{
width: 32px;
height: 25px;
}
header .header-top .tool .r1 .num {
width: 158px;
height: 26px;
padding-left:25px ;
text-align: center;
font-family: Helvetica;
font-size: 20px;
color: #00978E;
}
header .header-top .tool .r1 .icon{
width: 24px;
height: 24px;
}
header .header-top .tool .r1 .chinese-icon{
padding-right: 14px;
}
header .header-top .tool .r2 {
width: 264px;
height: 30px;
border: 1px solid #000;
border-radius: 4px;
}
header .header-top .tool .r2 input{
float: left;
width: 95px;
height: 21px;
padding-left: 19px;
border: none;
outline: none;
padding-top: 4px;
}
header .header-top .tool .r2 .btn{
float: right;
width: 20px;
height: 20px;
position: relative;
top: 5px;
right: 4px;
cursor: pointer;
}
header nav{
width: 100%;
height: 60px;
background-color: #00978E;
}
header nav .main-nav{
width: 1200px;
height: 60px;
margin: 0 auto;
}
header nav .main-nav ul{

}
header nav .main-nav ul li{
float: left;
width: 150px;
height: 60px;
line-height: 60px;
text-align: center;
}
header nav .main-nav ul li a{
display: block;
width: 150px;
height: 60px;
color: white;
}
header nav .main-nav ul li:first-child{
background: #015E58;
}

.banner{
width: 100%;
height: 570px;
position: relative;
}
.banner .banner-img{
width:100%;
}
.banner .center{
position: absolute;
width: 1200px;
height: 300px;
background-color: gold;
top: 50%;
left: 50%;
margin-left: -600px;
margin-top: -150px;
}
.banner .center h2{
font-family: Helvetica;
font-size: 60px;
color: #015E58;
width: 480px;
height: 79px;
}
.banner .center .left-btn{
position: absolute;
width: 56px;
height: 64px;
background-color: rgba(0,0,0,.3);
top: 50%;
left: 50%;
margin-left: -28px;
margin-top: -32px;
}
.banner .center .right-btn{
/* position: absolute;
    width: 56px;
    height: 64px;
    top: 50%;
    right: 50%;
    margin-right: -28px;
    margin-top: -32px; */
}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/css.css">
</head>

<body>
<header>
<div class="header-top">

<div class="logo">
<h1>小慕医生</h1>
</div>

<div class="tool">

<div class="r1">
<img class="tel" src="images/tel.png" alt="">
<span class="num">088-88888888</span>
<img class="chinese-icon icon" src="images/chinese_icon.png" alt="">
<img class="english-icon icon" src="images/english_icon.png" alt="">
</div>

<div class="r2">
<input type="text" placeholder="找医生/科室">
<img src="images/search.png" class="btn">
</div>
</div>
</div>

<nav>
<div class="main-nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">医院概况</a></li>
<li><a href="">医院动态</a></li>
<li><a href="">专家学科</a></li>
<li><a href="">服务指南</a></li>
<li><a href="">医院文化</a></li>
<li><a href="">信息公开</a></li>
<li><a href="">互动交流</a></li>
</ul>
</div>
</nav>
</header>

<div class="banner">

<img src="images/banner.png" class="banner-img">

<div class="center">
<h2>责任，科学，严谨</h2>
<a href="" class="left-btn"></a>
<a href="" class="right-btn"></a>
</div>

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

</div>
</body>

</html>

写回答

1回答