-
css虚线的艺术
2009-06-15 22:27/点击数()
一些朋友在设计的时候经常被虚线的css困扰,下面由我带大家一起欣赏css织出来的需要编写的艺术. 各处虚线的css div /div style type=text/css .photo .infoText{border-top:1px dashed #f00;border-bottom:1px dashed #f00;} 形象照片下虚线样式，其中border-
一些朋友在设计的时候经常被虚线的css困扰,下面由我带大家一起欣赏css织出来的需要编写的艺术.
各处虚线的css
<div> </div>
<style type="text/css">
.photo .infoText{border-top:1px dashed #f00;border-bottom:1px dashed #f00;} —形象照片下虚线样式，其中border-top表示上虚线，border-bottom表示下虚线
.links .dashed{border-bottom:1px dashed #f00;} —侧栏面板部分虚线样式
.feeds .dashed{border-bottom:1px dashed #f00;} —正文文章部分虚线样式
.aList .solid{border-bottom:1px dashed #f00 !important;} —文章列表下各文章标题间的虚线样式
.serial .total{border-top:1px dashed #f00 !important;border-bottom:1px dashed #f00 !important;} —文章专辑下“当前连载文章篇数：** 篇”上下虚线的样式，其中border-top表示上虚线，border-bottom表示下虚线
.gbook .title{border-top:1px dashed #f00 !important;} —“我的留言本”顶部虚线样式
.gbook .dashed{border-top: 1px dashed #f00 !important;} —“我的留言本”各留言间的虚线样式
.gbook .login div{border-top:1px dashed #f00 !important;} —“我的留言本”写留言区域上面那条虚线样式
.gbook .postFSet{border:1px dashed #f00 !important;} —“我的留言本”下“给我留言”四个字字所在的大虚线框以及“点歌给朋友”几个字所在的虚线框
.dashed{border-bottom:1px dashed #f00 !important;} —侧栏面板部分和正文文章部分虚线样式，另外用此代码“我的留言本”各留言间会多出一条分割线
</style>超链接变色的css
<div> </div><style type="text/css">
.banner .link a:hover{color:#f00;} —题图处的博客地址、复制、收藏本页
.menu a:hover{color:#f00;} —菜单部分“HOME、登录、注册、搜索、帮助”
.menu .text a:hover{color:#f00;} —菜单部分“登录、注册、搜索、帮助”，无HOME
.menu .home a:hover{color:#f00;} —菜单部分“HOME”
.add a:hover{color:#f00;} —右上角“发表文章”四个字
.feeds .title a:hover{color:#f00;} —正文文章标题
.feeds .function a:hover{color:#f00;} —正文阅读处“固定链接、评论、引用、阅读”
.feeds .text a:hover{color:#f00;} —点击此处查看源文
.feeds .page a:hover{color:#f00;} —正文底部翻页处文字“2 3 4 5 6 >>”
.photo .infoText a:hover{color:#f00;} —形象照片处文字（如γ蚊ж子ま的BLOG）
.links td a:hover{color:#f00;} —活力地带处各链接，我的文章分类链接，最新文章列表链接，友情链接以及评论和留言人的名字，总的来说就是侧栏所有链接
#zone你的博客ID a:hover{color:#f00;} —活力地带处各链接，也就是“个人首页，控制面板，我的文章，我的相册，给我留言”这几个字，所谓博客ID就是你的博客未升级前博客地址后面的那一连串数字
#labelFM000011 a:hover{color:#f00;} —博客计数器下面的“订阅到RSS阅读器”
.gbook a:hover{color:#f00!important;} —留言本下留言者名字
.gbook .page a:hover{color:#f00!important;} —留言本翻页处“2 3 4 5 6 >>”
.gbook .text a:hover{color:#f00!important;} —留言内容中带链接的文字
.aList .list a:hover{color:#f00!important;} —文章列表下文章标题
.aList .page a:hover{color:#f00!important;} —文章列表翻页处“2 3 4 5 6 >>”
.serial .list a:hover{color:#f00!important;} —我的文章专集下文章标题
.serial .outline a{color:#f00!important} —我的文章专集下专集简介中带链接的文字
.serial table a:hover{color:#f00!important;} —我的文章专集下文章标题及简介中带链接的文字
</style>
幸福工作室(www.xingfu880.com)
上一篇：完美制作全兼容的纯CSS级联菜单
