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;
?}
?
?
轉載于:https://www.cnblogs.com/zorro8z8/p/3543740.html
總結
以上是生活随笔為你收集整理的CSS 设计模式一 元素的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QTP之对测试用例的自动化过程的分解
- 下一篇： 【转载】MySQL Show命令总结