最近一直想美化博客的文字效果和增加文章末尾的转发提示，所以这两天抽空研究了一下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. Python并发实践_02_通过yield实现协程

    python中实现并发的方式有很多种,通过多进程并发可以真正利用多核资源,而多线程并发则实现了进程内资源的共享,然而Python中由于GIL的存在,多线程是没有办法真正实现多核资源的. 对于计算密集型 ...

  2. 阻止form空表单提交----JavaScript

    网上看到很不错的阻止form空表单提交 第一种方法 <div class="warp"> <h2>登录到pfan空间</h2> <p> ...

  3. MicroPython教程之TPYBoard v102 CAN总线通信

    0x00前言 CAN是控制器局域网络(ControllerAreaNetwork,CAN)的简称,是ISO国际标准化的串行通信协议.CAN总线结构简单,只需2根线与外部相连,并且内部集成了错误探测和管 ...

  4. TPYBoard—MicroPython开发板免费试用！你最想抱走哪款？

    TPYBoard开发板自上市开售以来,受到了广大硬件及MicroPython爱好者的一致好评,许多人提出想试用开发板的申请.为此,TPYBoard特推出多款开发板免费试用活动,感兴趣的朋友抓紧申请吧! ...

  5. MicroPython可视化编程开发板—TurnipBit自制MP3教程实例

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 当前我们都生活在一个有声有色的社会当中,欣赏美丽的景色,享受动人的音乐, ...

  6. SQL Server 审计操作概念

    概述 对于一般的数据库系统审计可能不太会被重视,但是对于金融系统就不一样的.金融系统对审计要求会很高,除了了记录数据库各种操作记录还可能会需要开发报表来呈现这些行为数据.使用SQL Server Au ...

  7. sql基本知识

    1.类型转换 用convert,cast float转换出现科学计数字母的问题:可以先转成numeric再转成varchar declare @fl float set @fl=1234567.123 ...

  8. Kafka、Logstash、Nginx日志收集入门

    Nginx作为网站的第一入口,其日志记录了除用户相关的信息之外,还记录了整个网站系统的性能,对其进行性能排查是优化网站性能的一大关键. Logstash是一个接收,处理,转发日志的工具.支持系统日志, ...

  9. 从Unity中的Attribute到AOP(二)

    上一篇文章我们初步了解了一下Attributes的含义,并且使用系统自带的Attributes写了点代码.在进一步解剖我们的代码之前,我觉得有个概念可能需要巩固一下:什么是元数据? 我们知道C#代码会 ...

  10. C#学习笔记-适配器模式

    什么是适配器模式? 适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口. Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 什么时候运用适配器模式? ...