CSS容器属性

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近一直想美化博客的文字效果和增加文章末尾的转发提示，所以这两天抽空研究了一下CSS，前两篇可以翻我的博客，今天写的这篇是介绍增加文章末尾的转发提示，效果如文章末尾所示，好了，CSS很简单，我就不介绍了，直接把我的代码写出来供大家参考：

<head>
<style type="text/css">
* {
margin:0;
padding:0;
}
h3 {
font-size:15px;
color:#0066CC;
line-height:1.5em;
}
p {
font-size:12px;
text-indent:2em;
line-height:1.5em;
}
#container {
background-color:#33FFCC;
height:200px;
margin:0 auto;
margin-top:10px;
padding-right:3px;
border:1px dotted #666;
position:relative;
}
#leftContent {
position:absolute;
top:2px;
left:4px;
}
#leftContent img{
height:192px;
width:200px;
border:1px solid #ccc;
padding:2px;
}
#rightContent {
margin-left:220px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftContent"><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=747535597,1152462222&fm=27&gp=0.jpg" alt="" /></div>
<div id="rightContent">
<h3>友情提示</h3>
<h3>作者：<a href="http://www.cnblogs.com/mhq-martin/"> mhq_martin</a></h3>
<h3>博客园地址：<a href="http://www.cnblogs.com/mhq-martin/"> <span style="color: red; font-size: xx-small;">http://www.cnblogs.com/mhq-martin/</span></a></h3>
<h3>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</h3>
</div>
</div>
</body>
</html>