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

html+css实现垂直菜单样式

2018-03-01 00:00 246 查看
<!DOCTYPE html>
<html>
<head>
<meta name="Author" content="微普科技http://www.wiipu.com"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html+css实现左侧菜单样式</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul{
width: 200px;

}
li{
width: 200px;
height: 50px;
border: 2px solid #888;
color: #101a0a;
text-align: right;
padding-right: 20px;

}
li:hover{
font-weight: bold;
color: #bd002a;
border: 1px solid #bd002a;

}

</style>
</head>
<body>
<!--提示:使用html+css完成图示左侧垂直菜单样式，
宽为200px,每条高为50px,字体颜色为#101a0a，
右边框为2px,边框颜色为#888,边框与文字间距20px,
鼠标移入时字体加粗，字体和边框颜色为#bd002a-->
<ul id="zmkt">
<li>首页</li>
<li>联系方式</li>
<li>地理位置</li>
<li>关于我们的zmkf</li>

</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html+css　菜单
相关文章推荐
新的分享
章节导航