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

随机推荐

ORA-02095: specified initialization parameter cannot be modified
输入命令:alter system set utl_file_dir='/home/oracle/logmnr' scope=spfile; 报错: 出错原因:没有用spfile文件启动数据库解决办 ...
Dom4j 添加 / 更新 / 删除 XML
1.获得文档 /** *1.获得解析流 *2.解析XML */ 2.添加 /** *1.获取父元素 *2.创建元素 *3.创建属性并添加到元素中 *4.元素添加到根节点 */ 3.更新 /** *1. ...
phpcms v9升级后台无法上传缩略图的原因分析
phpcms V9 是目前国内使用人数最多的一款开源免费的CMS系统,正是由于他的免费性,开源性,以及其自身的功能性比较强大,所以倍受许多站长朋友们的亲来,以及许多的公司的喜欢.phpcms也为了完善 ...
Mysql中的的 Cascade ，NO ACTION ，Restrict ，SET NULL
转载自:http://blog.163.com/inflexible_simple/blog/static/1676946842011616102543931/ 外键约束对子表的含义: 如果在父 ...
Redis VS Memcached 转载
引子: 在大数据时代,总希望存在一个Key-value存储机制,像HashMap一样在内存中处理大量(千万数量级)的key-value对,以便提高数据查找.修改速度. 所以,我们会想到,Memcach ...
PHP程序员衰老后的下场
长期从事编程活动的程序员都期望在50多岁时能爬到一个足够高的职位,或者能顺利的退休. 但我在这里讨论的可能是一个你还没有想过的问题:如果到那时你失业了呢? 50多岁时你的职业仕途会成为一个问题.如果你 ...
[vim]插件ctrlp
ctrlp 这个插件可以快速搜索你的文件或者缓冲区这样很多时候都不必打开nerdtree了. 直接利用快捷键C-p打开搜索命令.
xml文件操作
public static XmlDocument getDoc(String path)//加载xml文档 { XmlDocument doc = new XmlDocument(); doc.Lo ...
layout_gravity与gravity的区别
1:android:gravity 这个是针对控件里的元素来说的,用来控制元素在该控件里的显示位置. 2:android:layout_gravity 这个是针对控件本身而言,用来控制该控件在包含该控 ...
leetcode_Search in Rotated Sorted Array II
Follow up for "Search in Rotated Sorted Array": What if duplicates are allowed? Would this ...

CSS 设计模式一 元素

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

随机推荐

热门专题

CSS 设计模式一元素

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