如何用圆圈创建此栏？
use*_*831 21 html css css3 css-shapes
我正在尝试使用CSS和HTML创建一个样式.
我的风格是这样的:
我试过了,这是我的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>
这是我的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%.
com*_*oma 25
我的两分钱:
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 | ";
}
徘徊
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;
}
更好的浏览器支持
http://jsfiddle.net/coma/jBx76/5/
这是我的解决方案.不过,你需要到.front-number外面.download-file去工作.
<div class="download-content">
<div class="download-item">
<div class="front-number">1</div>
<div class="download-file">
<p><a href="">Financial Ratio Analysis</a></p>
<small><span>2013-01-12</span><span>Format | Power Point</span></small>
</div>
</div>
</div>
.download-content > .download-item {
position: relative;
height: 80px
}
.download-content > .download-item > * {
position: absolute;
}
.download-content > .download-item > .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;
z-index: 2;
}
.download-content > .download-item > .download-file {
background: #027bc6;
width: calc(100% - 110px);
height: 78px;
top: 1px;
left: 45px;
padding-left: 50px;
padding-right: 15px;
}
.download-content > .download-item > .download-file p,
.download-content > .download-item > .download-file a {
color: #fff;
text-decoration: none;
}
.download-content > .download-item > .download-file p {
font-size: 22px;
margin: 10px 0px;
}
.download-content > .download-item > .download-file small {
height: 1em;
line-height: 1em;
display: block;
}
.download-content > .download-item > .download-file small span:first-child {
float:left;
}
.download-content > .download-item > .download-file small span:last-child {
float:right;
}
您可以使用a radial-gradient(如下面的代码段)来实现带圆圈效果的条形图.
径向渐变几乎适用于所有最新的浏览器.您可以在此处查看完整的浏览器支持图表.
.download-content > .download-item > .download-file {
float: right;
width: 100%;
background: #027bc6;
background: radial-gradient(circle at 0% 50%, transparent 60px, #027bc6 60px);
}
.download-content > .download-item > .download-file > .front-number {
float: left;
height: 70px;
width: 70px;
font-size: 40px;
font-weight: bold;
text-align: center;
line-height: 70px;
color: #fff;
background: none repeat scroll 0 0 #000;
border: 5px solid #fff;
border-radius: 50%;
}
.download-file p a {
padding-left: 10px;
color: #fff;
font-size: 20px;
text-decoration: none;
}
span {
color: #AAAAAA;
font-weight: bold;
}
span.left {
float: left;
margin-left: 10px;
}
span.right {
float: right;
margin-right: 10px;
}<!-- prefix free library to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<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 class='left'>2013-01-12</span><span class='right'>Format | Power Point</span></small>
</div>
</div>
</div>在代码段中,我还进行了以下更改,以使输出与相关图像匹配:
- 添加
line-height: 70px;(等于圆高)以使数字垂直居中 - 做了如下的HTML和CSS改变定位和风格你
p和small内容.
HTML:
<span class='left'>2013-01-12</span><span class='right'>Format | Power Point</span>
CSS:
.download-file p a{
padding-left: 10px;
color: #fff;
text-decoration: none;
font-size: 20px;
}
span{
color: #AAAAAA;
font-weight: bold;
}
span.left{
float: left;
margin-left: 10px;
}
span.right{
float: right;
margin-right: 10px;
}