您的位置：首页 > Web前端

前端小白训练营DAY4

2017-04-18 22:10 302 查看

前端小白训练营DAY4

CSS盒模型、相对定位和绝对定位的应用与实践

不跟你多逼逼，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>关于我</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body{margin-top:2rem;}
#sq{
width: 26rem;
height: 12rem;
background-color: #E9C39E;
border-radius: 1rem;
margin-left: 50rem;
margin: auto;
}
.jpg {
width: 5.5rem;
height: 7rem;
margin-left: 0.5rem;
margin-top: 0.5rem;
border-radius: 1rem;
}
.png{
margin-top: 0.4rem;
margin-left: 1.6rem;
width: 2rem;
height: 2rem;
position: absolute;
border-radius: 2rem;
}
.bt{
text-align: center;
float: right;
padding-right: 3.8rem;
margin-top: 0.5rem;
color: white;
font-size: 1.1rem;
}
.na{
float: right;
padding-right: 11rem;
top: -4rem;
color: white;
position:relative;
font-size: 1.2rem;
}
.cs{float: right;
padding-right: 7rem;
top: -4rem;
color: white;
position:relative;
font-size: 1.2rem;
}
span{
font-size: 1.2rem;
color: black;
}
</style>
</head>
<body>
<div id="sq">
<img class="jpg" src="18.jpg" alt="aboutme">
<img class="png" src="11.png" alt="ten">
<p class="bt">腾讯课堂IMWeb前端学院</p>
<p class="na">姓名：<span> Ifour</span></p>
<p class="na">班级：<span> 小白</span></p>
<p class="cs">Q Q：<span> 1024002746</span></p>
</div>
</body>
</html>




！rem是移动设备下也不会变形。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 前端
相关文章推荐
新的分享
章节导航