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

    1.安装 # wget https://github.com/kr/beanstalkd/archive/v1.10.tar.gz # tar xzvf v1.10 # cd beanstalkd-1 ...

  2. JSP EL隐含对象

    JSP 内置对象 JSP EL隐含对象 描述 page pageScope page 作用域 request requestScope request 作用域 session sessionScope ...

  3. python编辑器pydev安装

    pydev实际上时eclipse的插件 1.安装eclipse(1)eclipse不需要安装,解压文件夹,点击eclipse.exe可使用 2.安装pydev (1) 解压pydev可看到featur ...

  4. 《深入理解Java虚拟机：JVM高级属性与最佳实践》读书笔记（更新中）

    第一章:走进Java 概述 Java技术体系 Java发展史 Java虚拟机发展史 1996年 JDK1.0,出现Sun Classic VM HotSpot VM, 它是 Sun JDK 和 Ope ...

  5. 10个优秀个android项目，精选|快速开发

    1.Android-FilePicker-android图片和文档选择器 项目地址 https://github.com/DroidNinja/Android-FilePicker 2.ViewPag ...

  6. 微信支付接口开发之－－－微信支付之JSSDK（公众号支付）步骤

    1.准备     1.1.公众号为服务号,开通微信支付功能     1.2.为了方便调试微信后台的回调URL(必须为外网),我用了nat123软件来做一个映射     1.3.官方微信开发的示例WxP ...

  7. 微信小程序<web-view>嵌入网页后，小程序如何和网页交互传值？

    最近开发一个项目由于小程序某些组件的限制,然后想到嵌入网页,但是遇到一个问题:网页端调取数据的时候需要 小程序传递多个参数值才能用,如何传值呢? 最初我想到是<web-view src=&quo ...

  8. 使用FormatMessage函数编写一个内核错误码查看器

    在编写驱动程序的时候,常用的一个结构是NTSTATUS,它来表示操作是否成功,但是对于失败的情况它的返回码过多,不可能记住所有的情况,应用层有一个GetLastError函数,根据这个函数的返回值可以 ...

  9. <The Art of Readable Code> 笔记二 (下)

    第1章  封装信息到名字 (Packing information into names) 4  附加额外信息 1)  encode value type 对于某些变量,附加额外的信息可以让人更好的理 ...

  10. Linux centos7系统下svn的安装与配置

    一.安装svn # yum -y install svn 二.查看svn版本信息 # svnserve --version 三.搭建svn版本库(假设项目名称为project) 1.首先创建版本库目录 ...