Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS, um ein Eingabeaufforderungsfeld zu implementieren, das die Firefox-Community imitiert
Verwenden Sie CSS, um ein Eingabeaufforderungsfeld zu implementieren, das die Firefox-Community imitiert
- 高洛峰Original
- 2016-11-24 10:36:071124Durchsuche
Der Code lautet wie folgt
<!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>Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS zum Implementieren von Sharp Corner DivNächster Artikel：CSS zum Implementieren von Sharp Corner Div