最近一直想美化博客的文字效果和增加文章末尾的转发提示,所以这两天抽空研究了一下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. TCP协议(二)——TIME_WAIT状态

    当TCP主动关闭套接字时,采用四步握手机制来彻底关闭连接.如图: 客户端主动关闭连接,发送FIN段到服务端.TCP状态由ESTABLISHED(连接状态)转为FIN_WAIT1(表示,发送的FIN需要 ...

  2. Python学习_12_方法和类定制

    方法 在上一篇随笔中,简单提到了类的某些方法:__init__()等的调用,并简要说明方法和函数的区别. 方法是在类内部定义的函数,方法也是对象,所以方法是类的属性,这就是为什么说实例的方法存在于类定 ...

  3. Web程序员们,你准备好迎接HTML5了吗?

    HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash.QuickTime.Silverlight等插件,也简化了原来需要大量JS ...

  4. ${param.name}和${name}的区别

    ${param.name} == request.getParam("name") ${name} == request.getAttribute("name" ...

  5. MNIST-NameError: name ‘input_data’ is not defined解决办法

    在学习TensorFlow文档教程的时候, 在MNIST入门一节,发现直接运行下载MNIST数据集的代码会报错.原代码如下: import tensorflow.examples.tutorials. ...

  6. MySQL优化-》执行计划和常见索引

    MySql的explain执行计划 explain是一个Mysql性能显示的工具,它显示了MySQL如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句.在开发当 ...

  7. Qt用Zip压缩文件夹的一些坑

    环境: QT3.3.8 vs2005 QDir dir("/home/Blinux/html"); if ( !dir.exists() ) { //目录不存在 } QString ...

  8. 文件及Linux目录结构

    什么是文件 在linux系统上,所有的资源都是文件,Linux系统下的文件类型包括 普通文件(-) 目录(d) 符号链接(l) 字符设备文件(c) 块设备文件(b) 套接字(s) 命令管道(p) 普通 ...

  9. 基于springboot微信公众号开发,几分钟学会微信自动回复

    效果图 1.准备工作 申请微信订阅号(个人只能申请订阅号,而且没什么功能,也无法认证),申请完毕,点击 开发=>基本配置,如下图: 服务器配置需要有 域名 80端口,我猜你没有,这里推荐个实用工 ...

  10. Spring Boot实战:集成Swagger2

    一.Swagger简介 上一篇文章中我们介绍了Spring Boot对Restful的支持,这篇文章我们继续讨论这个话题,不过,我们这里不再讨论Restful API如何实现,而是讨论Restful ...