摘要: 最终效果所用素材:html页面代码:<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script><link href="SpryAssets/Spr 阅读全文
posted @ 2011-11-07 09:09 祈祐 阅读(402) 评论(0) 推荐(0) 编辑
摘要: 简单选项卡制作CSS页面代码:body{margin:10px;width:600px;}#content{border-left:1px solid #11a3ff;border-right:1px solid #11a3ff;border-bottom:1px solid #11a3ff;padding:5px;font-size:12px;}ul#tabnav{list-style-type:none;margin:0;padding-left:0;padding-bottom:23px;border-bottom:1px solid #11a3ff;font:bold 12px Ver 阅读全文
posted @ 2011-11-07 08:53 祈祐 阅读(152) 评论(0) 推荐(0) 编辑
摘要: 效果图 素材 <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>#menu ul{ font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:0 0 0 阅读全文
posted @ 2011-10-25 14:26 祈祐 阅读(155) 评论(0) 推荐(0) 编辑
摘要: 效果图<style>#bianji{ width:120px; /*宽*/ padding:8px; /*内间距*/ margin:0 auto; /**/ background-color:#ccc; /*背景颜色*/ font-size:0.8em; /*字体大小*/ text-align:left; /*文字左对齐*/}#bianji a:link,a:visited{ color:#000; /*文字颜色设置,黑色*/ background-color:#fff; /**/ display:block; /*块级元素*/ text-decoration:none; /*无下 阅读全文
posted @ 2011-10-25 13:20 祈祐 阅读(104) 评论(0) 推荐(0) 编辑
摘要: <style>#lx{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}#lx a,#menu a:visited{ text-decoration:none; /*文字无下划线*/ text-align:center; /*文字居中*/ color:#fff; /*文字颜色*/ display:block; /*display,框的类型;block,此元素将显示为块级元素,此元素前后会带有换行符。*/ width:10em; padding:0.25em; /*margin:0 auto;*/ background 阅读全文
posted @ 2011-09-29 10:04 祈祐 阅读(200) 评论(0) 推荐(0) 编辑
摘要: a:link 超链接的普通样式,即正常浏览样式a:visited 被点击过的超链接样式a:hover 鼠标指针经过超链接的样式a:active 在超链接上单击时,即“当前激活”时,超链接的样式例1<style>a:link,a:visited{ text-decoration:none; /*原样式与点击后样式无下划线*/}a:hover,a:active{ text-decoration:underline; /*鼠标经过与单击时有下划线*/}</style>例2 背景立体阴影效果设置字体、颜色、大小、边距等表框色,原样式与点击后样式上左白灰色,右下黑灰色;鼠标经过与 阅读全文
posted @ 2011-09-26 10:42 祈祐 阅读(1285) 评论(0) 推荐(0) 编辑