列表中有圆圈和矩形

时间：2015-08-21 14:45:29

标签： html css css3 css-shapes

我尝试实现Word（SmartArt）中已知的以下列表。

List with circles and rectangles

线条可以是直线。

目前这是我的解决方案：

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <h1>Interactive Food Guide</h1>
        <div>
            <input type="text" id="searchBox"> <br/><br/>
        </div>
        <ul id="listing"></ul>
    </div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Backbone and Underscore -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
    <!-- apps functionality -->
    <script src="js/app.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS：

<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Strategischer Verkauf &#x3c;<a href="strategischerVerkauf.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Prozessorientierte Verkaufstechnik &#x3c;<a href="prozessorientierteVerkaufstechnik.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Team-Selling &#x3c;<a href="teamSelling.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>

内联CSS将外包给CSS文件。

然而，我并不完全满意，因为线条与圆圈不完全吻合，盒子/矩形必须在圆圈“后面”移动。

如何做到这一点？我正在寻找一个干净的解决方案。

3 个答案:

答案 0 :(得分：4)

您可以使用li＆{39}和pseudo-elements来执行此操作

＆＃13;
＆＃13; 
ul{
  list-style:none;
  }
li{
  display:block;
  width:200px;
  height:70px;
  padding:20px;
  padding-left:80px;
  font-size:28px;
  color:#fff;
  background:dodgerblue;
  margin:10px 0;
  position:relative;
  }
li:after{
  position:absolute;
  content:"";
  width:100px;
  height:100px;
  background:#fff;
  border:5px solid dodgerblue;
  border-radius:50%;
  top:0px;
  left:-50px;
  }
ul:before{
  content:"";
  position:absolute;
  width:5px;
  height:500px;
  background:#fff;
  border:2px solid dodgerblue;
  }
＆＃13; 
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
 </ul>
＆＃13;
＆＃13;
＆＃13;

这个像你问的那样有一点曲线

＆＃13;
＆＃13; 
ul{
  list-style:none;
  }
li{
  display:block;
  width:200px;
  height:70px;
  padding:20px;
  padding-left:80px;
  font-size:28px;
  color:#fff;
  background:dodgerblue;
  margin:10px 0;
  position:relative;
  }
li:after{
  position:absolute;
  content:"";
  width:100px;
  height:100px;
  background:#fff;
  border:5px solid dodgerblue;
  border-radius:50%;
  top:0px;
  left:-50px;
  }
ul:before{
  content:"";
  left:-30px;
  position:absolute;
  width:100px;
  border-radius:50%;
  height:550px;
  background:#fff;
  border-right:5px double dodgerblue;
  }
＆＃13; 
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
 </ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

要建立@ Akshay的答案，如果你知道你将拥有多少，你也可以修改每个li。

ul {
  list-style: none;
  overflow: auto;
  box-sizing: border-box;
  margin: 10px;
}
ul::before {
  content: '';
  width: 350px;
  height: 550px;
  border-radius: 50%;
  border: 8px double #0195cb;
  border-left: 0;
  position: absolute;
  top: 25px;
  left: -200px;
}
li {
  display: block;
  width: 200px;
  height: 70px;
  padding: 20px;
  padding-left: 80px;
  font-size: 28px;
  color: #fff;
  background: dodgerblue;
  margin: 10px 10px;
  position: relative;
}
li:after {
  position: absolute;
  content: "";
  width: 100px;
  height: 100px;
  background: #fff;
  border: 5px solid dodgerblue;
  border-radius: 50%;
  top: 0px;
  left: -50px;
}
li:nth-child(2) {
  margin-left: 50px;
}
li:nth-child(3) {
  margin-left: 90px;
}
li:nth-child(4) {
  margin-left: 50px;
}
<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

答案 2 :(得分：0)

图像地图，如果您希望它看起来与图片完全相同。

DEMO 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flexCircle</title>
<style>
area { cursor:pointer; pointer-events:auto; }
</style>
</head>

<body>
<section>
<nav>
<img src="flexCircle.png" alt="" usemap="#fcMap" />
<map name="fcMap" id="fcMap">
    <area alt="circleLink" title="Back" href="#" shape="circle" coords="75,64,45" />
    <area alt="circleLink" title="Home" href="#" shape="circle" coords="101,171,45" />
    <area alt="circleLink" title="Forward" href="#" shape="circle" coords="75,282,45" />
    <area alt="bannerLink" title="About" href="#" shape="poly" coords="109,244,633,243,633,314,110,314,121,281" />
    <area alt="bannerLink" title="Blog" href="#" shape="poly" coords="137,137,633,138,633,205,135,208,151,174" />
    <area alt="bannerLink" title="Contact" href="#" shape="poly" coords="111,30,634,25,632,100,108,97,124,63" />
</map>
<!-- Coordinates generated with Easy Imagemap Generator by Dario D. Miller | http://imagemap-generator.dariodomi.de/ -->
</nav>
</section>
</body>
</html>
相关问题
最新问题