CSS 设计模式一元素

1、background 内置

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

HTML

<!DOCTYPE html>

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

<!--[if lte IE 6]>

<![endif]-->

</head>

<body>

<h1>Background Image</h1>

</body>

</html>

CSS

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

2、Absolute 绝对定位

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

HTML

<!DOCTYPE html>

<head><title>Absolute</title>

<!--[if lte IE 6]>

<![endif]-->

</head>

<body>

<h1>Absolute</h1>

<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>

<head>

<title>Text Replacement</title>

<!--[if lte IE 6]>

<![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>

<head>

<title>Left Marginal</title>

<!--[if lte IE 6]>

<![endif]-->

</head>

<body>

<h1>Left Marginal</h1>

<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>

<head>

<title>Left Marginal</title>

<!--[if lte IE 6]>

<![endif]-->

</head>

<body>

<h1>Marginal Graphic Dropcap</h1>

</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 设计模式一元素的更多相关文章

CSS设计模式之三权分立模式篇
分类: Html/CSS | 转载请注明: 出自海玉的博客本文地址: http://www.hicss.net/separation-of-powers-model-in-css-design-p ...
CSS设计模式之三权分立模式篇 ( 转)
转自海玉的博客市面上我们常常会看到各种各样的设计模式书籍,Java设计模式.C#设计模式.Ruby设计模式等等.在众多的语言设计模式中我唯独找不到关于CSS设计模式的资料,即使在网上找到类似内容, ...
css盒模型与bfc与布局与垂直水平居中与css设计模式等
一.css盒子与布局相关盒子内部的布局盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布 ...
CSS设计模式介绍
一. 常见CSS设计模式分析 oocss Object Oriented CSS,面向对象的CSS,旨在编写高可复用.低耦合和高扩展的CSS代码. OOCSS是以面向对象的思想去定义样式,将抽象(结构 ...
通过CSS设计模式搭建自己系统的CSS架构
theme: qklhk-chocolate 传统的CSS书写风格是随意命名,堆叠样式,造成了混乱不堪的结果,复杂页面的样式书写通常会出现几百行甚至上千行的代码,CSS设计模式在实际应用中的横空出世拯 ...
浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
CSS的伪元素（二）
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

随机推荐

poj2486
题目大意:给出一个树,每个节点有一个值,问从1开始走走k步最多能遍历到最大的值的和:dp[i][j][k] 当i为零是表示如果从j点开始遍历以j为跟的子树,走k步后回到原点的最大值.dp[i][j][ ...
C/C++中虚函数的调用
代码: #include <iostream> using namespace std; class A{ public: virtual void print(){ cout<&l ...
copy-on-write(写时拷贝技术)
今天看<Unix环境高级编程>的fork函数与vfork函数时,看见一个copy-on-write的名词,貌似以前也经常听见别人说过这个,但也一直不明白这究竟是什么东西.所以就好好在网上了 ...
HDU4545+计算日期
/* 计算过了D天后的日期之前D天的日期 */ #include<stdio.h> int judge_year( int year ){ if( (year%4==0&& ...
u盘禁用
Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\services\USBSTOR]" ...
Android再学习-便签开发小结-20141119
这几天的便签开发,首先遇到的问题就是数据库操作问题.现在已经可以读写数据库了,并能将数据放在正确的位置显示. 专门建立了一个数据库操作的包,命名为"...database".新建一 ...
解决IE10以下对象不支持“bind”属性或方法
IE10一下的浏览器,如果在JS代码中用了bind函数,那么就会报“SCRIPT438: 对象不支持“bind”属性或方法” 因为浏览器没有提供这个参数的方法,所以我们就自己写一个bind,来让这个参 ...
《VIM-Adventures攻略》 LEVEL 1-3
此文已转至http://cn.abnerchou.me/2014/03/04/e40e2146/ 上期有人提到此游戏烂尾.其实没有啦,作者是位"贪财"的主,不付费不给玩剩下的章节. ...
hdu 1301 Jungle Roads
http://acm.hdu.edu.cn/showproblem.php?pid=1301 #include <cstdio> #include <cstring> #inc ...
windows driver inf文件
原来修改了inf文件会导致签名过的驱动包哈希值不正确了啊.现在才知道. = = http://www.chiphell.com/thread-827956-1-1.html

CSS 设计模式一 元素

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

随机推荐

热门专题

CSS 设计模式一元素

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