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;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
