• 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&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/

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

  • 相关阅读:
    701. 二叉搜索树中的插入操作
    【ceph | 运维】 部署mgr
    【cpeh | 运维】mon相关命令
    【Leetcode】144. 二叉树的前序遍历
    【Linux】Linux中查看某个软件的安装路径
    【Leetcode】100. 相同的树
    【Leetcode】145. 二叉树的后序遍历
    【Leetcode】94. 二叉树的中序遍历
    redis学习04Redis的主从架构
    RabbitMQ学习02安装与配置(Ubuntu系统)
  • 原文地址:https://www.cnblogs.com/mhq-martin/p/8366669.html
Copyright © 2020-2023  润新知