Блог

Главная - Вопросы по программированию - css, строки, проходящие вертикально через маркеры

css, строки, проходящие вертикально через маркеры

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Это может показаться глупым, но я здесь на грани. Кто-нибудь знает, как это сделать в css или javascript? (предпочтительно css)

введите описание изображения здесь

Комментарии:

1. я попытался закодировать это, чувак, но мой код просто неправильный, у него есть хвост внизу, и он грязный. Но спасибо, я буду иметь это в виду 🙂

Ответ №1:

Вы могли бы попробовать это:

 body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.section_header {
  background-color: #7e9489;
  border-radius: 20px;
  width: 200px;
  height: 20px;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 20px;
}
.section_content {
  margin: 0px;
  padding: 0px;
  display: block;
  border-left: solid 2px #7e9489;
  margin-left: 99px;
  padding-top: 10px;
}
.section_content > li {
  display: block;
  position: relative;
  line-height: 40px;
}
.section_content > li::before {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background-color: #7e9489;
  margin-left: -7px;
  margin-right: 20px;
  z-index: 10;
}
.section_content > li > span {
  display: inline-block;
  vertical-align: middle;
}
.section_content > li:last-child::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0px;
  left: -2px;
  width: 2px;
  height: 50%;
  background-color: white;
  z-index: 1;
}  
 <div class="section_header">OCT 5, 2016</div>
<ul class="section_content">
  <li><span>Segment 1</span></li>
  <li><span>Segment 2</span></li>
  <li><span>Segment 3</span></li>
  <li><span>Segment 4</span></li>
</ul>

Ответ №2:

Быстро и грязно:-

 	.date {
		border-radius: 30px;
		background-color: #7C9288;
		width: 200px;
		text-align: center;
		padding: 10px;
		color: #fff;
	}
	.box {
		border-left: 2px solid #7C9288;
	    margin-left: 110px;
	    margin-top: -16px;
	    padding-top: 20px;
	}
	li {
		color: #7C9288;
		list-style-type:none;
	}
	li:before{
		content:'0b7';
		font-size:100px;
		line-height:24px;
		vertical-align:middle;
	}
	ul {
		margin-left: -57px;
	}  
 <div class="date">Today</div>
<div class="box">
	<ul>
		<li>Test</li>
		<li>Test 2</li>
		<li>Test 3</li>
	</ul>
</div>