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

        批量画图任务中,需要在R中传入若干参数,之前对做法是在perl中每一个任务建立一个Rscript,这种方式超级不cool,在群里学习到R的@ARGV调用方式,差不多能够达到批量任务的要求: a ...

  2. Bash shell编程的语法知识点(1)

    Bash shell脚本编程知识点如下(初学,不全,欢迎讨论补充): shell简介 脚本的简单介绍 变量和引用 算术运算 交互式编程 选择判断 条件测试 循环 函数 shell简介 shell是一种 ...

  3. js小知识-replace的回调函数

    replace() 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串.模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数. 注意:原字符串不会改变. ...

  4. Flask 框架 简介

    一.Flask介绍 Flask是一个基于Werkzeug,Jinja 2 轻量级的web开发框架, 使用Python开发, 上手简单. 二.安装Flask 三.第一个Flask程序 1.编写app.p ...

  5. Gulp自动化构建工具的简单使用

    相关网站 gulp官方网址:http://gulpjs.com gulp中文网站:http://www.gulpjs.com.cn/ gulp插件地址:http://gulpjs.com/plugin ...

  6. 【CSS初识】

    一.CSS是什么? CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距.高度.宽度.背景图像.高级定位等方面. HTML用于结构化内容:CSS用于格式化结构化的内容. ...

  7. python3基础(七)函数基础

    Function 函数是一段组织好的能够实现特定功能或者逻辑的代码块,函数代码在文件执行时读入内存并不执行,在调用函数时执行,简单来说是把一段代码封装给一个函数名(可以用变量的概念去理解,即把一段代码 ...

  8. 纯js代码生成可搜索选择下拉列表

    1.因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layu ...

  9. Windows资源

    Windows资源是一种二进制数据,由链接器链接进程序成为程序的一部分,通过资源的方式可以很方便的对应用程序进行扩展.在Windows中资源可以是系统自定义的,也可以是用户自定义的.在VC++中资源是 ...

  10. K：图相关的最小生成树（MST）

    相关介绍:  根据树的特性可知,连通图的生成树是图的极小连通子图,它包含图中的全部顶点,但只有构成一棵树的边:生成树又是图的极大无回路子图,它的边集是关联图中的所有顶点而又没有形成回路的边.  一个有 ...