Question

我是html和css的新手，我正在尝试弄清楚如何使用html和css构建形状。

我想将两行文字放在一个圆圈中，并为该圆圈添加一个小标题，如下所示，

我想在两行表格中对齐6个这样的圆圈（每行3个单元格）。表格中的每个单元格都是一个圆圈（里面有两行文字），上面有一个小描述。

有人可以帮我解决这个问题吗？

谢谢。

Answer 1

这可以使用CSS完成。

HTML代码：

<table>
    <tr>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
    </tr>
    <tr>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
        <td>
            Description
            <div class="circle">Circle 1 <br> cirlce 2</div>
        </td>
    </tr>
</table>

CSS代码：

<style>
.circle
{
    width:50px;
    height:50px;
    border-radius:25px;
    font-size:9px;
    color:#fff;
    line-height: 25px;
    text-align:center;
    background:#000
}
table tr td {
    padding: 10px;
    text-align: center
}
</style>

工作示例：JS Fiddle

更新小提琴：New Fiddle

Answer 2

试试这个。我写了一段代码。

<!DOCTYPE html>
<html>
<head>
	<title>fade effect</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
 <style type="text/css">
  body{
  	margin: 0;
  }

div.mycircle{
  width: 500px;
  height: 500px;
  margin: 50px;
  background: -webkit-linear-gradient(blue,white);
  color: black;
  border-radius: 250px;
 
}

 </style>

<body>

<div class="mycircle">
  <span style="position: absolute; top: 250px;left: 250px;font-size: 30px;">Line 1</span>
  <span style="position: absolute; top: 280px;left: 250px;font-size: 30px;">Line 2</span>
</div>
 	


</body>
</html>

Answer 3

阅读CSS规则：border-radius，padding，line-height，text-align和background-color。

您可以这样做here;）

将文字封闭在圆圈内并向圆圈添加小标题（HTML / CSS）

3 个答案: