
<!DOCTYPE?html>
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title></title>
<style?type="text/css">
body{margin:0;padding:0;}
.demo03{
????width:558px;
????margin-top:20px;
????padding:20px;
????background:blue;
????border:1px?#ccc?solid;
????margin-left:100px;
????position:relative;
}
.demo03?img{
????float:left;
????margin:-20px?0?0?-120px;
}
.demo03?p{
??font-size:12px;line-height:25px;
}
.demo03?span{
????position:absolute;
????margin-right:20px;
????margin-top:10px;
}
</style>
</head>
<body>
????<div?class="demo03">
??????<img?src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg"?/>
??????<h1>提示</h1>
??????<p>溫馨提示:完成任務后,請驗證是否與實踐描述效果一致,如一致,恭喜您,你已經掌握此技能,否則,請重復學習此節內容。</p>
??????<span>一個小時以前</span>
????</div>
</body>
</html>
2018-04-28
.demo03 span{
? ? position:absolute;
? ? right:20px;
? ? top:10px;
跟定位配合,用的是top、left、right、bottom。你那個是構建盒子模型啦
2018-03-20
?position:absolute;絕對定位
2018-01-17
粗心了,回去看了html/css課程12-9,發現組合使用后使用方向定位,不用加margin的,尷尬