htm+css字的右上角用于提示的红点怎么实现

发布网友

我来回答

共4个回答

热心网友

实现代码如下：

</div>

</div>

</div>

<style>

.wrap {

width:50px;

margin-bottom:10px;

position:relative;

}

.img {

width:50px;

height:50px;

border:1px solid #000;

}

.notice {

width:20px;

height:20px;

line-height:20px;

font-size:10px;

color:#fff;

text-align:center;

background-color:#f00;

border-radius:50%;

position:absolute;

right:-10px;

top:-10px;

}

</style>

扩展资料：

注意事项

主要用到position定位，CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。

static是position的默认值。

<!DOCTYPE html>

<head>

<title>CSS-position-static</title>

<style>

.container{

background-color: #868686;

width: 100%;

height: 300px;

}

.content{

background-color: yellow;

width: 100px;

height: 100px;

position: static;

left: 10px;/* 这个left没有起作用 */

}

</style>

</head>

<body>

</div>

</body>

</html>

热心网友

这是通过定位实现的。具体代码如下：

i{
  display:block;
  background:#f00;
  border-radius:50%;
  width:5px;
  height:5px;
  top:0px;
  right:0px;
  position:absolute;
}

效果如图：

热心网友

<div class="wrap">
<div class="img"></div>
<div class="notice">1</div>
</div>

<div class="wrap">
<div class="img"></div>
<div class="notice">12</div>
</div>

<div class="wrap">
<div class="img"></div>
<div class="notice">13</div>
</div>
<style>
.wrap {
    width:50px;
    margin-bottom:10px;
    position:relative;
}
.img {
    width:50px;
    height:50px;
    border:1px solid #000;
}
.notice {
    width:20px;
    height:20px;
    line-height:20px;
    font-size:10px;
    color:#fff;
    text-align:center;
    background-color:#f00;
    border-radius:50%;
    position:absolute;
    right:-10px;
    top:-10px;
}
</style>

效果如下：

热心网友

右上角提示红点，说明就是鼠标划过时出现提问内容。解决方法如下：

找一个和类似的图标或者直接用文字打个点放在一个DIV里面

给这个图标或者文字一个右浮动属性。例：<div class="xxx"><p style="float:right;">这是红点</p></div>

给对象一个右浮动后，我们还需要让他到上方去。可以给对象一个margin-top的属性。例：<div class="xxx"><p style="float:right;margin-top:5px;">这是红点</p>

</div>

把位置固定到右上角后，开始添加提示内容。.xxx:hover{这里添加样式和提示文字即可}

全部栏目

htm+css字的右上角用于提示的红点怎么实现

扩展资料：