CSS 设计模式一 元素
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 设计模式一 元素的更多相关文章
- 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的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
随机推荐
- oracle开机自启动-超简单
1. 在/etc/oratab中作如下修改$ORACLE_SID:$ORACLE_HOME:Y例如vi /etc/orataborcl:/u01/app/oracle/product/10.2.0/d ...
- SignalR2.0开发实例之——设置时间、后台其他地方使用集线器、使用自己的连接ID
一.连接的生命周期设置: 如下: // 该值表示连接在超时之前保持打开状态的时间长度. //默认为110秒 GlobalHost.Configuration.ConnectionTimeout = T ...
- Sql Server导出表结构Excel
SELECT 表名 Then D.name Else '' End, 表说明 Then isnull(F.value,'') Else '' End, 字段序号 = A.colorder, 字段名 = ...
- PL/SQL Developer主界面窗口左边窗口默认设置
中文版:在菜单 工具 -> 首选项 -> 用户界面 -> 选项 窗口中,将“自动保存桌面”勾选上就可以了. 截图如下: 英文版:在菜单 Tools -> Preferences ...
- jquery实现复选框全选反选
实现原理: 给所有的复选框取相同的名字,当点击全选的时候把chenked属性全部设置为true;当点击全不选的时候把checked属性设置为false; 源代码如下: html代码: <form ...
- virtual pc中添加软盘支持
最近对操作系统挺有兴趣的,实验了一下!准备找一个虚拟机,之前在xp上使用virtual pc感觉不错,准备在本机上装一下,但是发现居然不支持软盘了! 查阅了各种资料,终于找到了解决的办法. 1. 下载 ...
- C程序设计语言练习题1-6
练习1-6 验证表达式getchar() != EOF的值是0还是1. 代码如下: #include <stdio.h> // 包含标准库的信息. int main() // 定义名为ma ...
- 关于取url或者微信中参数的js
今天遇到这么个情况,因为是第一次弄,所以在这里做了个记录,因为要弄过二维码的功能,要获取里面的参数并传给后台,所以要对二维码里面的地址进行过滤.刚开始是很惆怅的,因为之前没弄过,原以为可以通过spli ...
- shell下 使用心得
打印时间的命令 date +'%F %k:%M:%d' crontab启动计划任务,注意两件事情: 1)crontab里启动的脚本,如果需要读取文件,需要使用绝对路径,或者在脚本里cd到目录所在的绝对 ...
- Eclipse快捷键集结
Debug快捷键 F5单步调试进入函数内部. F6单步调试不进入函数内部,如果装了金山词霸2006则要把“取词开关”的快捷键改成其他的. F7由函数内部返回到调用处. F8一直执行到下一个 ...