一道前端代码题，用很简单的CSS代码实现

最新推荐文章于 2024-01-06 16:53:55 发布

一休~

最新推荐文章于 2024-01-06 16:53:55 发布

阅读量191

点赞数

分类专栏： HTML 文章标签： html js 面试

本文链接：https://blog.csdn.net/weixin_41324295/article/details/105671251

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

昨天去第一次面试前端这个岗位，有点新奇，去到那里技术就给了我一个电脑，一张设计图让用sublime敲出来。

设计图大概长这样吧，因为不能拍照，所以这是我回家后做的。

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<style type="text/css">
	.container{
		background-color: #eee;
		padding: 20px
	}
	.box-group{
		display: flex;
		justify-content: space-around;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.box{
		background-color: #fff;
		height: 150px;
		width: 230px;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.box .title-group{
		display: flex;
		color: #878787;
		justify-content: space-between;
	}
	.box .title-group .title{
		font-size: 14px;
	}
	/*！的icon*/
	.box .title-group .icon{
		width: 15px;
		height: 15px;
		display: block;
		border: 1px solid #878787;
		border-radius: 50%;
		line-height: 15px;
		text-align: center;
	}
	.price{
		font-size: 26px;
	}
	/*一个向下的箭头*/
	.red {
		font-size: 0;
		line-height: 0;
		border-width: 10px;
		border-color: red;
		border-bottom-width: 0;
		border-style: dashed;
		border-left-color: transparent;
		border-right-color: transparent;
	}
	/*一个向上的箭头*/
	.green{
		font-size: 0;
		line-height: 0;
		border-width: 10px;
		border-color: green;
		border-top-width: 0;
		border-style: dashed;
		border-left-color: transparent;
		border-right-color: transparent;
	}
	.per-group{
		display: flex;
		justify-content: space-between;
	}
	</style>
</head>
<body>
<section class="container">
<!-- 创建一个容器 -->
	<div class="box-group">
	<!-- 一个四个一模一样的盒子 -->
		<div class="box">
			<div class="title-group">
				<span class="title">销售额</span>
				<span class="icon">！</span>
			</div>
			<div class="price">
				￥12478.8
			</div>
			<div class="per-group">
				<div>周比<span class="green"></span>12</div>
				<div>日比<span class="red"> </span>45</div>
			</div>
			<div class="date">
				时间 &nbsp;20200421
			</div>
		</div>
		<div class="box">
			<div class="title-group">
				<span class="title">销售额</span>
				<span class="icon">！</span>
			</div>
			<div class="price">
				￥12478.8
			</div>
			<div class="per-group">
				<div>周比<span class="green"></span>12</div>
				<div>日比<span class="red"> </span>45</div>
			</div>
			<div class="date">
				时间 &nbsp;20200421
			</div>
		</div>
		<div class="box">
			<div class="title-group">
				<span class="title">销售额</span>
				<span class="icon">！</span>
			</div>
			<div class="price">
				￥12478.8
			</div>
			<div class="per-group">
				<div>周比<span class="green"></span>12</div>
				<div>日比<span class="red"> </span>45</div>
			</div>
			<div class="date">
				时间 &nbsp;20200421
			</div>
		</div>
		<div class="box">
			<div class="title-group">
				<span class="title">销售额</span>
				<span class="icon">！</span>
			</div>
			<div class="price">
				￥12478.8
			</div>
			<div class="per-group">
				<div>周比<span class="green"></span>12</div>
				<div>日比<span class="red"> </span>45</div>
			</div>
			<div class="date">
				时间 &nbsp;20200421
			</div>
		</div>
	</div>
</section>
</body>
</html>

面试的时候我是用relative+position做的，不过会变形，所以试着用flexbox做了一下。

新手一枚，大神不要喷我哦

一休~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一道前端代码题，用很简单的CSS代码实现

昨天去第一次面试前端这个岗位，有点新奇，去到那里技术就给了我一个电脑，一张设计图让用sublime敲出来。设计图大概长这样吧，因为不能拍照，所以这是我回家后做的。<!DOCTYPE html><html><head> <title>hello</title> <style type="text/css">...
复制链接

扫一扫