制作无须表格的表单

最新推荐文章于 2024-08-12 16:01:18 发布

Alex_sym

最新推荐文章于 2024-08-12 16:01:18 发布

阅读量476

点赞数

分类专栏： HTML+CSS 文章标签： xhtml 相册 html 音乐

本文链接：https://blog.csdn.net/alex_sym/article/details/7607463

版权

HTML+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用项目列表<li>标签制作导航菜单


效果图：




<!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>Untitled Document</title>
<style type="text/css">
#box{
	width:120px;
	font-size:12px;
	font-family:"宋体";
}
#box ul{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
#box li{
	border-bottom:#ed9f9f solid 1px; /*添加下边框*/
}
#box li a{
	display:block; /*通过该语句，超链接被设置成块元素，当鼠标移动到该块的任何部分时都会被激活*/
	padding:5px 5px 5px 8px;
	text-decoration:none;
	border-left:12px solid #711515;
	border-right:1px solid #711515;
}
#box li a:link{
	background-color:#c11136;
	color:#ffffff;
}
#box li a:visited{
	background-color:#c11136;
	color:#ffffff;
}
#box li a:hover{
	background-color:#990020;
	color:#ffff00;
}
</style>

</head>

<body>
<div id="box">
<ul>
	<li><a href="#">首页</a></li>
    <li><a href="#">音乐MP3</a></li>
    <li><a href="#">个人相册</a></li>
    <li><a href="#">我的博客</a></li>
    <li><a href="#">我的空间</a></li>
</ul>
</div>
</body>
</html>

Alex_sym

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作无须表格的表单

利用项目列表标签制作导航菜单效果图：Untitled Document#box{ width:120px; font-size:12px; font-family:"宋体";}#box ul{ margin:0px; padding:0px; list-style-type:none;}#box li{ border-bottom:#ed9
复制链接

扫一扫

专栏目录