padding属性的一些用法
程序员文章站
2022-07-14 12:53:33
...
- 移动端正方形（使用视口单位vw也可实现该效果）
- 菜单图标
- 选择器图标
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
}
.banner {
padding: 50%;
background-color: aquamarine;
}
.menu {
border-top: 10px solid #000;
border-bottom: 10px solid #000;
padding: 5px 0;
background-color: #000;
height: 10px;
width: 45px;
background-clip: content-box;
}
.round {
border: 5px solid #000;
padding: 5px;
height: 30px;
width: 30px;
background-color: #000;
background-clip: content-box;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="menu">
</div>
<br>
<div class="round"></div>
</body>
</html>
效果
上一篇： 逻辑回归 乳腺癌的数据集
下一篇： matplotlib的一些基本用法