河南商都建设有限公司网站,特别炫酷的网站,诚信网站的申请有几家公司可以做的,微信开发者平台登录在默认状态下#xff0c;超链接文本显示为蓝色、下画线效果#xff0c;当鼠标指针移过超链接时显示为手形#xff0c;访问过的超链接文本显示为紫色#xff1b;而列表项目默认会缩进显示#xff0c;并在左侧显示项目符号。在网页设计中#xff0c;一般可以根据需要重新定…在默认状态下超链接文本显示为蓝色、下画线效果当鼠标指针移过超链接时显示为手形访问过的超链接文本显示为紫色而列表项目默认会缩进显示并在左侧显示项目符号。在网页设计中一般可以根据需要重新定义超链接和列表的默认样式。
1、超链接样式
1.1、动态伪类
动态伪类选择器可以定义超链接的4种状态样式简单说明如下
a:link定义超链接的默认样式。a:visited定义超链接被访问后的样式。a:hover定义光标指针移过超链接时的样式。a:active定义超链接被激活时的样式。
【示例】定义页面所有超链接默认为红色下画线效果超链接被访问过之后显示为蓝色下画线效果当鼠标移过时显示为绿色下画线效果而当单击超链接时则显示为黄色下画线效果 a:link {color: #FF0000; /* 红色 */} /* 超链接默认样式 */a:visited {color: #0000FF; /* 蓝色 */} /* 超链接被访问后的样式 */a:hover {color: #00FF00; /* 绿色 */}/* 鼠标移过超链接的样式 */a:active {color: #FFFF00; /* 黄色 */}/* 超链接被激活时的样式 */提示超链接的4种状态样式的排列顺序是固定的一般不能随意调换。正确顺序是link、visited、hover和active。如果仅希望超链接显示两种状态样式使用a:link伪类定义默认样式使用a:hover伪类定义鼠标经过时的样式。
1.2、定义下画线样式
超链接文本默认显示下画线样式可以使用CSS3的text-decoration清除 a {/* 完全清除超链接的下画线效果 */text-decoration:none;}从用户体验的角度考虑在取消下画线之后应确保浏览者能够正确地识别超链接如字体加粗、变色、缩放、高亮背景等也可以设计当鼠标经过时增加下画线因为下画线具有很好的提示作用 a:hover {/* 鼠标经过时显示下画线效果 */text-decoration:underline;}下画线样式不仅仅是一条实线可以根据需要自定义设计。主要设计思路如下
借助a标签的底边框线来实现。利用背景图像来实现背景图像可以设计出更多精巧的下画线样式。
【示例1】设计当鼠标经过超链接文本时显示为下画虚线、字体加粗、色彩高亮的效果 a {/* 超链接的默认样式 */text-decoration:none; /* 清除超链接下画线 */color:#999; /* 浅灰色文字效果 */}a:hover {/*鼠标经过时样式 */border-bottom:dashed 1px red; /* 鼠标经过时显示虚下画线效果 */color:#000; /* 加重颜色显示 */font-weight:bold; /* 加粗字体显示 */zoom:1; /* 解决IE浏览器无法显示问题 */}1.3、定义特效样式
本例利用边框色的深浅模拟凸凹变化的立体效果。具体实现方法如下
设置右边框和底边框同色同时设置顶边框和左边框同色利用明暗色彩的搭配模拟立体效果。设置超链接文本的背景色为深色效果营造凸起效果当鼠标移过时再定义浅色背景营造凹下效果。
【示例】定义超链接在默认状态下显示灰色右边和底边框线、白色顶边和左边框线效果。当鼠标移过时清除右侧和底部边框线并定义左侧和顶部边框线效果 body { background:#fcc; } /* 浅色网页背景 */ul {list-style-type: none; } /* 清除项目符号 */li { margin: 0 2px; float: left;} /* 并列显示 */a {/* 超链接的默认样式 */text-decoration:none; /* 清除超链接下画线 */border:solid 1px; /* 定义1 px实线边框 */padding: 0.4em 0.8em; /* 增加超链接补白 */color: #444; /* 定义灰色字体 */background: #f99; /* 超链接背景色 */border-color: #fff #aaab9c #aaab9c #fff; /* 分配边框颜色 */zoom:1; /* 解决IE浏览器无法显示问题*/}a:hover {/* 鼠标经过时样式 */color: #800000; /* 超链接字体颜色 */background: transparent; /* 清除超链接背景色 */border-color: #aaab9c #fff #fff #aaab9c; /* 分配边框颜色 */}1.4、定义光标样式
在默认状态下鼠标指针经过超链接时显示为手形。使用CSS3的cursor属性可以改变这种默认效果cursor属性定义鼠标移过对象时的指针样式属性取值如下所示 【示例】在样式表中定义多个鼠标指针类样式然后为表格单元格应用不同的类样式 .auto { cursor: auto; }.default { cursor: default; }.none { cursor: none; }.context-menu { cursor: context-menu; }.help { cursor: help; }.pointer { cursor: pointer; }.progress { cursor: progress; }.wait { cursor: wait; }…提示使用自定义图像作为光标类型IE和Opera只支持*.cur等特定的图片格式而Firefox、Chrome和Safari既支持特定图片类型也支持常见的*.jpg、.gif、.jpg等图片格式。
cursor属性值可以是一个序列当浏览器无法处理第一个图标时它会尝试处理第二个、第三个等以此类推最后一个可以设置为通用光标。例如下面样式定义了3个自定义动画光标文件最后定义了一个通用光标类型。 a:hover { cursor:url(images/1.ani), url(images/1. cur), url(images/1.gif), pointer;}2、列表样式
2.1、定义项目符号类型
使用CSS3的list-style-type属性可以定义列表项目符号的类型也可以取消项目符号该属性取值说明如下表所示 使用CSS3的list-style-position属性可以定义项目符号的显示位置。该属性取值包括outside和inside其中outside表示把项目符号显示在列表项的文本行以外列表符号默认显示为outsideinside表示把项目符号显示在列表项文本行以内。
注意如果要清除列表项目的缩进显示样式可以使用以下样式实现 ul, ol {padding: 0;margin: 0;}【示例】定义项目符号显示为空心圆并位于列表行内部显示如下图所示 body {/* 清除页边距 */margin: 0; /* 清除边界 */padding: 0; /* 清除补白 */}ul {/* 列表基本样式 */list-style-type: circle; /* 空心圆符号*/list-style-position: inside; /* 显示在里面 */}提示在定义列表项目符号样式时应注意以下两点。
不同浏览器对于项目符号的解析效果以及其显示位置略有不同。如果要兼容不同浏览器的显示效果应关注这些差异。项目符号显示在里面和外面会影响项目符号与列表文本之间的距离同时影响列表项的缩进效果。不同浏览器在解析时会存在差异。
2.2、定义项目符号图像
使用CSS3的list-style-image属性可以自定义项目符号。该属性允许指定一个外部图标文件以此满足个性化设计需求。用法如下所示 list-style-imagenone | url默认值为none。
【示例】设计内部样式表增加自定义项目符号设计项目符号为外部图标bullet_main_02.gif效果如下图所示 ul {/* 列表基本样式 */list-style-type: circle; /* 空心圆符号*/list-style-position: inside; /* 显示在里面 */list-style-image: url(images/bullet_main_02.gif); /* 自定义列表项目符号 */}提示当同时定义项目符号类型和自定义项目符号时自定义项目符号将覆盖默认的符号类型。但是如果list-style-type属性值为none或指定外部图标文件不存在时则list-style-type属性值有效。
2.3、模拟项目符号
使用CSS3的background属性可以模拟列表项目的符号实现方法如下 【设计思路】 第1步先使用list-style-type:none隐藏列表的默认项目符号。 第2步使用background属性为列表项目定义背景图像精确定位其显示位置。 第3步使用padding-left属性为列表项目定义左侧空白避免背景图像被项目文本遮盖。
【示例】先清除列表的默认项目符号然后为项目列表定义背景图像并定位到左侧垂直居中的位置为了避免列表文本覆盖背景图像定义左侧补白为一个字符宽度这样就可以把列表信息向右缩进显示 ul {/* 清除列默认样式 */list-style-type: none;padding: 0;margin: 0;}li {/* 定义列表项目的样式 */background-image: url(images/bullet_sarrow.gif); /* 定义背景图像 */background-position: left center; /* 精确定位背景图像的位置 */background-repeat: no-repeat; /* 禁止背景图像平铺显示 */padding-left: 1em; /* 为背景图像挤出空白区域 */}
