css画按钮

最新推荐文章于 2023-10-09 18:06:45 发布

Alinaxz

最新推荐文章于 2023-10-09 18:06:45 发布

阅读量1.2k

点赞数

分类专栏：学习笔记 css 文章标签： css xhtml html

本文链接：https://blog.csdn.net/Alinaxz/article/details/6602311

版权

学习笔记同时被 2 个专栏收录

68 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS制作时尚navigation</title>
<style type="text/css">
body {
background-color:#FCC;
color:#ffffff;
font-size:14px;
}
#navigation {
width:150px;
font-family:Arial;
}
#navigation ul {
list-style-type:none;
margin:0px;
padding:0px;
}
#navigation li {
border-right:2px solid #FC0;
}
#navigation li a {
display:block;
padding:5px 5px 5px 2px;
text-decoration:none;      /*去掉下划线*/
border-right:3px solid #690512;
border-bottom:3px solid #690512;
border-left:3px solid #afafaf;
border-top:3px solid #ffffff;
}
#navigation li a:link,#navigation li a:visited {
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover {
background-color:#FF0;
color:#F00;
}
</style>
</head>

<body>
<div id=navigation>
<ul>
    <li><a href="#">Homepage</a></li>
    <li><a href="#">Myblog</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">My music</a></li>
    <li><a href="#">My Diary</a></li>
     <li><a href="#">Play</a></li>
    <li><a href="#">Learn</a></li>
    <li><a href="#">Sing</a></li>
</ul>
</div>
</body>
</html>