您的位置：首页 > Web前端 > CSS

css 链接变颜色（加边框设置样式）

2016-05-14 21:29 706 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

.wrap{
width:90%;
height:1000px;
border:2px solid #CCC;
margin:0 auto;

}

.wrap_01{
height:900px;
margin:0px 10px 0px 10px;
background-color:#EFEFEF;

}

.footer{
height:40px;
background-color:#B6B6B6;
margin:10px 10px;

}

ul{
margin:0 auto;
padding-top:30px;
list-style-type:none;

}

li{
float:left;
margin-right:69.5px; <!--这里用外边距--!>

}

a{
text-decoration:none;
font-size:20px;
color:#777777;
font-family: Georgia, "Times New Roman", Times, serif

}

.wrap_01 ul #h:hover{
border-bottom:3px solid #F00;

}

.wrap_01 ul #j:hover{
border-bottom:3px solid #F00;

}

.wrap_01 ul #s:hover{
border-bottom:3px solid #F00;

}

.wrap_01 ul #a:hover{
border-bottom:3px solid #F00;

}

.wrap_01 ul #x:hover{
border-bottom:3px solid #F00;

}

.wrap_01 ul #w:hover{
border-bottom:3px solid #F00;

}

.wrap_01 ul #web:hover{
border-bottom:3px solid #F00;

}

.bottom{
width:100%;
height:50px;
position:fixed;
bottom:0;
background-color:#603;

</style>

</head>

<body>

<div class="wrap">

<div class="wrap_01">

<ul>

<li id="h"><a href=#>HTML/CSS</a></li>

<li id="j"><a href=#>JavaScript</a></li>

<li id="s"><a href=#>Server Side</a></li>

<li id="a"><a href=#>ASP.NET</a></li>

<li id="x"><a href=#>XML</a></li>

<li id="w"><a href=#>Web Services</a></li>

<li id="web"><a href=#>Web Building</a></li>

</ul>

</div>

<div class="footer">

</div>
</div>
<div class="bottom">
<a href=#>123</a>

</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

css 链接变颜色 （加边框设置样式）

css 链接变颜色（加边框设置样式）