我希望通过CSS实现这样的目标:
我是CSS的新手。
我的问题:
div
下添加一个小div
并将其背景设置为绿色?我知道有很多方法可以做到,但我只想学习最佳实践。答案 0 :(得分:4)
您可以按照描述在底部添加div,也可以使用边框。在任何一种情况下,你都可以调整一些高度。没什么大不了。
div {
width: 50%;
padding-top: 10px;
font-size: 24px;
text-align: center;
font-family: arial, sans-serif;
}
.followers {
background-color: #777;
float: right;
height: 75px;
color: #ccc;
}
.following {
background-color: #555;
float:left;
height: 70px;
color: #ccc;
border-bottom: 5px solid lime;
}
<div class="followers">Followers</div>
<div class="following">Following</div>
我没有意识到该字体是否是Arial。我可以说它是一个类似的无衬线字体,如果不是。
答案 1 :(得分:3)
使用CSS精灵表。它们将帮助您使用图像实现此效果。通常,当您对菜单执行标记时,请使用UL和LI标记,然后根据功能进行适当的样式设置。然后将其设置为在鼠标结束时使用:hover选择器更改背景精灵。我建议将精灵表创建为您希望所有默认菜单按钮看起来像(横向跨越)的精确图像。然后在具有悬停版本外观的同一图像上执行下面的另一个版本。您可以对所需的任何其他版本(如活动,禁用等)重复此过程。只需确保为每个版本偏移背景位置的Y值。比如这个:
li { background-position: 0px 0px; }
li:hover { background-position: 0px -100px; }
li:active { background-position: 0px -200px; }
查看本文以获取有关标记和设计方面的更多信息: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
编辑: 如果你不想做精灵表,我有一个纯css3的jsFiddle方式在这里做: http://jsfiddle.net/uBhKF/
HTML标记:
<ul>
<li>FOLLOWING</li>
<li>FOLLOWERS</li>
</ul>
CSS3:
ul {
width: 100%;
padding: 0px;
margin: 0px;
list-style-type: none;
float: left;
}
li {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
float: left;
width: 50%;
height: 50px;
display: block;
margin: 0px;
background-color: #444;
border-left: 1px dotted #DDD;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 24px;
text-align: center;
line-height: 50px;
color: #888;
}
li:first-of-type {
border-left: none;
}
li:hover {
color: #55E000;
border-bottom: 5px solid #55E000;
background-color: #333;
}
但是我无法正确使用font-family。 :(
答案 2 :(得分:2)
使用此
.header
{
margin-left: auto;
margin-right: auto;
height: 102px;
background-color: #F0F0F0;
width:500px
}
.header .header-first
{
float: left;
width: 216px;
border-bottom: 3px solid #3CA2DF;
}
.header .header-last
{
width: 216px;
float:right;
}
答案 3 :(得分:1)
字体肯定不是Arial,我相信它的校准,并为您解决此代码
<html>
<body>
<div style="border-bottom: 3px solid #00ff00;
background:#000;
height: 50px;
width:400px;
color:#00ff00;
text-align:center;">
FOLLOWERS
</div>
</body>
</html>
答案 4 :(得分:1)
也试试这个
<html>
<head>
<style>
td
{
width:400px;
background:#000;
color:#fff;
text-align:center;
height: 100px;
font-size:20px;
}
td:hover
{
text-decoration: underline;
border-bottom: 3px solid #00ff00;
color:#00ff00;
}
</style>
</head>
<body>
<table style="margin:0 auto;">
<tr>
<td>Following</td>
<td>Followers</td>
</tr>
</table>
</body>
</html>