这个按钮要怎么设计比较好呢

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="CSS/common.css">
	</head>
	<body>
		<div class="header">

			<div class="logo">
				<img src="images/logo.png" />
			</div>
			<div class="menu">
				<ul>
					<li>HOME</li>
					<li>ABOUT</li>
					<li>GALLERY</li>
					<li>FACULTY</li>
					<li>EVENTS</li>
					<li>CONTACT</li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="banner">
				<div class="beijin"></div>
			</div>
			<div class="about">
				<div class="bg1">
					<div class="top">
						<div class="h3" id="">
							<h3>ABOUT</h3>
							
						</div>

						<p>Xi Jinping, general secretary of the Central Committee of the Communist Party of China
							(CPC), presided over the 10th meeting of the central committee for deepening overall reform
							Monday.</p>
						<img src="images/bb3.jpg" />
					</div>
					<div class="left">
						<div class="p1">
							<p>
								A WORD <br>ABOUT US
							</p>
						</div>
						<div class="p2">
							<p>
								Xi Jinping, general secretary of the Central Committee of the Communist Party of China
								(CPC), presided over the 10th meeting of the central committee for deepening overall reform
								Monday.
							</p>
							<div class="btn">
								<a href="#" class="btn-a">
								<p>EXPLORE</p>	
								</a>
								
				
							</div>
							
						</div>


					</div>

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

*{
	padding: 0px;
	margin: 0px;
}
a{
	text-decoration: none; 
}
.header{
	width: 1910px;
	height: 80px;
	line-height: 80px;
	background-color: #07cbc9;
	position: fixed;
}
.header .logo img{
	margin-left: 90px;
	float: left;
	margin-top: 15px;
}
.header .menu{
	height: 80px;
	line-height: 80px;
	float: right;
	color: white;
}
.header .menu li{
	float: left;
	line-height: 80px;
	margin-right: 10px;
	list-style: none;
}
.content{
	width: 1910px;
	height: auto;
	overflow: hidden;
	
}
.content .banner{
	margin-top: 80px;
}
.content .banner .beijin{
	background: url(../images/banner3.jpg);
	width: 1910px;
	 height: 600px;
	background-repeat: no-repeat;
	background-size:1910px 600px;
	/* float: left; */
	
}
.content .about .bg1{
	width: 1910px;
	height: 800px;
	
}
.content .about .bg1 img{
	margin: 300px 580px;
}
.content .about .bg1 H3{
	float: left;
	position: absolute;
	
	
	font-size: 50px;
	margin: 60px 800px ;
	
}


.content .about .bg1 .top p{
	
	margin: 140px 740px;
	width: 300px;
	height: 100px;
	word-wrap: break-word;
	text-align: center;
	position: absolute;
	
}
.about .bg1 .left .p1 p{
	 position: absolute; 
	font-size: 35px;
	text-align: center;
	margin: -650px 320px;
}
.about .bg1 .left .p2{
	position: absolute;
	width: 300px;
	height: 200px;
	border: darkgray 1px solid;
	margin: -500px 320px;
	font-size: 20px;
	background: rgba(255,255,255,0.4);
}

.about .bg1 .left .p2 .btn .btn-a{
	width: 50px;
	
}
.about .bg1 .left .p2 .btn .btn-a p{
	
	
	font-size: 20px;
	
	
}

感觉总体思路还是比较零散的，麻烦老师看看做到现在有什么需要改正的，谢谢了

不停奔跑的小恐龙 2019-09-10

源自：前端油画商城案例 4-3 项目作业

收起

2回答

好帮手慕小班 2019-09-10 19:02:26

同学你好，这里的这个按钮根据题目要求，要设置为如下所示的样式

具体代码可以参考如下：

EXPLORE的样式要设置为：

对应在.about .bg1 .left .p2中调整如下样式，就可以正常显示

代码的实现具有灵活性，每个人都会有自己的实现思路，同学先根据自己的思路来完成哟，现在看并没有什么问题。

如果还有疑惑，还请同学具体描述一下呐。

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

收起回答

提问者不停奔跑的小恐龙 #1

请问inline-block在这个例子里面是怎么起作用的，原先的效果又是怎么造成的呢？谢谢

2019-09-10 21:00:44
提问者不停奔跑的小恐龙 #2

还有就是那个文字下面的墨绿色短线有什么简便的方法弄出来吗，我之前用的是新建一个元素然后显示底边框，我觉得这样不简洁

2019-09-10 21:08:56
好帮手慕小班回复提问者不停奔跑的小恐龙 #3

同学你好，1、display：inline-block；行内块元素，也就是说它具有了行内元素的不换行特征，同时也具有块元素的可以设置宽高等特征，在这里我们设置这个属性，可以让这个p不用占据整行。又可以设置宽高等信息。原先的效果怎么造成的，还麻烦同学具体描述一下，这里老师并不明白。2、about下的短线的实现，这里老师同样是新建了一个元素的方法实现，老师的实现是设置一个行内元素，然后在css样式中设置display:block;设置为块状元素，设置背景色、宽高、margin、padding来实现效果。如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

2019-09-11 10:08:33