主页 / 问题 / 1103397
Accepted
Ibrahim
Asked:2020-03-31 21:23:25 +0000 UTC2020-03-31 21:23:25 +0000 UTC

如何在 HTML/CSS 中实现这样的块？[关闭]

  • 772

我的问题是，如何实现这样的块和块本身（项目）？

在此处输入图像描述

html

3 个回答

  1. 通过使用display: flex;

    为每个块添加了问题中的颜色。

    * {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.block {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	width: 400px;
}

.block .icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
	padding: 10px;
}

.block-red .icon { background-color: #f55767; }
.block-blue .icon { background-color: #2563ff; }
.block-green .icon { background-color: #40975f; }

.block .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block .description {
	margin-left: 10px;
}

.block .description p {
	font-size: 16px;
	margin: 0 0 10px 0;
	font-weight: 600;
}

.block-red p { color: #f55767; }
.block-blue p { color: #2563ff; }
.block-green p { color: #40975f; }

.block .description span {
	font-size: 13px;
}
    <div class="container">
	<div class="blocks">
		<div class="block block-red">
			<div class="icon">
				<img src="https://image.flaticon.com/icons/svg/2687/2687779.svg" alt="">
			</div>
			<div class="description">
				<p>Fast Perfomance</p>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quasi, unde, autem consequatur similique voluptas deserunt provident?</span>
			</div>
		</div>
		<div class="block block-blue">
			<div class="icon">
				<img src="https://image.flaticon.com/icons/svg/2033/2033705.svg" alt="">
			</div>
			<div class="description">
				<p>Prototyping</p>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quasi, unde, autem consequatur similique voluptas deserunt provident?</span>
			</div>
		</div>
		<div class="block block-green">
			<div class="icon">
				<img src="https://image.flaticon.com/icons/svg/2752/2752514.svg" alt="">
			</div>
			<div class="description">
				<p>Vector Editing</p>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quasi, unde, autem consequatur similique voluptas deserunt provident?</span>
			</div>
		</div>
	</div>
</div>

    • 1
  2. Best Answer

    解决方案display: grid;

    为每个块添加了颜色。

    .blocks {
	display: grid;
	grid-gap: 30px;
	font-family: sans-serif;
}

.blocks .block {
	display: grid;
	grid-template-areas: 'img p' 'img span';
	align-items: center;
	grid-gap: 10px;
	width: 400px;
}

.block .icon {
	grid-area: img;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	padding: 10px;
}

.block .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block.red .icon { background-color: rgba(245, 87, 103, 0.4); }
.block.blue .icon { background-color: rgba(37, 99, 255, 0.4); }
.block.green .icon { background-color: rgba(64, 151, 95, 0.4); }

.block p {
	grid-area: p;
	margin: 0;
	font-weight: 600;
	font-size: 16px;
}

.block.red p { color: #f55767; }
.block.blue p { color: #2563ff; }
.block.green p { color: #40975f; }

.block span {
	grid-area: span;
	font-size: 13px;
}
    <div class="blocks">
	<div class="block red">
		<div class="icon">
			<img src="https://image.flaticon.com/icons/svg/2687/2687779.svg" alt="">
		</div>
		<p>Fast Perfomance</p>
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, deserunt sed amet obcaecati, eaque enim doloribus.</span>
	</div>
	<div class="block blue">
		<div class="icon">
			<img src="https://image.flaticon.com/icons/svg/2033/2033705.svg" alt="">
		</div>
		<p>Prototyping</p>
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, deserunt sed amet obcaecati, eaque enim doloribus.</span>
	</div>
	<div class="block green">
		<div class="icon">
			<img src="https://image.flaticon.com/icons/svg/2752/2752514.svg" alt="">
		</div>
		<p>Vector Editing</p>
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, deserunt sed amet obcaecati, eaque enim doloribus.</span>
	</div>
</div>

    • 1

  3. 看：（在你的脑海中想象）你将拥有三个块：这是每个项目（快速性能、原型制作和矢量编辑） 将每个块分成 2 个块：在左边的块中你有图标，在右边的块中你有文本（在右边的块中还有 h1 和 p 标签），这将在 flex 的帮助下完成。如果不清楚，我可以扔掉代码如何做到这一点

    • 0

相关问题