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;

}

转载于:https://www.cnblogs.com/zorro8z8/p/3543740.html

CSS 设计模式一元素相关推荐

css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
ASP.NET MVC使用Bootstrap系统（2）——使用Bootstrap CSS和HTML元素
ASP.NET MVC使用Bootstrap系统(2)--使用Bootstrap CSS和HTML元素阅读目录 Bootstrap 栅格(Grid)系统 Bootstrap HTML元素 Boots ...
PHP框架半透明,CSS设定一个元素半透明
这篇文章主要介绍了用CSS设定一个元素半透明的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧.opacity{ filter:alpha(opacity=50); /* IE */ -moz ...
amazeui学习笔记--css（HTML元素2）--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
为什么CSS使用假元素？
本文翻译自:Why does CSS work with fake elements? In my class, I was playing around and found out that CSS ...
amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
HTML中通过CSS方式隐藏元素
HTML中通过CSS方式隐藏元素 1.通过style属性中的 display : none (这种是最常用方式之一 ). display : none 这两种方式的区别是: display 设置为 n ...
触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...

CSS 设计模式一元素

CSS 设计模式一元素相关推荐

最新文章

热门文章

CSS 设计模式一 元素

CSS 设计模式一 元素相关推荐

最新文章

热门文章

CSS 设计模式一元素

CSS 设计模式一元素相关推荐