0
我目前正在一个小型网站上工作。我有关于几个问题的定位,大小,我的一些按钮的排列...CSS/HTML5的大小问题
我想我的箱子永远停留在屏幕中心(✔)。
我想有一个自适应按钮方案,以便它们在窗口变得足够小时彼此堆叠在一起。目前,它们全部捆绑在一起,并且一旦页面达到特定尺寸时不可读(如下所示)。
我想我的注册文本在我的两个按钮的底部。它目前在他们的右边。另外,当窗口的大小在一定范围内时,箱子需要放在彼此的旁边而不是在旁边,我希望我的注册文本可以沿着第二个方框走下去。下面我会分享我的代码(html & CSS),我会发送网站当前状态的图片。
在此先感谢。
CSS代码
body{
margin-top: 300px;
text-align: center;
}
.ownerButton, .employeeButton {
background-color: #333;
text-align: center;
text-decoration: none;
}
.ownerButton, .employeeButton {
font-family: "georgia", sans-serif;
font-size: 24px;
padding: 1em 2em;
margin: 3px;
border: 0;
outline: 0;
color: #000000;
background-color: #2196F3;
text-transform: uppercase;
border-radius: 0.15em;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
font-weight: bold;
overflow: hidden;
position: relative;
}
.footer{
font-family: sans-serif;
font-weight: bold;
font-size: 14px;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #2196F3;
text-align: center;
}
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belper</title>
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor=#4286f4>
<a href="http://www.google.com" class="ownerButton">Sign in as OWNER</a>
<a href="http://www.google.com" class="employeeButton">Sign in as EMPLOYEE</a>
<a href="http://google.com" class="signUp">Dont have an account? Sign up here!</a>
<div class="footer">
<p>Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved.</p>
</div>
</body>
</html>
这就是完美!我非常感谢你的帮助乔。 – Larocque
乐于帮忙,欢迎来到Stack Overflow。如果此答案解决了您的问题,请将其标记为已接受。 :) –
只有一个小问题,我如何将文本/按钮发送到窗口的中心?我正在考虑在页面的上部放置一个徽标! :-) – Larocque