zoukankan      html  css  js  c++  java
  • 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/

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

  • 相关阅读:
    windows自带摘要工具
    黑客帝国中的黑猫是什么?
    安装EdXposed提示请先从magisk manager中安装riru
    magisk和xposed和frida的区别
    awvs激活成功但是扫描失败 License problem 40
    KALI LINUX 工具大全之信息收集数字取证 Xplico (解释)
    小米机型代号
    黑客帝国高告诉我们的世界观认清自己
    web漏洞扫描器
    burpsuite中注入器的必知攻击方式
  • 原文地址:https://www.cnblogs.com/mhq-martin/p/8366669.html
Copyright © 2011-2022 走看看