用css實現模仿Firefox社區的一個提示框

來源:互聯網
上載者:User
代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {    margin:0;    padding:0}fieldset, img {    border:0}input, textarea, select {    font-family:inherit;    font-size:inherit;    font-weight:inherit;    border-radius:5px}input, textarea, select {    font-size:100%}body {    background:0;    color:#333;    font:13px/1.5 "微軟雅黑", 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;    margin:0 auto;    min-height:400px}.event-up-count {    opacity: 0.87;    filter:alpha(opacity=87);    width:300px; margin:30px auto;}.event-up-count .number {    background:#EE0101;    border:2px solid #dddddd;    border-radius:6px;    box-shadow:0 0 6px #000000;    color:#ffffff;    font-size:12px;    font-weight:800;    padding:4px 10px;    position:relative;    width:60px;    z-index:5001;}.event-up-count .arrow {    margin:-2px 0 0 13px;    width:20px;    position:relative;    z-index:5006;}.event-up-count .arrow div {    background:#ee0101;    border-left:2px solid #dddddd;    border-right:2px solid #dddddd;    box-shadow:0 2px 3px #444444;    height:1px;    line-height:0;    display:block;    font-size:0;    margin:0 auto;}.event-up-count .arrow .line1 {    background:#dddddd;    border:medium none;    width:1px;}.event-up-count .arrow .line2 {    background:#dddddd;    border:medium none;    width:3px;}.event-up-count .arrow .line3 {    border-bottom: 0 solid #DDDDDD;    border-left: 2px solid #DDDDDD;    border-right: 2px solid #DDDDDD;    width: 1px;}.event-up-count .arrow .line4 {    width: 3px;}.event-up-count .arrow .line5 {    width: 5px;}.event-up-count .arrow .line6 {    width: 7px;}.event-up-count .arrow .line7 {    width: 9px;}.event-up-count .arrow .line8 {    width: 11px;}.event-up-count .arrow .line9 {    border: medium none;    width: 13px;}.event-up-count .arrow .line10 {    border: medium none;    width: 15px;}</style></head><body><div class="event-up-count" id="event_up_detail">  <div class="number"><span id="event_up_count">89</span>人喜歡<br>  </div>  <div class="arrow">    <div class="line10"><!-- --></div>    <div class="line9"><!-- --></div>    <div class="line8"><!-- --></div>    <div class="line7"><!-- --></div>    <div class="line6"><!-- --></div>    <div class="line5"><!-- --></div>    <div class="line4"><!-- --></div>    <div class="line3"><!-- --></div>    <div class="line2"><!-- --></div>    <div class="line1"><!-- --></div>  </div></div></body></html>
  • 相關文章

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.