css仿微信通话页面布局

最新推荐文章于 2021-11-10 18:37:20 发布

yueliang0423

最新推荐文章于 2021-11-10 18:37:20 发布

阅读量718

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yueliang0423/article/details/103506883

版权

本文展示了如何使用CSS技术来仿制微信通话页面的布局，重点提及了右侧小图标的实现，采用了font-awesome图标库。

摘要由CSDN通过智能技术生成

效果图如下：

右侧小图标使用font-awesome

<!DOCTYPE html>
<head>
<title>布局</title>
<style>
body{
	margin:0;
	padding:0;
}
.father{
      width: 300px;
      height: 300px;
      background-color: pink;
}
.son{
      width: 100px;
      height: 100px;
      background-color: black;
      position: absolute;
      left:0;
      top:0;
}
.fa-window-minimize,.fa-times,.fa-window-maximize{
    color:#000;
	float:right;
	margin-right:10px;
	padding:4px;
}
</style>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="father">
<i class="fa fa-times" aria-hidden="true"></i>
<i class="fa fa-window-maximize" aria-hidden="true"></i>
<i class="fa fa-window-minimize" aria-hidden="true"></i>

   <div class="son"></div>
</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yueliang0423

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css仿微信通话页面布局

效果图如下：右侧小图标使用font-awesome<!DOCTYPE html><head><title>布局</title><style>body{ margin:0; padding:0;}.father{ width: 300px; height: 300px; ...
复制链接

扫一扫