幫助創建使用CSS和HTML

enter image description here 幫助創建使用CSS和HTML

到目前爲止，球員卡，我只有將包含此信息的股利。至於內部的內容，我很樂意提供一些幫助或指導，告訴我如何在CSS中優雅地使用HTML格式化信息。

你會用什麼HTML元素？我遇到的麻煩是在那裏設置藍色漸變。我是否將其設置爲背景圖片？有什麼建議麼？

這僅僅是一個簡單的例子，我想要更熟悉CSS。感謝您的時間。

2011-08-07 Only Bolivian Here

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    .card { 
    min-width:250px; 
    border-radius:10px; 
    background-color:#09f; 
    padding:10px; 
    border:3px solid #03f; 
    font-family:Sans-Serif; 
    display:inline-block; 
    } 
    .avatar { 
    border:1px solid #000; 
    } 
    .card h1 { 
    display:inline; 
    vertical-align:top; 
    font-size:1.2em; 
    font-weight:bold; 
    } 
    .info { 
    clear:both; 
    } 
    .title { 
    font-weight:bold; 
    float:left; 
    } 
    .value { 
    float:left; 
    margin-left:20px; 
    } 
</style> 
</head> 
<body> 
    <div class="card"> 
    <img src="http://en.gravatar.com/userimage/16359447/fc9081765352a27b17cdbf4c24fe3544.jpeg" class="avatar"> 
    <h1>Thomas Shields</h1> 
    <div class="info"> 
     <span class="title">Info #1:</span> 
     <span class="value">Value #1</span> 
    </div> 
    <div class="info"> 
     <span class="title">Info #2:</span> 
     <span class="value">Value #2</span> 
    </div> 
    <div class="info"> 
     <span class="title">Info #3:</span> 
     <span class="value">Value #3</span> 
    </div> 

    </div> 
</body> 
</html>

http://jsbin.com/ajevap/2/edit

如果你需要我多解釋了吧，評論，我會UDPATE答案。

來源

2011-08-07 01:24:21

+1中出現不同的'li' ...你比我快。這裏是我停下來的地方：http://jsfiddle.net/jasongennaro/4aj3k/ –

@Jason; P ...但你正在實現漸變，*和* IE後備。隨意編輯我的答案和任何改進。 :) –

你很棒，@托馬斯。竊取你需要的任何回退。 –

我會使用圖像列表跨度和div來分隔一切。您可以考慮html和css的最佳方式是html網頁的鋼製橫樑。創建結構，但沒有任何比這更多的屬性。然後CSS是牆壁，斑點和油漆。所以，當你看設計時，你應該考慮「建築結構」是什麼。

可能是頂部的圖像，而不是名稱。用戶名可能是自己的。最後還有一個進一步的用戶信息列表。

<div> 
    <img> 
    <span> 
    <ul> 
     <li> 
      <span> 
      <span>

將是可接受的結構。現在創建你的風格，你需要移動和定位你想要的東西。

div { 
    height 
    width 
    position: relative 

div img { 
    position 
    height 
    width 

div span { 
    postion 
    color 
    text-decoration 

div ul { 
    position 
    color 

div ul li 
    color

這可以讓你方便地根據你實際提供給每個參數提供的圖像的基本結構。

來源

2011-08-07 01:13:31 austinbv

這樣的信息的每一行，如「Ultimo的JOGO - [日期]」將是相同的範圍內？如果是這樣，我如何確保這些行像圖片一樣對齊？ –

這一切都取決於你的位置，沒有像日期那樣的每個元素都會在同一個'ul' – austinbv

enter image description here