1、background  内置

是一种CSS内置设计模式，支持在元素下显示图片

HTML

<!DOCTYPE html>

<html lang="en">

<head><title>Background Image</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="site.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="page.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="print.css"  media="print"  type="text/css" />

<!--[if lte IE 6]>

<link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />

<![endif]-->

</head>

<body>

<h1>Background Image</h1>

<div></div>

</body>

</html>

CSS

div { background:url("heading2.jpg") no-repeat; width:250px; height:76px; }

2、Absolute  绝对定位

是将元素从流中移除，然后将它相对于另一个元素进行重新定位。

HTML

<!DOCTYPE html>

<html lang="en">

<head><title>Absolute</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="site.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="page.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="print.css"  media="print"  type="text/css" />

<!--[if lte IE 6]>

<link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />

<![endif]-->

</head>

<body>

<h1>Absolute</h1>

<div class="positioned">

<span class = "absolute">Sized Absolute</span>

</div>

</body>

</html>

CSS

/* Non-essential styles */

*.positioned { height:120px; border:2px solid black; }

*.absolute   { padding:5px; text-align:center;

border:5px solid black; background-color:gold; }

/* Essential Styles */

*.positioned { position:relative; }

*.absolute   { position:absolute; top:10px; left:10px; }

3、Text Replacement 文本替换

是将一些文本的位置上显示一张图片。当图片下载失败时，则显示文本信息。

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>Text Replacement</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="site.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="page.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="print.css"  media="print"  type="text/css" />

<!--[if lte IE 6]>

<link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />

<![endif]-->

</head>

<body>

<h1>Text Replacement</h1>

<h2 id="h2">Heading 2 <span></span></h2>

</body>

</html>

CSS

#h2      { position:relative; width:250px; height:76px; overflow:hidden; }

#h2 span { position:absolute; width:250px; height:76px; left:0; top:0;

background:url("heading2.jpg") no-repeat; }

4、Left Marginal 左旁注

是将一个或多个元素移动到块级元素的左边。

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>Left Marginal</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="site.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="page.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="print.css"  media="print"  type="text/css" />

<!--[if lte IE 6]>

<link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />

<![endif]-->

</head>

<body>

<h1>Left Marginal</h1>

<div class="left-marginal">

<h2 class="marginal-heading">Heading</h2>

You want to except an element and move it into the left margin.

</div>

</body>

</html>

CSS

*.left-marginal { position:relative;margin-left:200px;}

*.marginal-heading { position:absolute;left:-200px;top:0px;margin:0px;}

5、Marginal Graphic Dropcap 旁注图片下沉

是将一个或多个元素移动到块级元素的左边。

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<title>Left Marginal</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="site.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="page.css"   media="all"    type="text/css" />

<link rel="stylesheet" href="print.css"  media="print"  type="text/css" />

<!--[if lte IE 6]>

<link rel="stylesheet" href="ie6.css"    media="all"    type="text/css" />

<![endif]-->

</head>

<body>

<h1>Marginal Graphic Dropcap</h1>

<p class="indent">

<span class="graphic-dropcap">

M

<span></span>

</span>

arginal Graphic Dropcap.The letter M has been covered by the dropcap image.

Screen readers read the text and visual users see the image.

If the browser cannot display the dropcap image,

the text becomes visible.

</p>

</body>

</html>

CSS

*.indent {

position: relative;margin-left: 120px;

} 祖元素

*.graphic-dropcap{

position: absolute;width:120px;height:90px;left:-120px;top:0px;

}

*.graphic-dropcap span { position:absolute;width:120px;height:90px;margin:0px;left:0px;top:0px;

background:url("m.jpg") no-repeat;

}

CSS 设计模式一 元素的更多相关文章

  1. CSS设计模式之三权分立模式篇

    分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/separation-of-powers-model-in-css-design-p ...

  2. CSS设计模式之三权分立模式篇 ( 转)

    转自 海玉的博客 市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容, ...

  3. css盒模型与bfc与布局与垂直水平居中与css设计模式等

    一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...

  4. CSS设计模式介绍

    一. 常见CSS设计模式分析 oocss Object Oriented CSS,面向对象的CSS,旨在编写高可复用.低耦合和高扩展的CSS代码. OOCSS是以面向对象的思想去定义样式,将抽象(结构 ...

  5. 通过CSS设计模式搭建自己系统的CSS架构

    theme: qklhk-chocolate 传统的CSS书写风格是随意命名,堆叠样式,造成了混乱不堪的结果,复杂页面的样式书写通常会出现几百行甚至上千行的代码,CSS设计模式在实际应用中的横空出世拯 ...

  6. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  7. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  8. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  9. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

随机推荐

  1. SQL自连接（源于推荐算法中的反查表问题）

    ”基于用户的协同过滤算法“是推荐算法的一种,这类算法强调的是:把和你有相似爱好的其他的用户的物品推荐给你. 要实现该推荐算法,就需要计算和你有交集的用户,这就要用到物品到用户的反查表. 先举个例子说明 ...

  2. 自己手动绿色化MyEclipse

    绿化过程因每个人的文件存放路径不同而不同 首先打开你解压的MyEclipse文件,或者以前安装的MyEclipse重装系统后不能用,打开到这里:记住路径,比如我的是:D:\MyEclipse 我们打开 ...

  3. cas+tomcat+shiro实现单点登录-2-部署cas server到tomcat

    目录 1.tomcat添加https安全协议 2.下载cas server端部署到tomcat上 3.CAS服务器深入配置(连接MYSQL) 4.Apache Shiro 集成Cas作为cas cli ...

  4. c++ 链表删除重复的数据

    //List.h #include <iostream> typedef int dataType; struct Node{ Node():data(),pNextNode(NULL){ ...

  5. LLVM对注释的新增支持 @ WWDC 2013

    很久之前我就在想:“我应该按照什么格式写注释,才能像Apple官方API那样按住Option键并点击函数名可以跳出文档说明”,如下图: 我理所当然地认为这个功能应该是根据现有注释的格式来进行排版的,于 ...

  6. C语言初学 数学中带根号的复杂计算问题

    #include<stdio.h> #include<math.h> int main() { double a,b; scanf("%lf%lf",&am ...

  7. 背包问题lingo求解

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang !背包问题 题目: 8件物品   重量分别为 1,3,4,3,3,1,5,10 价值分别为 2,9 ...

  8. Light OJ 1314 Names for Babies

    http://www.lightoj.com/volume_showproblem.php?problem=1314 题意:给定一个串和p,q,求长度在p到q之间的子串有几种 思路:后缀数组,对于每个 ...

  9. [LeetCode 121] - 买入与卖出股票的最佳时机(Best Time to Buy and Sell Stock)

    问题 假设你有一个数组,其中的第i个元素表示一只股票在第i天的价格. 如果只允许你完成一次交易(即买入并卖出股票一次),设计一个找出最大利润的算法. 初始思路 和122一样,基于买入与卖出股票的最佳时 ...

  10. 递归转手工栈处理的一般式[C语言]

    是任意形式的递归,是化解的一般式. 主题所谓的“递归调用化解为栈处理”,意思是,将递归函数调用化解为“一个由stack_push stack_pop stack_top等函数调用组成的循环式子”.这里 ...