你會如何在CSS中複製這些框？

-3

我正在通過一些設計並試圖在CSS中複製它們，但我在以文本爲中心的文本中遇到了特殊問題，例如：你會如何在CSS中複製這些框？

enter image description here

可經驗豐富的Web開發人員告訴我，他們將如何實現這些簡單的形狀，也許解釋相處？

字體是Dense，但這並不重要，我只是想看看你是如何佈置的！

謝謝。

來源

2013-12-09 Jishaxe

你嘗試過這麼遠嗎？你有任何可以向我們展示的企圖代碼嗎？ –

@DrydenLong這是一些東西，但它看起來不太靈活。 http://jsfiddle.net/9rVC5/ – Jishaxe

你是什麼意思的「靈活」？您提供的小提琴中的代碼缺少什麼功能？ –

我有在框中居中文本特別的問題......

只需添加：

text-align:center;

的橙色和綠色的div。這應該解決它。

來源

2013-12-09 22:48:39 danzo

這裏有一個FIDDLE

<section> 
    <div class="requests"> 
    <span class="number">1</span> 
    <span class="title-r">active requests</span> 
    </div> 

    <div class="notifications"> 
    <span class="number">3</span> 
    <span class="title-n">notifications</span> 
    </div> 
</section> 


section { 
    background: #272727; 
    width: 370px; 
    margin: 40px auto; 
    padding: 20px 0; 
    text-align: center; 
} 
.requests, 
.notifications { 
    display: inline-block; 
    width: 150px; 
    height: 160px; 
} 
.requests { 
    background: #ff8000; 
    margin-right: 18px; 
} 
.notifications { 
    background: #2ecc71;  
} 
.title-r, 
.title-n { 
    display: block; 
    font-size: 18px; 
} 
.title-r { 
    color: #c0392b; 
    text-shadow: 1px 1px 0 #ff9b38; 
} 
.title-n { 
    color: #166337; 
    text-shadow: 1px 1px 0 #33e07b; 
} 
.number { 
    font-size: 100px; 
    color: #fff; 
}

只是更改字體，就是這樣。

Preview

來源

2013-12-09 23:30:08 mdesdev

我能得到使用text-align:center的水平對齊和垂直對齊一些CSS相對定位類似的東西。我把尺寸和字體系列留給你，但希望這會給你一個總體思路。

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="test.css" 
    </head> 

    <body> 
     <div class="box" id="box1"> 
      <h1>1</h1> 
      <h2>active requests</h2> 
     </div> 

     <div class="box" id="box2"> 
      <h1>3</h1> 
      <h2>notifications</h2> 
     </div> 
    </body> 
</html>

CSS：

.box{ 
    height:150px; 
    width:150px; 
    display:inline-block; 
    margin:0; 
    padding:0; 
} 
#box1{ 
    background-color: orange; 
} 

#box2{ 
    background-color: green; 
} 

h1{ 
    margin:0; 
    text-align: center; 
    color:white; 
    font-size: 5em; 
    position:relative; 
    top:20px; 
} 

h2{ 
    margin:0; 
    font-size: 1em; 
    text-align: center; 
    position:relative; 
    top: 30px; 
}

來源

2013-12-10 00:40:03 9er

你會如何在CSS中複製這些框？

回答

相關問題