Question

enter image description here

到目前为止，我只有一个包含此信息的div。至于里面的内容，我喜欢一些关于如何优雅地使用CSS和CSS来格式化信息的帮助或指导。

您将使用哪些HTML元素？我遇到的问题是在那里设置蓝色渐变。我将其设置为背景图像吗？有什么建议吗？

这只是我自己的一个简单示例，我正在尝试更熟悉CSS。谢谢你的时间。

Answer 1

我会使用图像列表spans和div来分隔所有内容。你可以考虑html和css的最好方法是html是网页的钢制i-beam。创建结构但只是属性。然后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

这可以为您提供所提供图像的基本结构，具体取决于您实际为每个参数提供的内容。

Answer 2

<!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

如果您需要我解释其中任何一项，请发表评论，我会更新答案。

Answer 3

enter image description here

http://jsfiddle.net/efortis/s9zSN/2

使用CSS和HTML帮助创建此播放器卡

3 个答案: