实现代码如下:
<divclass="wrap">
<divclass="img"></div>
<divclass="notice">1</div>
</div>
<divclass="wrap">
<divclass="img"></div>
<divclass="notice">12</div>
</div>
<divclass="wrap">
<divclass="img"></div>
<divclass="notice">13</div>
</div>
<style>
.wrap{
width:50px
margin-bottom:10px
position:relative
}
.img{
width:50px
height:50px
border:1pxsolid#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定位,CSSposition属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
static是position的默认值。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS-position-static</title>
<linkrel="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>
<divclass="container">
<divclass="content">
</div>
</div>
</body>
</html>
朋友:这个是你空间名称CSS代码,找到他。/*头部*/
#header{height:270pxbackground:url(http://imgsrc.baidu.com/css/pic/item/7573fa0948cfd0d23ac76339.jpg) no-repeat center bottom}
#header div.lc{}
#header div.rc{}
#header div.tit{top:50pxleft:400pxline-height:22pxfont-size:22pxfont-family:font-weight:boldcolor:#868686padding:1px 5px 2 5pxtext-align:right}/*博客标题*/
#header div.tit a.titlink{color:#000000font-size:22pxtext-decoration:none}
#header div.tit a.titlink:visited{color:#000000font-size:22pxtext-decoration:none}
#header div.desc{top:70pxleft:540pxcolor:#fffffffont-size:12pxfilter:alpha(opacity=80)text-align:rightdisplay:none} /*隐藏空间简介*/
==========================
#header div.tit{top:50pxleft:400pxline-height:22pxfont-size:22pxfont-family:font-weight:boldcolor:#868686padding:1px 5px 2 5pxtext-align:right}/*博客标题*/
主要在这个地方
(font-size:22px)字体大小。
(font-weight:bold)bold : 粗体。相当于number为700。也相当于b对象的作用
-----------------------------
自己可以根据具体情况修改。
呵呵小妹妹~~~我不看你的代码
只告诉你一个CSS层影藏属性的使用
比如说我加入一个层
<div id="divnew"></div>
这个层我定义一个CSS
<style type="css/text">
#divnew
{
display:none//CSS中隐藏属性的关键字
}
</style>
这样你的层就被隐藏了
或者简写成
<div id="divnew" style="display:none">
你看看能不能显示出来
</div>
这个是最基础的,希望你能利用好基础设计出更精美的网页