如何使用圆圈创建此栏？ [英] 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％。

JS FIDDLE

解决方案

我的两分钱：

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/

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%.

JS FIDDLE

解决方案

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屋！