码迷,mamicode.com
首页 > Web开发 > 详细

CSS容器属性

时间:2018-01-27 20:10:38      阅读:657      评论:0      收藏:0      [点我收藏+]

标签:height   round   12px   文章   否则   容器   ref   htc   border   

1话不多说,直接上代代码:

<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;
 width:600px;
 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&amp;fm=27&amp;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>

效果如下图所示:

技术分享图片

友情提示

作者: mhq_martin

博客园地址: http://www.cnblogs.com/mhq-martin/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS容器属性

标签:height   round   12px   文章   否则   容器   ref   htc   border   

原文地址:https://www.cnblogs.com/mhq-martin/p/8366669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!