css图片样式
第6章 用CSS设置图片样式
用CSS设置图片样式在网页中插入图片：在标准XHTML文档中嵌入图片的方式和传统的HTML嵌入图片的方式一样，都是使用img标签。
使用img标签嵌入图片的语法：<img src=”picture.jpg” />其中，src属性是指要插入的图片所在文件夹的位置，可以是相对地址，也可以是绝对地址。
控制图片的大小：CSS提供的width和height属性用于控制图片的宽度和高度。
使用width和height属性的语法：width:picwidth;height:picheigth;其中，picwidth和picheight可以用任何长度单位进行设置。
通常情况下使用像素为单位。
使用像素控制图片宽高：img{width:150px;height:150px;} /*设置图片宽为150像素，高为150像素*/使用百分比控制图片宽高：img{width:50%,height:50%;} /*使用百分比设置图片宽高。
*/单独设置图片的宽度或高度：单独设置图片的宽度后，图片就按照宽度缩放，而高度是按照宽度的缩放比例自动变化。
整张图片在缩放后比例不变。
单独设置图片的高度，得到的结果也一样。
如：img{width:200px;} /*设置图片的宽度为200像素*/img{height:200px;} /*设置图片的高度为200像素*/给图片添加边框：为放置在网页上的图片增加边框可以使图片的边界清晰，排布整齐，也可使图片更美观。
CSS提供的border属性为图片添加边框。
使用border属性的语法：border-width:width; /*设置边框的宽度*/border-style:style; /*设置边框的样式*/border-color:color; /*设置边框的颜色*/其中border-width是指边框的宽度，width可以用任何长度单位设置；border-style是指边框的样式，style指的是设置边框样式；border-color是指边框的颜色，color可以用任何颜色单位设置。
css background用法和搭配
css background用法和搭配
CSS的background属性用于设置元素的背景样式。
通过background属性，可以设置元素的背景颜色、图片、重复方式、位置等属性。
以下是一些常用的background属性值及其搭配方式：
1. background-color：设置元素的背景颜色。
示例：background-color: #F5F5F5;（设置背景颜色为浅灰色）
2. background-image：设置元素的背景图片。
示例：background-image: url("image.jpg");（设置背景图片为名为image.jpg 的图片）
3. background-repeat：设置背景图片的重复方式。
示例：background-repeat: no-repeat;（设置背景图片不重复）
4. background-position：设置背景图片的位置。
示例：background-position: center;（将背景图片居中显示）
5. background-size：设置背景图片的大小。
示例：background-size: cover;（将背景图片拉伸以填满整个元素）
6. background-attachment：设置背景图片是否随元素滚动而滚动。
示例：background-attachment: fixed;（固定背景图片，不随元素滚动）
通过组合使用不同的background属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
css 常用格式化样式
css常用格式化样式CSS（层叠样式表）用于设计和格式化网页的外观和样式。
下面是一些常用的格式化样式：1.文本格式化：●修改字体：font-family:Arial,sans-serif;●修改字体大小：font-size:16px;●修改字体粗细：font-weight:bold;●修改字体颜色：color:#333;●修改行高：line-height:1.5;●修改文字对齐方式：text-align:center;2.盒子模型格式化：●修改元素的宽度和高度：width:200px;height:100px;●设置边框：border:1px solid#ccc;●设置内边距：padding:10px;●设置外边距：margin:20px;●设置元素的背景颜色：background-color:#f5f5f5;3.背景格式化：●设置背景图片：background-image:url('example.jpg');●背景图片重复方式：background-repeat:no-repeat;●背景图片位置：background-position:center center;●背景图片大小：background-size:cover;4.元素定位：●设置元素相对定位：position:relative;●设置元素绝对定位：position:absolute;●元素位置：top:50px;left:20px;5.清除浮动：●清除浮动：.clearfix::after{content:"";display:table;clear:both;}6.响应式设计：●媒体查询：@media screen and(max-width:600px){在小屏幕下的样式body{font-size:14px;}}这些是一些常见的CSS格式化样式，用于调整文本、盒子模型、背景、定位和响应式设计等方面的样式。
css3设置背景样式的典型案例
css3设置背景样式的典型案例CSS3 提供了丰富多彩的背景样式设置，下面我将从多个角度为你介绍一些典型的案例。
1. 背景颜色设置：使用CSS3可以轻松地设置元素的背景颜色，例如：css..example {。
background-color: #ff0000; / 设置背景颜色为红色/。
}。
2. 背景图片设置：通过CSS3可以添加背景图片到元素中，例如：css..example {。
background-image: url('example.jpg'); / 设置背景图片为example.jpg /。
}。
3. 背景重复设置：可以使用CSS3控制背景图片的重复方式，例如：css..example {。
background-repeat: no-repeat; / 设置背景图片不重复 /。
}。
4. 背景定位设置：通过CSS3可以调整背景图片的位置，例如：css..example {。
background-position: center; / 设置背景图片居中显示 /。
}。
5. 背景大小设置：可以使用CSS3控制背景图片的大小，例如：css..example {。
background-size: cover; / 设置背景图片以尽可能大的尺寸覆盖元素 /。
}。
6. 渐变背景设置：CSS3还支持渐变背景效果，例如：css..example {。
background: linear-gradient(to bottom, #ff0000, #0000ff); / 设置垂直渐变背景 /。
}。
以上是一些典型的CSS3背景样式设置案例，通过合理运用这些属性，可以实现丰富多彩的页面背景效果。
希望这些例子能够帮助到你。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
image 标签 css 写法
文章标题：深度解析image标签在CSS中的写法方法1. 引言在网页设计与开发中，image标签是常见的HTML元素之一，而通过CSS来控制image标签的样式也是非常重要的。
本文将深入探讨image标签在CSS中的写法方法，以帮助读者更好地理解和运用这一技术。
2. image标签的基本属性image标签是HTML中的一种基本元素，用于在网页上显示图片。
通过指定src属性来指定图片的位置区域，alt属性来指定图片的替代文本，title属性来指定图片的标题等。
在CSS中，我们可以通过一系列属性来控制image标签的样式，包括宽高、边框、背景等。
3. 基本的CSS写法在CSS中，我们可以使用image标签的选择器来定义样式，例如：```img {width: 100px;height: 100px;border: 1px solid #ccc;}上面的代码定义了image标签的宽高和边框样式。
这种基本的CSS写法可以满足一些简单的样式需求，但在实际开发中，我们通常需要更加灵活和复杂的样式控制。
4. CSS高级写法除了基本的宽高和边框样式之外，我们还可以使用CSS3提供的一些新特性来控制image标签的样式，例如圆角、阴影、变形等。
例如：```img {width: 100px;height: 100px;border-radius: 50%;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);transform: rotate(45deg);}```上面的代码使用了border-radius属性来定义圆角样式，box-shadow属性来定义阴影样式，transform属性来定义变形样式。
这种高级的CSS写法可以让我们实现更加丰富和炫酷的样式效果。
5. 响应式设计在移动设备和桌面设备上，我们通常需要对image标签的样式进行不同的调整，以适应不同的屏幕大小和分辨率。
这时，我们可以使用媒体查询来实现响应式设计。
css样式大全(整理版)
字体属性：(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位：PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block) /*这个属性第一次认识，要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color; /*简写*/列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit| narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub| super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|gro ove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-a lpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-re size|se-resize|sw-resize}。
使用CSS设置背景图片，图片比较大，完全显示在一个DIV中
使⽤CSS设置背景图⽚，图⽚⽐较⼤，完全显⽰在⼀个DIV中做的时候想要边框为⽐较好看的样式，需要UI切图并且放在div中，看起来会好看点像这样的，我随便挑选了⼀个，UI帮我切图出来需要把这个图⽚填到相应的div⾥⾯，但是很显然碰到⼀个问题，图⽚太⼤，⽽且放进去以后还不是响应式的那么解决问题的就来了：background:url(1.jpg);-webkit-background-size: 100px 60px;这样还不是响应式应该怎么办呢IMG加载的图⽚width设置为100%，⾼度会按照width的值⾃动等⽐率缩放背景图⽚⽤background-size 属性来控制缩放background:#00ff00 url(img.jpg) no-repeat;background-size:60% 80%;-moz-background-size:60% 80%;-webkit-background-size:60% 80%;-o-background-size:60% 80%;我当时写的是-webkit-background-size:100% 100%;就完成相要的效果了再放上相关的响应式图像<img src="..." class="img-responsive" alt="响应式图像">通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的⽀持更友好。
接下来让我们看下这个 class 包含了哪些 css 属性。
在下⾯的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按⽐例缩放，不超过其⽗元素的尺⼨。
.img-responsive {display: inline-block;height: auto;max-width: 100%;}这表明相关的图像呈现为 inline-block。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
CSS中的Img样式
CSS中的Img样式分类：CSS2011-08-17 17:17 31人阅读评论(0) 收藏举报一、基础代码<IMG src="/picture/css20080501.jpg" width=224>二、加边框1、普通黑色边框（浏览器默认黑色）<img src="/picture/css20080501.jpg" width=224 border=12>2、简单的CSS装饰框①<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 solid">②<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dashed">③<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 dotted">④<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 double">⑤<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 groove">⑥<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 ridge">⑦<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 inset">⑧<img src="/picture/css20080501.jpg" width=224 style="border:12px #987cb9 outset"> ①②③④⑤⑥⑦⑧三、加CSS滤镜1、无参数滤镜①黑白<IMG style="FILTER: gray()" src="/picture/css20080501.jpg" width=224>②底片<IMG style="FILTER: xray()" src="/picture/css20080501.jpg" width=224>③X光片<IMG style="FILTER: invert()" src="/picture/css20080501.jpg" width=224>④水平翻转<IMG style="FILTER: fliph()" src="/picture/css20080501.jpg" width=224>⑤垂直翻转<IMG style="FILTER: flipv()" src="/picture/css20080501.jpg" width=224>①②③④⑤2、透明效果（opacity=100 透明度0—100）①<IMG style="FILTER: Alpha(opacity=100,style=1)" src="/picture/css20080501.jpg"width=224>②<IMG style="FILTER: Alpha(opacity=100,style=2)" src="/picture/css20080501.jpg" width=224>③<IMG style="FILTER: Alpha(opacity=100,style=3)" src="/picture/css20080501.jpg" width=224>④<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)"src="/picture/css20080501.jpg" width=224>①②③④3、其他特效①浮雕<IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()"src="/picture/css20080501.jpg" width=224>②波纹<IMG style="FILTER:progid:DXImageTransform.Microsoft.Wave()"src="/picture/css20080501.jpg" width=224><IMG style="FILTER:Wave(Add=0,Freq=5,LightStrength=10,Phase=2,Strength=20)"src="/picture/css20080501.jpg" width=224>（Add=是否打乱1或0；Freq=频率；LightStrength=光效强度；Phase=偏移量；Strength=振幅）③模糊<IMG style="FILTER:progid:DXImageTransform.Microsoft.Blur()"src="/picture/css20080501.jpg" width=224><IMG style="FILTER:Blur(Add=1,Direction=45,Strength=150)"src="/picture/css20080501.jpg" width=224>（Add=是否模糊1或0；Direction=方向；Strength=强度）④发光<IMG style="FILTER:progid:DXImageTransform.Microsoft.Glow()"src="/picture/css20080501.jpg" width=224><IMGstyle="FILTER:progid:DXImageTransform.Microsoft.Glow(Color=#987cb9,Strength=10)"src="/picture/css20080501.jpg" width=224>（Color=颜色；Strength=强度）⑤阴影<IMG style="FILTER:progid:DXImageTransform.Microsoft.Shadow()"src="/picture/css20080501.jpg" width=224><IMGstyle="FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#987cb9,Direction=1 35,Strength=10)" src="/picture/css20080501.jpg" width=224>（Color=颜色；Direction=方向；Strength=强度）⑥投影<IMG style="FILTER:progid:DXImageTransform.Microsoft.DropShadow()"src="/picture/css20080501.jpg" width=224><IMGstyle="FILTER:progid:DXImageTransform.Microsoft.DropShadow(Color=#987cb9,Offx=1 0,Offy=5,Positive=1)" src="/picture/css20080501.jpg" width=224>（Color=颜色；offx=横向位移；offy=纵向位移；Positive=非透明或透明像素建立可见投影1或0）⑦镂空<IMG style="FILTER: Mask()" src="/picture/css20080501.jpg">原图对照图(在上面,看不到哦)四、图片定位（align=right图片居右hspace水平间距vspace垂直间距）<img src="/picture/css20080501.jpg" width=224 align=right hspace="5" vspace="5"> 五、添加图片说明<img src="/picture/css20080501.jpg" width=224 alt="原来你也在这里">。
css样式之background详解（格子效果）
css样式之background详解（格⼦效果）background⽤法详解：1、background-color 属性设置元素的背景颜⾊可能的值color_name 规定颜⾊值为颜⾊名称的背景颜⾊（⽐如 red）hex_number 规定颜⾊值为⼗六进制值的背景颜⾊（⽐如 #ff0000）rgb_number 规定颜⾊值为 rgb 代码的背景颜⾊（⽐如 rgb(255,0,0)transparent 默认背景颜⾊为透明2、background-image 属性设置元素的背景图⽚可能的值单个背景图⽚：background-image:url(a.png)多个背景图⽚：background-image:url(a.png),url(b.png)线性渐变：background-image:-webkit（-repeating）-linear-gradient(⽅向,颜⾊值像素或百分⽐,颜⾊值像素或百分⽐...)⽅向:left,right,top,bottom,90deg,180deg颜⾊值像素或百分⽐:yellow 10%,transparent 4px,rgb(0,0,0) 2px径向渐变：background-image:-webkit（-repeating）-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)<bg-position>:默认为center<shape>:circle,ellipse<size>:closest-side,farthest-side,closest-corner,farthest-corner,contain or cover3、background-size 属性⽤来重设背景图⽚⼤⼩contain：缩⼩背景图⽚使其适应标签元素cover ：背景图⽚放⼤延伸到整个标签元素⼤⼩像素：标明背景图⽚缩放的尺⼨⼤⼩百分⽐：百分⽐是根据内容标签元素⼤⼩，来缩放图⽚的尺⼨⼤⼩4、background-position 属性⽤来设置背景图⽚位置可能的值：left,right,top,bottom,center,像素,百分⽐5、background-repeat 属性⽤来设置背景图⽚位置可能的值：repeat,repeat-x,repeat-y,no-repeat,space(不会被裁剪或改变⼤⼩),round(不会被裁剪但是会改变图像⼤⼩)6、background-attachment 属性⽤来设置背景图⽚是否可以滚动可能的值：scroll，fixed7、background-clip 属性⽤来规定背景的绘制区域可能的值：border-box,padding-box,content-box8、background-origin 属性⽤来规定 background-position 属性相对于什么位置来定位可能的值：border-box,padding-box,content-box扩展：绘制⽅格html代码<div>使⽤背景绘制⽅格，使每个⽂字都在⽅格⾥，效果图如下。
四个漂亮CSS样式表
四个漂亮CSS 样式表1. 单像素的边框CSS 表格这是⼀个⾮常所⽤的表格风格。
源码：border-width: 1px;padding: 8px; border-style: solid;border-color: #666666; background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px; border-style: solid;border-color: #666666; background-color: #ffffff;}</style><!-- Table goes in the document BODY --><table class="gridtable"></table>2. 带背景图的CSS 样式表格和上⾯差点⼉相同，只是每⼀个格⼦⾥多了背景图。
cell-blue.jpgcell-grey.jpg 1. 下载上⾯两张图，命名为cell-blue.jpg 和cell-grey.jpg 2. 拷贝以下的代码到你想要的地⽅。
记得改动图⽚url }table.imagetable th { background:#b5cfd2 url('cell-blue.jpg');border-width: 1px;padding: 8px; border-style: solid;border-color: #999999;}table.imagetable td {<tr> <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th></tr>3. ⾃⼰主动换整⾏颜⾊的CSS 样式表格（须要⽤到JS ）这个CSS 样式表格⾃⼰主动切换每⼀⾏的颜⾊，在我们须要频繁更新⼀个⼤表格的时候⾮常实⽤。
第7章用CSS设置图像和圆角
没有控制大小之前
控制大小之后的效果
7.2.9 设置标题的图像替换
使用背景图像的方式替换标题。
制作一个标题背景图像
图像替换的最终效果
7.3 设置圆角效果
在网页设计中，通常需要把网页分为若干个部分，这正是CSS的强 项。使用CSS可以方便地使用各种手段把页面灵活地分为多个部分。但 是简单分割出来的都是矩形方框，设置背景颜色和边框的颜色，产生的 都只能是单调的矩形方框。而在网页中，经常需要用到圆角的设计。本 章专门对圆角的设计进行介绍。
边框背景图像
圆角效果的选项卡
7.1.5 图片缩放
CSS控制图片的大小与HTML一样，也是通过width和height两 个属性来实现的。所不同的是CSS中可以使用更多的值，如上一章 中“文字大小”一节提到的相对值和绝对值等。
7.1.6 图文混排
Word中文字与图片有很多排版的方式，在网页中同样可以通 过CSS设置实现各种图文混排的效果。本节介绍CSS图文混排的具 体方法。
网页的初始效果
设置标题“绿底白字”效果
7.2.2 设置背景图像
背景不仅可以设置为某种颜色，CSS中还可以用图像作为网页元素 的背景，而且用途极为广泛。
设置背景图像，使用background-image属性实现。
准备一个背景图像文件
页面的body元素设置了背景图像后的效果
7.2.3 设置背景图像平铺
当图片与文字同时出现在页面上的时候，图片的对齐方式就 显得很重要了。如何能够合理地将图片对齐到理想的位置，成为 页面是否整体协调、统一的重要因素。
1．横向对齐方式 2．纵向对齐方式
水平对齐
图像与文字中间对齐
7.2 用CSS设置背景样式
本节首先要介绍颜色的多种设置方法，之后介绍如何设置网 页和文字的背景颜色，以及多种背景图片样式的设置方法。
前端邮票css样式的写法
前端邮票css样式的写法在前端开发中，邮票样式的实现通常需要使用CSS来进行设计。
邮票样式的写法可以通过以下几种方式来实现：1. 使用背景图片，可以使用CSS的background属性来设置一个邮票的背景图片。
首先需要准备一张具有邮票样式的图片，然后通过CSS设置该图片作为元素的背景，可以使用background-image属性来指定图片的路径，同时可以使用background-size属性来控制图片的大小，以及background-position属性来控制图片的位置。
css..stamp {。
background-image: url('stamp.png');background-size: contain;background-position: center;width: 100px;height: 100px;}。
2. 使用CSS3的边框样式，CSS3提供了丰富的边框样式，可以通过border-radius属性来设置圆角边框，通过box-shadow属性来设置阴影效果，这些属性可以结合使用来实现邮票样式的效果。
css..stamp {。
width: 100px;height: 100px;border: 2px solid #000;border-radius: 10px;box-shadow: 2px 2px 5px #888888;}。
3. 使用伪元素::before和::after，可以使用CSS的伪元素来创建额外的元素，通过设置它们的样式来实现邮票样式的效果。
css..stamp {。
position: relative;width: 100px;height: 100px;}。
.stamp::before {。
content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border: 2px solid #000; border-radius: 10px;}。
css特效大全
css特效大全CSS特效大全。
CSS（Cascading Style Sheets）是一种用于描述文档样式的样式表语言，它负责网页的布局、字体、颜色、背景以及其他效果的呈现。
在网页设计中，CSS特效可以为网页增添视觉效果，提升用户体验。
本文将介绍一些常见的CSS特效，帮助你为网页增添一些炫酷的效果。
1. 悬停效果。
悬停效果是网页设计中常见的特效之一，通过CSS可以实现鼠标悬停在元素上时产生的效果。
比如，当鼠标悬停在按钮上时，按钮的颜色或背景可以发生变化，给用户一种交互式的感觉。
2. 过渡效果。
过渡效果可以让元素的属性在一段时间内平滑地过渡到另一个值，而不是立即改变。
这样的效果可以使页面的变化更加柔和，给用户一种流畅的感觉。
比如，可以通过CSS实现按钮颜色在悬停时渐变的效果。
3. 动画效果。
CSS3提供了丰富的动画效果，可以通过关键帧动画（keyframes）来实现元素的动态效果。
比如，可以实现旋转、缩放、淡入淡出等动画效果，为网页增添活力。
4. 响应式布局。
响应式布局是指网页能够根据不同设备的屏幕尺寸和方向进行自适应布局。
通过CSS媒体查询（media queries），可以根据设备的特性来应用不同的样式，使网页在不同设备上都能有良好的显示效果。
5. 阴影效果。
CSS可以实现元素的阴影效果，比如文字阴影、盒子阴影等。
阴影效果可以使元素在页面上更加突出，增强立体感和层次感。
6. 边框效果。
通过CSS可以实现各种形式的边框效果，比如圆角边框、虚线边框、阴影边框等。
这些边框效果可以使页面元素更加美观、丰富多彩。
7. 渐变效果。
CSS3提供了线性渐变和径向渐变两种渐变效果，可以实现元素背景的平滑过渡。
渐变效果可以使页面看起来更加柔和、自然。
8. 字体效果。
通过CSS可以实现各种字体效果，比如文字阴影、文字描边、文字渐变等。
这些效果可以使页面的文字更加生动、有趣。
9. 布局效果。
CSS可以实现各种布局效果，比如多列布局、居中布局、浮动布局等。
CSS常用样式–背景属性
CSS常⽤样式–背景属性⼀、背景颜⾊ background-color属性名：background-color作⽤：在盒⼦区域添加背景颜⾊的修饰加载区域：在 border 及以内加载背景颜⾊属性值：颜⾊名、颜⾊值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;background-color: slateblue;}</style></head><body><div class="box"> 背景颜⾊ </div></body></html>⼆、背景图⽚ background-image属性名：background-image作⽤：给盒⼦添加图⽚的背景修饰加载范围：默认的加载到边框及以内部分。
后期如果图⽚不重复加载，加载从 border 以内开始属性值：url(图⽚路径)url：uniform resource locator，统⼀资源定位符，⼩括号内部书写查找图⽚的路径.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagouwang.jpg);}如果图⽚不重复，从 border 以内开始加载背景图和背景颜⾊可以同时设置，背景图会压盖背景颜⾊，没有背景图的区域会显⽰背景颜⾊三、背景重复 background-repeat属性名：background-repeat作⽤：设置添加的背景图是否要在盒⼦中重复进⾏加载根据属性值不同，有四种重复加载⽅式| 属性值 | 作⽤ || repeat | 重复，默认属性值，表⽰会使⽤背景图⽚重复加载填满整个盒⼦背景区域 || no-r epeat | 不重复，不论背景图是否⼤于盒⼦范围，都只加载⼀次图⽚ || repeat--x | ⽔平重复，使⽤背景图⽚⽔平重复加载铺满第⼀⾏，垂直⽅向不重复 || repeat--y | 垂直重复，使⽤背景图⽚垂直重复加载铺满第⼀列，⽔平⽅向不重复 |.box {width: 200px;height: 200px;padding: 30px;border: 5px dashed red;margin: 20px;/* background-color: slateblue; 背景颜⾊ */background-image: url(images/lagou_small.jpg);/* background-repeat: repeat; *//* background-repeat: no-repeat; *//* background-repeat: repeat-x; */background-repeat: repeat-y;}四、背景定位 background-position属性名：background-position作⽤：主要⽤于设置不重复的图⽚在背景区域的加载开始位置属性值：分为三种写法，单词表⽰法、像素表⽰法、百分⽐表⽰法。
CSS样式学习之--去除按钮、输入框、图形,图片按钮等点击时外边框
CSS样式学习之--去除按钮、输入框、图形/图片按钮等点击时外边框按钮，图形/图片按钮，以及输入框，当我们点击或者输入时，都会出现一个浅蓝色的外边框。
虽然可以起到醒目的作用，但是看上去很不舒服，尤其是在背景色很明显，比如是白色，红色的时候，就显得格外碍眼。
所以，经常需要将这个浅蓝色外边框去掉，使得我们在点击和输入的时候不再出现外边框。
实现效果可以通过CSS样式添加；可以直接通过style写在标签内；还可以直接写成标签样式，以达到特定标签统一化。
.click_setting{outline:none;box-shadow: none;}style="outline:none;box-shadow: none;"button{outline:none;box-shadow: none;}CSS样式及布局标签button{ //button标签样式，对本页面所有button标签有效outline:none;box-shadow: none;}.click_setting{ //将样式写成类，则标签可以通过添加类进行样式添加outline:none;box-shadow: none;}<div><button class="button1 bu-setting" style="border: 1px solid black;">button1</button><button class="button2 bu-setting ml10">button2</button><button class="button3 bu-setting ml10">button3</button></div><div class="mt20"><input type="search" class="search" placeholder="Search..." value=""style="outline:none;box-shadow: none;"/> //以style方式直接写成内联样式</div><div class="mt20"><input type="image" src="img/search.png" class="img-w-h click_setting" alt="#" title="Search"> //以类的方式添加样式</div>其他样式类：.mt20{margin-top: 20px;}.ml10{margin-left: 10px;}.bu-setting{/*border: none;*/width: 90px;height: 34px;}.button1{color: black;background-color: #FFFFFF;}.button3{background-color:red;}.button2{background-color: #36C6D3;}.search{border: 1px solid #DBDBDB;color: black;text-align: center;width: 200px;height: 34px;border-radius: 15px;}.img-w-h{height: 28px;width: 28px;}。
css样式背景图片设置缩放
css样式背景图⽚设置缩放⼀、背景颜⾊图⽚平铺background-color 背景颜⾊background-image 背景图⽚地址background-repeat 是否平铺默认是平铺background-position 背景位置 (模式是左上⾓ 0 0) ⽅位没有顺序1.（length 长度）写精确单位或者百分⽐第⼀个值是x坐标第⼆个⼀定是y2.（position： top|center | bottom | left | right ⽅位坐标）如果⽅位名词只写⼀个另外⼀个默认为center3.混搭也okbackground-attachment 设置背景图是否固定默认是scroll, fixed是固定合写： background：背景颜⾊背景图⽚地址背景平铺背景滚动背景位置background: #000 url(image/timg.jpg) no-repeat center -25px fixed;⼆、背景缩放景缩放background-size 100px; 等⽐例缩放尽量只改⼀个值否则图⽚会是真扭曲也可以写百分⽐常⽤的两个参数：cover :会⾃动调整缩放⽐例，保证图⽚始终填充满背景区域，如有溢出⾃动隐藏contain:图⽚等⽐例缩放，如果图⽚的宽度或者⾼度有⼀个和盒⼦⼀样⼤了就不在缩放，不会有缺失的部分，保证了图⽚的完整性。
多背景图⽚设置width: 800px;height: 500px;background: url(image/harry.jpg) no-repeat left top,url(image/denglun.jpg) no-repeat right bottom purple;以逗号分隔可以设置多背景，课⽤于⾃适应布局，注意事项：1. ⼀个元素可以设置多重背景图⽚2. 每组属性间使⽤逗号分隔3. 如果设置了多重背景之间存在交集，前⾯的图⽚会覆盖在后⾯图⽚之上4. 为了避免背景⾊将图⽚覆盖，背景⾊通常定义在最后⼀组上三、⼩复习 shadow⽂字阴影和⽂本修饰凹凸⽂字效果,shadow实现div:first-child {text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;}div:last-child {text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;}⽂本修饰text-decoration:none 默认定义标准的⽂本取消⽂本装饰underline 定义⽂本下的⼀条线overline 定义⽂本上的⼀条线line-through 定义穿过⽂本下的⼀条线设置⽂字⽔平居中⼩tip设置⽂字的⾏⾼等于盒⼦的⾼度line-height: 50px;。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<html><head><title>边框</title><style><!--img.test1{border-style:dotted; /* 点画线*/border-color:#FF9900; /* 边框颜色*/ border-width:5px; /* 边框粗细*/ }img.test2{border-style:dashed; /* 虚线*/border-color:blue; /* 边框颜色*/ border-width:2px; /* 边框粗细*/ }--></style></head><body><img src="banana.jpg" class="test1"><img src="banana.jpg" class="test2"></body></html><html><head><title>图片缩放</title><style><!--img.test1{width:50%; /* 相对宽度*/}--></style></head><body><img src="pear.jpg" class="test1"></body></html><html><head><title>图文混排</title><style type="text/css"><!--body{background-color:bb0102; /* 页面背景颜色*/margin:0px;padding:0px;}img{float:left; /* 文字环绕图片*//*margin-right:50px; /* 右侧距离*//*margin-bottom:25px; /* 下端距离*/}p{color:#FFFF00; /* 文字颜色*/margin:0px;padding-top:10px;padding-left:5px;padding-right:5px;}span{float:left; /* 首字放大*/font-size:85px;font-family:黑体;margin:0px;padding-right:5px;}--></style></head><body><img src="chunjie.jpg" border="0"><p><span>春</span>节古时叫“元旦”。
“元”者始也，“旦”者晨也，“元旦”即一年的第一个早晨。
《尔雅》，对“年”的注解是：“夏曰岁，商曰祀，周曰年。
”自殷商起，把月圆缺一次为一月，初一为朔，十五为望。
每年的开始从正月朔日子夜算起，叫“元旦”或“元日”。
到了汉武帝时，由于“观象授时”的经验越来越丰富，司马迁创造了《太初历》，确定了正月为岁首，正月初一为新年。
此后，农历年的习俗就一直流传下来。
</p><p>据《诗经》记载，每到农历新年，农民喝“春酒”，祝“改岁”，尽情欢乐，庆祝一年的丰收。
到了晋朝，还增添了放爆竹的节目，即燃起堆堆烈火，将竹子放在火里烧，发出噼噼啪啪的爆竹声，使节日气氛更浓。
到了清朝，放爆竹，张灯结彩，送旧迎新的活动更加热闹了。
清代潘荣升《帝京岁时记胜》中记载：“除夕之次，夜子初交，门外宝炬争辉，玉珂竞响。
……闻爆竹声如击浪轰雷，遍于朝野，彻夜无停。
”</p><p>在我国古代的不同历史时期，春节，有着不同的含义。
在汉代，人们把二十四节气中的“立春”这一天定为春节。
南北朝时，人们则将整个春季称为春节。
1911年，辛亥革命推翻了清朝统治，为了“行夏历，所以顺农时，从西历，所以便统计”，各省都督府代表在南京召开会议，决定使用公历。
这样就把农历正月初一定为春节。
至今，人们仍沿用春节这一习惯称呼。
</p></body></html><html><head><title>八仙</title><style type="text/css"><!--body{background-color:#d8c7b4; /* 页面背景色*/}p{font-size:13px; /* 段落文字大小*/}p.title1{ /* 左侧标题*/text-decoration:underline; /* 下划线*/font-size:18px;font-weight:bold; /* 粗体*/text-align:left; /* 左对齐*/color:#59340a; /* 标题颜色*/}p.title2{ /* 右侧标题*/text-decoration:underline;font-size:18px;font-weight:bold;text-align:right;color:#59340a;}p.content{ /* 正文内容*/line-height:1.2em; /* 正文行间距*/margin:0px;}img{border:1px solid #664a2c;/* 图片边框*/}img.pic1{float:left; /* 左侧图片混排*/margin-right:10px; /* 图片右端与文字的距离*/margin-bottom:5px;}img.pic2{float:right; /* 右侧图片混排*/margin-left:10px; /* 图片左端与文字的距离*/margin-bottom:5px;}span.first{ /* 首字放大*/font-size:60px;font-family:黑体;float:left;font-weight:bold;color:#59340a; /* 首字颜色*/}--></style></head><body><img src="baall.jpg" class="pic2"><p><span class="first">八</span>仙在蓬莱阁上聚会饮酒，酒至酣时，铁拐李提议乘兴到海上一游。
衆仙齐声附合，并言定各凭道法渡海，不得乘舟。
汉锺离率先把大芭蕉扇往海里一扔，坦胸露腹仰躺在扇子上，向远处漂去。
何仙姑将荷花往水中一抛，顿时红光万道，何仙姑伫立荷花之上，随波漂游。
随后，吕洞宾、张果老、曹国舅、铁拐李、韩湘子、蓝采和也纷纷将各自宝物抛人水中，借助宝物大显神通，傲游东侮。
</p><p class="title1">汉钟离</p><img src="ba1.jpg" class="pic1"><p class="content">元代全真教奉为“正阳祖师”，北五祖之一。
其说始於五代、宋初。
相传姓锺离名权，号“正阳子”，又号“云房先生”。
《列仙全传》说：锺离权，燕台人，号云房先生，为汉朝大将，在征讨吐蕃中，被上司粱翼妒嫉，只配给他老弱残兵三万人，刚到达目的地就被吐蕃军劫营，军士落荒而逃。
锺离权也逃至一山谷，而且中途还迷路了。
可是“吉人自有天相”，遇上一胡僧，将他带至一小村庄说：“这是东华先生的住处。
”然后告别而去。
过了一会儿，忽听有人说：“这必定是那碧眼的胡人多嘴的缘故。
”见一老人披着白色的鹿裘，扶着青色的藜杖，问锺离汉道：“来者可是汉大将军锺离权? 为什么不来宿於山僧之所?”锺离权大惊，知道遇上了异人，於是诚心学道，向老者哀求学习救世之道。
老者传授锺离权“长真决”，及金丹火候和青龙剑法。
锺离汉后来遇见华阳真人，又遇上仙王玄甫，学得“长生决”。
最后在崆峒山紫金四皓峰居住，得到“玉匣秘诀”，修成真仙。
玉皇大帝封他为“太极左宫真人”。
另一说锺离汉为唐朝人，与吕洞宾同时，自称“天下都散汉锺离权”，后人或以“汉”字属下读，故一称“汉锺离”。
王重阳创立全真教，奉“锺离汉”为“正阳祖师”，位列北五祖之二（王玄甫，锺离权，吕洞宾，刘操，王重阳）。
</p><p class="title2">张果老</p><img src="ba2.jpg" class="pic2"><p class="content">亦作张果。
据《唐书》记载，确有其人，本是民间的江湖术士，因民间相传逐为神仙。
居山西中条山，自言生於尧时，有长生不老之法。
唐太宗，唐高宗（武则天的丈夫）不时征召他，都被他婉拒了。
武则天也召他出山，张果老就在庙前装死，时值盛夏，不一会，他的身体腐烂发臭。
武则天听后，只好作罢。
但不久就有人在恒山的山中再次见到他。
有一次，唐玄宗去打猎，捕获一头大鹿，此鹿与寻常的鹿相比，稍有差异。
厨师刚要开刀宰鹿，张果老看见了，就连忙阻止，说“这是仙鹿，已经有一千多岁了，当初汉武帝狩猎时，我曾跟随其后，汉武帝虽然捕获了此鹿，但后来把它放生了。
”玄宗说：“天下之大，鹿多的是，时迁境异，你这么知道他就是你说的那头鹿呢? ”张果老说：“武帝放生时，用铜牌在它左角下做了标志。
”於是玄宗命人查检。
果然有一个二寸大小的铜牌，只是字迹已经模糊不清了。
玄宗又问：“汉武帝狩猎是哪年? 到现在已经有多少年了? ”张果老说：“至今有八百五十二年了。
”唐玄宗命人核对，果然无误。
张果老回山后不久就仙逝了，唐玄宗为他建“栖霞观”。
张果老有一怪癖，平日他倒骑着一头白毛驴，日能行万里，当然这驴子也是一匹“神驴”，据说不骑的时候，就可以把它折叠起来，放在皮囊里。
</p><p class="title1">韩湘子</p><img src="ba3.jpg" class="pic1"><p class="content">唐朝韩愈的侄孙子。