超链接设置

来源：互联网发布：淘宝网大童夏装编辑：程序博客网时间：2024/05/22 08:16

如何设置如下的样式：

设计思路：

1：先利用UL和Li对整体进行布局，设置li有下划线。

2，设置连接a的属性，使a模块以块的方式进行布局。

3，改变鼠标经过超链接时，字体的颜色和样式。

具体代码如下：

<html><head><title>无需表格的菜单</title><mce:style></mce:style><style mce_bogus="1">body{background-color:#ffdee0;}#navigation {width:200px;font-family:Arial;}#navigation ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation li {border-bottom:1px solid #ED9F9F;/* 添加下划线 */}#navigation li a{display:block;/* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515;/* 左边的粗红边 */border-right:1px solid #711515;/* 右侧阴影 */}#navigation li a:link, #navigation li a:visited{background-color:#c11136;color:#FFFFFF;}#navigation li a:hover{/* 鼠标经过时 */background-color:#990020;/* 改变背景色 */color:#ffff00;/* 改变文字颜色 */}</style></head><body><div id="navigation"><ul><li><a href="#" mce_href="#">Home</a></li><li><a href="#" mce_href="#">News</a></li><li><a href="#" mce_href="#">Sports</a></li><li><a href="#" mce_href="#">Weather</a></li><li><a href="#" mce_href="#">Contact Me</a></li></ul></div></body></html>

应用：可以参照此方法设置多种样式的超链接导航条。

有待解决：如何设这横向排版？