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

    今天对接支付接口,需要获取支付页面,发现支付商那边给的链接会发送302 跳转,最后发现该方法,绝对给力: <?php $url = 'http://auto.jrj.com.cn/'; $ch ...

  2. linux系统中，文件的三种特殊权限

    背景介绍 在linux系统中,我们熟知有rwx三种权限,对应所有者,同组用户,其他用户三种用户的权限,一共9个位来指定一个文件的权限情况,通过chmod xxx 来更改权限属性,其中xxx是已八进制表 ...

  3. javascript中对象字面量与数组字面量

    第一部分 我们知道JavaScript中的数据类型有基本数据类型和引用类型,其中Object类型就是非常常用的类型.那么如果创建一个Object类型的实例呢?下面我介绍两种方法: 第一:构造函数法. ...

  4. Hibernate学习笔记（3）---hibernate关联关系映射

    一对一关联 假设有两个持久化类(实体类)User与Address,它们之间存在一对一的关系 1,通过主键关联(个人偏向另外一种) User.hbm.xml文件配置 <id name=" ...

  5. [Spark内核] 第30课：Master的注册机制和状态管理解密

    本課主題 Master 接收 Worker, Driver, Application Master 处理 Driver 狀态变换 Master 处理 Executor 狀态变换 [引言部份:你希望读者 ...

  6. PyQt4 的部件 -- CheckBox 单选框

    单选框具有两种状态:被选中或未被选中. 当用户选择或者取消选择时,单选框就会发射一个stateChanged()信号 # QCheckBox 单选框 # 本例创建一个用来改变窗口标题的单选框 impo ...

  7. islider结合react的简单实用

    我用islider都是结合react来使用,主要运用在移动端,做首页轮播图,或者是手机图片预览,左右滑动 首先需要 npm install islider.js --save 让后在jsx文件头部引入 ...

  8. C#学习笔记-状态模式

    题目1:通过代码描述每一天的不同时间段的工作效率 分析: 首先确定,工作状态指正在工作,或者以及下班这些情况,而这些情况所受影响的因素包括:当前时间以及任务是否已经完成.所以在Work中需要两个属性: ...

  9. 【三十】php之PDO抽象层

    1.PDO介绍(php data object) PHP 数据对象 (PDO) 扩展为PHP访问数据库定义了一个轻量级的一致接口. PDO 提供了一个数据访问抽象层,这意味着,不管使用哪种数据库,都可 ...

  10. python爬虫之requests模块介绍

    介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requests模块的api更加便捷(本质就是封装了urllib3) #注意:requests库发送请求将网页内容下 ...