html中類似qq評論和發狀態的布局實現-初學者



這是效果圖::::

一下是實現代碼::

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">


.demo01{width: 600px; position: relative;}
.left{width: 100px;float:left}
.left img{margin-left: 20px;}
.right{width: 458px;padding: 20px; float:right;background: cornflowerblue;border: 1px solid #ccc;}
.demo01 span{position: absolute;right: 20px;top: 10px;font-size: 12px;}
</style>
</head>
<body>
<div class="demo01">
<div class="left">
<img src="img/head01.jpg" />
</div>
<div class="right">
<h6>櫻桃小丸子</h6>
<p>根據國家規定,員工累計工作已滿1年不滿10年的,年休假5天;
已滿10年不滿20年的,
年休假10天;已滿20年的,年休假15天。
                                      通常情況下,公司sfjksahdflka ;lhslkhaklhfla
                   khfdaklhkalhweiiiiiiiiiiiiii;a年休假必須在一個合同年內休完,逾期自動作廢。
                   </p>
                   <span> 10分鍾之前</span>
</div>
</div>
</body>
</html>


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: