如何使用圆圈创建此栏? [英] How can I create this bar with a circle?
本文介绍了如何使用圆圈创建此栏?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我尝试使用CSS和HTML创建样式。
我的样式如下:
我试过了,这是我的HTML:
< div class =download-content>
< div class =download-item>
< div class =download-file>
< div class =front-number> 1< / div>
< p>< a href =>财务比率分析< / a>< / p>
< small>< span> 2013-01-12< / span>< span>功率点< / span>< / small>
< / div>
< / div>
< / div>
这是我的CSS:
.download-content> .download-item> .download-file {
background:#027bc6;
float:right;
width:100%;
}
.download-content> .download-item> .download-file> .front-number {
background:none repeat scroll 0 0#000;
border:5px solid #fff;
border-radius:50%;
color:#fff;
float:left;
font-size:40px;
font-weight:bold;
height:70px;
text-align:center;
width:70px;
}
这与我的预期结果非常接近。但不是100%。
解决方案
我的两分钱:
http://jsfiddle.net/coma/jBx76
HTML
< div class =files>
< a href =#>
< div>
< div class =name>财务比率分析< / div>
< div class =meta>
< div class =date> 2014-08-25< / div>
< div class =format> Word< / div>
< / div>
< / div>
< / a>
< a href =#>
< div>
< div class =name>财务比率分析财务比率分析(此名称如此所以long long long long long long)< / div>
< div class =meta>
< div class =date> 2014-08-25< / div>
< div class =format> PDF< / div>
< / div>
< / div>
< / a>
< / div>
CSS
html {
font-family:Arial,Helvetica,sans-serif;
}
div.files {
position:relative;
display:block;
padding:4px 4px 4px 0;
text-decoration:none;
counter-reset:file;
}
div.files a {
position:relative;
display:block;
padding:4px 4px 4px 62px;
text-decoration:none;
counter-increment:file;
}
div.files a:before {
content:counter(file);
display:block;
position:absolute;
top:2px;
left:2px;
width:68px;
height:68px;
border:5px solid #fff;
background-color:#000;
border-radius:50%;
text-align:center;
line-height:72px;
color:#fff;
font-size:40px;
font-weight:bold;
}
div.files div {
line-height:1em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
div.files a> div {
padding:14px 14px 14px 28px;
background-color:#017BC6;
}
div.files .name {
margin:0 0 14px 0;
font-size:18px;
color:#fff;
}
div.files .meta {
font-size:14px;
color:#bebfba;
font-weight:bold;
}
div.files .meta:after {
content:;
display:block;
clear:both;
}
div.files .date {
float:left;
}
div.files .format {
float:right;
}
div.files .format:before {
content:Format |;
}
悬停
http://jsfiddle.net/coma/jBx76/4/
div.files a& div,
div.files a:before {
transition:background-color 350ms;
}
div.files a:hover> div {
background-color:#000;
}
div.files a:hover :: before {
background-color:#017BC6;
}
更好的浏览器支持
$ b
http://jsfiddle.net/coma/jBx76/5/ p>
I am trying to create a style using CSS and HTML.
My style is like this:
I tried it and this is my HTML :
<div class="download-content">
<div class="download-item">
<div class="download-file">
<div class="front-number">1</div>
<p><a href="">Financial Ratio Analysis</a></p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
This is my CSS :
.download-content > .download-item > .download-file {
background: #027bc6;
float: right;
width: 100%;
}
.download-content > .download-item > .download-file > .front-number {
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
color: #fff;
float: left;
font-size: 40px;
font-weight: bold;
height: 70px;
text-align: center;
width: 70px;
}
It was so close to my expected result. But not 100%.
解决方案
My two cents:
http://jsfiddle.net/coma/jBx76
HTML
<div class="files">
<a href="#">
<div>
<div class="name">Financial Ratio Analysis</div>
<div class="meta">
<div class="date">2014-08-25</div>
<div class="format">Word</div>
</div>
</div>
</a>
<a href="#">
<div>
<div class="name">Financial Ratio AnalysisFinancial Ratio Analysis (this name is so so so long long long long long long)</div>
<div class="meta">
<div class="date">2014-08-25</div>
<div class="format">PDF</div>
</div>
</div>
</a>
</div>
CSS
html {
font-family: Arial, Helvetica, sans-serif;
}
div.files {
position: relative;
display: block;
padding: 4px 4px 4px 0;
text-decoration: none;
counter-reset: file;
}
div.files a {
position: relative;
display: block;
padding: 4px 4px 4px 62px;
text-decoration: none;
counter-increment: file;
}
div.files a:before {
content: counter(file);
display: block;
position: absolute;
top: 2px;
left: 2px;
width: 68px;
height: 68px;
border: 5px solid #fff;
background-color: #000;
border-radius: 50%;
text-align: center;
line-height: 72px;
color: #fff;
font-size: 40px;
font-weight: bold;
}
div.files div {
line-height: 1em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.files a > div {
padding: 14px 14px 14px 28px;
background-color: #017BC6;
}
div.files .name {
margin: 0 0 14px 0;
font-size: 18px;
color: #fff;
}
div.files .meta {
font-size: 14px;
color: #bebfba;
font-weight: bold;
}
div.files .meta:after {
content: "";
display: block;
clear: both;
}
div.files .date {
float: left;
}
div.files .format {
float: right;
}
div.files .format:before {
content: "Format | ";
}
Hover
http://jsfiddle.net/coma/jBx76/4/
div.files a > div,
div.files a:before {
transition: background-color 350ms;
}
div.files a:hover > div {
background-color: #000;
}
div.files a:hover::before {
background-color: #017BC6;
}
Better browser support
http://jsfiddle.net/coma/jBx76/5/
这篇关于如何使用圆圈创建此栏?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文