Question

我目前在我的个人网页上工作。我做了一个起始页面，上面写着我的名字和其他内容。我有一个按钮，我想将它连接到主页面。以下是代码：（自第一个代码以来已更新）

<!DOCTYPE html>
<html>
<head>
    <title>Welcome Page</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" 
rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Patua+One" 
rel="stylesheet">
</head>

<body>

    <div class="heading">
        <span class="title1">Alexandros Kordatzakis</span>
        <span class="title2">Technology, Coding And More...</span>
        <button class="continue">Continue Reading About Me</button>
        <hr> 
    </div>
        <div id=Copyright>Copyright &copy;2017 Alexandros Kordatzakis.</div>

 </body>

 </html>

和CSS：

*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}

body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}
.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;
transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
outline-width: 0px;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;

 transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 50px; 
}
#Copyright{
clear: left;
background-color: #0053BC;
text-align: center;
padding: 12px;
height: 8px;
font-family: 'Patua One', cursive;
font-size: 18px;

}

我的问题：

1）当用户按下按钮“阅读更多关于我”时，它显示为蓝色边框。为什么呢？

2）如何将“起始页”链接到我的主页？

谢谢！

**编辑1：**一些细节，如版权和其他，没有完成，所以抱歉错误。请帮助我解决我的问题！：）

**编辑2：**我已经考虑过我的页面设计，我认为最好将这段代码设为“起始页面”而不允许用户做任何其他事情，比如滚动，然后用户按下此按钮并“隐藏”此背景和文字，并显示我的其他内容。我的传记”。我怎样才能做到这一点？谢谢顺便说一句。

Answer 1

要删除焦点大纲，请使用以下内容：

.continue:focus{
outline-width: 0px;
}

链接页面使用href。实施例

<a href="www.example.com">Your Text Here</a>

编辑2：

要显示按钮上的内容，我会这样做：

首先添加一个新的div，其中包含您的内容，以及另一个div来设置您的信息div的样式：

<div id="yourInfo">
    <p>Your Content Here</p>
    <p>Your Content Here</p>
    <p>Your Content Here</p>
</div>

<div id="yourInfoStyle"></div>

然后你想把它添加到你的css文件中：

#yourInfo{
    display: none;
}

最后，我们需要添加一个函数来显示和隐藏div，所以把它放进去你的html文件中的脚本：

<script>
    var shown = false;
    function showContent(){
        if(!shown){
            document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
            shown = true;
        } else {
            document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
            shown = false;
        }
    }
</script>

所以这里是完整的代码：

HTML：

    <!DOCTYPE html>
<html>
<head>
    <title>Welcome Page</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" 
rel="stylesheet">
    <script>
        var shown = false;
        function showContent(){
            if(!shown){
                document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:block;}</style>";
                shown = true;
            } else {
                document.getElementById("yourInfoStyle").innerHTML = "<style type='text/css'>#yourInfo{display:none;}</style>";
                shown = false;
            }
        }
    </script>
</head>

<body>

    <div class="heading">
        <span class="title1">Alexandros Kordatzakis</span>
        <span class="title2">Technology, Coding And More...</span>
        <button class="continue" onclick="showContent()">Continue Reading About Me</button>
        <div id="yourInfo">
            <p>Your Content Here</p>
            <p>Your Content Here</p>
            <p>Your Content Here</p>
        </div>
        <div id="yourInfoStyle"></div>
        <hr>
        <span class="copyright">Copyright</span>
    </div>

</body>

</html>

CSS：

    *{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}

body{
background-color: #00469E;
background-position: center;
background-size: cover;
background-blend-mode: soft-light;
}

.heading{
width: 600px;
height: 300px;
margin: auto;
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px
}
.title1{
display: block;
text-align: center;
color:white;
font-size: 60pt;
font-family: big john;
}
.title2{
display: block;
margin-top: 30px;
text-align: center;
color:white;
font-size: 15pt;
font-family: 'Share Tech Mono', monospace;
}
.continue{
margin: 50px auto;
display: block;
width: 200px;
height:50px;
border:3px solid white;
background-color: rgba(255, 255, 255, 0);
color:white;
font-family: sans-serif;
font-weight: bold;
border-radius: 20px;

transition: background-color 1000ms, color 1000ms;
}
.continue:focus{
    outline: none;
}
.continue:hover{
background-color: rgba(255, 255, 255, 1);
color: #222;
cursor: pointer;

transition: background-color 1000ms, color 1000ms;
}
.continue:active{
border: 3px solid white;
border-radius: 100px;
}
.copyright{
}
#yourInfo{
    display: none;
}

希望这对你有所帮助！：d

Answer 2

要链接起始页，您可以使用锚标记。您的起始页面中的Ex：

<a href="www.example.com">(Name of the website)</a>.

如需任何帮助，您还可以访问w3shools。他们提供了最好的教程。

Answer 3

答案1：

<button class="continue" style=".continue:focus{outline-width: 0px;}">Continue Reading About Me</button>

答案2：

<a href="www.example.com">example</a>

简单的HTML按钮“边框”

3 个答案: