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

html-css017

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

实现代码如下:

<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>

扩展资料:

注意事项

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

static是position的默认值。

<!DOCTYPE html>

<html lang="en">

<head>   

<meta charset="UTF-8">   

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

<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">

  <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 class="container">

       <div class="content"> 

       </div>

   </div>

</body>

</html>

上述样式一般通过取消默认的list标记,然后以图片的形式实现;但是,也可以直接设置li的样式实现,思路是在li标签下嵌套span标签,然后将li的样式设置为红色,字号较大,而span为正常的样式。下面给出后者的实例演示:

创建Html元素

<div class="box">

<span>通过设置li及其子元素span的不同样式将li默认的黑色标记改为红色,且显示较大:</span><br>

<div class="content">

<ul class="test">

  <li><span>Glen</span></li>

  <li><span>Tane</span></li>

  <li><span>John</span></li>

  <li><span>Ralph</span></li>

</ul>

</div>

<div class="content">

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>John</li>

  <li>Ralph</li>

</ul>

</div>

</div>

设置css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box>span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

li{margin:5px 0}

ul.test li{color:redfont-size:30px}

ul.test li span{display:inline-blockcolor:blackfont-size:16px}

观察对比效果

<!DOCTYPE HTML>

<html>

<meta charset="UTF-8">

<title>test</title>

<head>

<style type="text/css">

body {

margin: 0 auto

text-align: center

font-family: "微软雅黑"

}

.normal {

background: url(http://pic.58pic.com/58pic/14/82/90/81B58PIC52m_1024.jpg) no-repeat

background-size: 6px

background-position: 95% 45%

}

.error {

background: url(http://static7.depositphotos.com/1222693/712/i/170/depositphotos_7122979-Red-button.jpg) no-repeat

background-size: 9px

background-position: 95% 45%

border-color: red

}

.warning {

visibility: hidden

font-size: 12px

background: red

color: white

padding: 1px

margin-left: 5px

}

</style>

<script type="text/javascript">

window.onload = function() {

var myinput = document.getElementById('myinput')

var myspan = document.getElementById('myspan')

//失去焦点事件

myinput.onblur = function() {

if(!myinput.value || isNaN(myinput.value)) {

this.className = 'error'

this.title = '请输入此字段'

this.focus()

myspan.style.visibility = 'visible'

} else {

this.className = 'normal'

this.title = ''

myspan.style.visibility = 'hidden'

}

}

}

</script>

</head>

<body>

<div>

<input class="normal" type="text" id="myinput" /><span id="myspan" class="warning">请输入数字</span>

</div>

</body>

</html>