Home > Article > Web Front-end > Use css to implement a prompt box that imitates the Firefox community

Use css to implement a prompt box that imitates the Firefox community

高洛峰Original: 2016-11-24 10:36:071086browse

The code is as follows

<!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 "微软雅黑", &#39;Helvetica Neue&#39;, 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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css to implement sharp corner divNext article：css to implement sharp corner div

See more

Use css to implement a prompt box that imitates the Firefox community

Related articles