Question

我之前已经阅读过其他问题，我看到的最佳答案是将其包装在锚标记中。喜欢

<a href="account.php"><i class="fa fa-user" style="font-size:36px"></i></a>

但这不起作用。我的fa对象变成蓝色，因此它可以作为锚点对象，但我无法点击它。

我无法找出它无法正常工作的原因。我想也许是我的HTML？

这是我的代码：

                <html>
            <head>
            <title>'.$title.'</title>           
            <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
            <link href="core/assets/css/main.css" type="text/css" rel="stylesheet">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            </head>
            <body>  
            <header id="header">
                <div class="container">
                    <h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1>
                </div>
                   <div class="box" onclick="alert("You clicked me !")">
                    <i class="fa fa-user" style="font-size:36px"></i>
                  </div>
            </header>
            <div class="content">
                <div class="article">
                    '.$content().'
                <div>
            </div>
            </body>     
            </html>

我希望fa-user可以点击并链接到其他页面。我在我的代码中看到了onclick，以检查它是否有效，但是也没有工作。

https://jsfiddle.net/cvvcxbnh/

Answer 1

在这里你应该添加＆＃34; href＆＃34;内部价值＆＃34; a＆＃34;标签。并且为了打开其他页面，只需使用target =＆＃34; _blank＆＃34;在里面＆＃34; a＆＃34; tag.Hope它会工作。

   <div class="container">
        <h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1>
     </div>
   <div class="box">
      <a href="#" target="_blank"><i class="fa fa-user" style="font-size:36px; 
   color:black;"></i></a>
     </div>

Answer 2

添加相对于方框div的位置

这是由容器的绝对定位引起的，但是添加z-index可以解决问题，但z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）

body {
	margin: 0;
	padding: 0;
  background-color: #f6f9fc;
}
#header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 100px;
  background: #fff;
  box-shadow: 0px 1px 10px #888888;
}
p {
	font-family: Arial;
}
#header h1 {
  font-size: 2.4rem;
  color: #3c8be4;
  font-family: sans-serif;
}
header .container {
	margin: 0 auto;
	position: absolute;
  text-align: center;
  width: 100%;
}
.content {
  padding-top: 100px;
}
.article {
  margin: 100px 15%;
  position: relative;
  overflow-wrap: break-word;
  animation-duration: 2s;
  animation-name: animation1;
  animation-timing-function: ease;
}
header .box {
  float: right;
  position:relative;
  margin-top: 33px;
  margin-right: 33px;
  color: #4e4e4e;
  text-decoration: none;
  cursor:pointer;  
  z-index: 2;
}
.article h1{
  color: #4e4e4e;
  font-family: Sans-serif;
  font-size: 4rem;
  line-height: 0px;
}
.article p{
  font-size: 1.5rem;
  color: #535353;
  display: inline-block;
}
.login h1{
	font-size: 2rem;
}
.login {
	float: right;
  box-shadow: 0px 1px 10px #888888;
	width: 300px;
	position: relative;
	border-radius: 15px;
	padding: 20px;
	display: inline-block;
	text-align: center;
	background-color: #fff;
}
.inlogform {
  margin-top: 40px;
}	
.login h3,h4 {
   font-family: sans-serif;
   font-size: 0.8rem;
   line-height: 0;
   margin-bottom: 5px;
   text-decoration: none;
}
.login h4{
  margin-top: 30px;
  color: red;
}
a {
  text-decoration: none;
  color: inherit;
}
input[type=text] {
    width: 90%;
    margin: 5px 0;
    padding: 8px;
    border: 1px solid gray;
    border-radius: 10px;
    font-size: 1rem;
    margin-top: 0;
}
input[type=password] {
    width: 90%;
    margin: 5px 0;
    padding: 8px;
    border: 1px solid gray;
    border-radius: 10px;
    font-size: 1rem;
}
input[type=submit] {
    width: 90%;
    margin: 20px;
    padding: 8px;
    border: 0px solid gray;
    border-radius: 10px;
    font-size: 1rem;
    background-color: 3c8be4;
    color: white;
    margin-bottom: 5px;
}
@media (min-width: 600px) {
@keyframes animation1 {
    0%   {margin:0px 15%;opacity: 0;} 
    100%   {margin: 100px 15%; opacity: 1;}
}	
}

/*Mobiele Weergave*/
@media (max-width: 599px) {
  #header .container {
    width: 100%;
  }
  #header {
	  height: 80px;
  }
  #header h1 {
	font-size: 30px;
	float: left;
	margin-left: 5%;
  }
  .content {
  padding-top: 80px;
}
.article{
    margin: 60px 5%;
}
.register {
        margin-left: 5%;
}
#header .box {
    margin-top: 22px;
    margin-right: 22px;
}
.login {
	float:left;
}
@keyframes animation1 {
    0%   {margin:0px 5%;opacity: 0;} 
    100%   {margin: 60px 5%; opacity: 1;}
}
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
            <header id="header">
                <div class="container">
                    <h1><i class="fa fa-cloud" style="font-size:36px"></i>DataBaas</h1>
                </div>
                   <div class="box" >
                  <a href="#"> <i class="fa fa-user" style="font-size:36px"></i></a>
                  </div>
            </header>
            
            <div class="content">
                <div class="article">
                    '.$content().'
                <div>
            </div>

如何使Fa对象可点击？

2 个答案: