Question

我是HTML / CSS的新手，所以我真的不知道它是如何工作的，但这就是我想要的。有像块一样的按钮但问题是： -

1）当页面结束时如何使其转到下一行（对于除PC以外的其他设备稳定）
2）如何删除不同按钮之间的边距 3）我想要的只是这些按钮在页面上不再是页脚和标题（但在所有设备上都稳定）
4）我如何添加图片作为按钮背景。
5）当我将鼠标悬停在它们上面时，它会显示我添加的类别。

希望你明白我想学的东西。谢谢。

＆＃13;

.button {
    background-color: black;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
	margin:0px;
	list-style-type:none;
	line-height:0px;
	color:white;
    text-align:center;
    padding:100px;
	width:240px;
	height:240px;
	position: relative;
    left: -20px;
	/*opacity: 0.8;*/
	display:inline;
}

#options {
    line-height:00px;
	position:relative;
	top: 100px;
	bottom: auto;
    float:center;
    padding:0px 10px 10px 0px;
	display: inline;
}

.button :hover {
	background-color: white;
    text-decoration: none;
    border-radius: 0px 0px 0px 0px;
	margin:0px;
	list-style-type:none;
	line-height:60px;
	color:black;
    text-align:center;
    padding:0px;
	width:210px;
    left: -30px;
	position:relative;
	z-index:-0.1;
    opacity: 1;
	-moz-opacity: 0.8;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
}

a:link    {color:white; background-color:transparent; text-decoration: none;} 
a:visited {color:white; background-color:transparent; text-decoration: none;}
a:hover   {color:black; background-color:transparent; text-decoration: none; } 
a:active  {color:white; background-color:transparent; text-decoration: none}

＆＃13;

<div id="options">
			<a  class="button" onclick="textdisplay(0)">What's New</a>
			<a  class="button" onclick="textdisplay(1)">My Account</a>
			<a  class="button" onclick="textdisplay(2)">Server Data</a>
			<br />
			<a  class="button" onclick="textdisplay(3)">OLD Posts</a>
			<a  class="button" onclick="textdisplay(4)">Last Left HTML</a>	
		</div>

＆＃13;

Answer 1

首先，你的按钮：悬停css不起作用，因为你有一个空格。一旦我把它拿出来，过渡效果很好。我在html中取出了break代码，并在按钮css上添加了一个浮点数：如果窗口太小，则允许它转到另一行。我也搞砸了你的填充，删除了行高，位置和相当多的其他不必要的代码。如果你愿意的话，试试这个代码并弄乱宽度和高度。

.button {
    background-color: black;
    border-radius: 0px 0px 0px 0px;
    margin:0px;
    color:white;
    text-align:center;
    padding:100px;
    width:240px;
    height:40px;
    float:left;
}

#options {
    position:relative;  
}

.button:hover {
    background-color: white;
    border-radius: 0px 0px 0px 0px;
    margin:0px;
    color:black;
    opacity: 1;
    -moz-opacity: 0.8;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
}

a:link    {color:white; background-color:transparent; text-decoration: none;} 
a:visited {color:white; background-color:transparent; text-decoration: none;}
a:hover   {color:black; background-color:transparent; text-decoration: none;} 
a:active  {color:white; background-color:transparent; text-decoration: none;}

HTML / CSS在线显示按钮并自动转到下一行

1 个答案: