最近一直想美化博客的文字效果和增加文章末尾的转发提示，所以这两天抽空研究了一下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/

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

CSS容器属性的更多相关文章

  1. flex容器属性(一)

    一,概念 flexible box ,意为"弹性布局",用来为盒状模型提供最大的灵活性. 块级布局更侧重于垂直方向,行内布局更侧重于水平方向,于此相对的,弹性盒子布局算法是方向无关 ...

  2. css之属性部分

    这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...

  3. CSS布局属性

    一.弹性盒模型介绍 1.弹性盒模型介绍 — 基础知识 弹性盒模型( Flexible Box 或 Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout M ...

  4. [转] CSS direction属性简介与实际应用 ---张鑫旭

    一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬, ...

  5. CSS核心属性

    学习目标 1.css浮动属性详解 2.Css文本属性 3.Css列表属性 4.Css背景属性 5.Css边框属性 一.Css浮动属性详解 无论多么复杂的布局,其基本出发点均是:"如何在一行显 ...

  6. 【转载】CSS direction属性简介与实际应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  7. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  8. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  9. CSS will-change 属性

    介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...

随机推荐

  1. JavaScript的DOM编程--09--节点的替换

    节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...

  2. vim 高级应用

    1 全文内容删除 方法1:    按ggdG方法2:       :%d

  3. NPOI 1.2 教程

    NPOI 1.2 教程官方地址 很多人可能对NPOI还很陌生,别担心,通过本教程你将对NPOI有进一步的认识和理解. 目录 1. 认识NPOI 2. 使用NPOI生成xls文件 2.1 创建基本内容 ...

  4. Android与javascript中事件分发机制的简单比较

    在前面两篇博客中,我们讨论了Android中的事件分发的相关内容,那么在本篇博客当中,我们就简单探讨一下html或javascript中的事件分发机制,并进行简单的对比. 在前端中,对事件进行绑定有三 ...

  5. JS 对象API之获取原型对象

    1.从 构造函数 获得 原型对象: 构造函数.prototype 2.从 对象实例 获得 父级原型对象: 方法一: 对象实例.__proto__        [ 有兼容性问题,不建议使用] 方法二: ...

  6. C++\virtual 虚函数、纯虚函数

    前提摘要: 虚函数联系到多态,多态联系到继承.所以本文中都是在继承层次上做文章.没了继承,什么都没得谈. 虚函数定义: 指向基类的指针或引用在操作它的多态类(子类/派生类)对象时,会根据不同的类对象, ...

  7. 【ASP.NET 系列】浅谈缓存技术在ASP.NET中的运用

    本篇文章虽不谈架构,但是Cache又是架构中不可或缺的部分,因此,在讲解Cache的同时,将会提及到部分架构知识,关于架构部分,读者可以不用理解,或者直接跳过涉及架构部分的内容 你只需关心Cache即 ...

  8. PE文件详解二

    本文转自小甲鱼的PE文件相关教程,原文传送门 咱接着往下讲解IMAGE_OPTIONAL_HEADER32 结构定义即各个属性的作用! 接着我们来谈谈 IMAGE_OPTIONAL_HEADER 结构 ...

  9. Windows内核函数

    字符串处理 在驱动中一般使用的是ANSI字符串和宽字节字符串,在驱动中我们仍然可以使用C中提供的字符串操作函数,但是在DDK中不提倡这样做,由于C函数容易导致缓冲区溢出漏洞,针对字符串的操作它提供了一 ...

  10. 一个InnoDB性能超过Oracle的调优Case

    年前抽空到兄弟公司支援了一下Oracle迁移MySQL的测试,本想把MySQL调优到接近Oracle的性能即可,但经过 @何_登成 @淘宝丁奇 @淘宝褚霸 @淘伯松 诸位大牛的指导和帮助(排名不分先后 ...