css+html实现自适应宽度的菜单学习
16lz
2021-01-22
本文是利用css和html实现自适应于文本长度菜单。
实现后的效果图,如下:
实现代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu4.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
a{
display: block;
height:38px;
/* width:107px; */
/* line-height: 2; */
line-height: 38px;
text-align: center;
background: url(./c2.jpg) no-repeat 0px 0px;
color:#d84700;
font-size: 14px;
weight:bold;
text-decoration: none;
padding-left: 18px;
float:left;
margin:5px;
}
a span{
display: block;
background: url(./c2.jpg) no-repeat right 0px;
padding-right: 20px;
}
a:hover{
background: url(./c2.jpg) no-repeat 0px -38px;
}
a:hover span{
background: url(./c2.jpg) no-repeat right -38px;
}
</style>
</head>
<body>
<p><a href="#"><span>免费注册</span></a>
<a href="#"><span>登入</span></a>
<a href="#"><span>在网上开店</span></a></p>
</body>
</html>
更多相关文章
- MySQL中varchar最大长度是多少?
- mysql——数据库设计中int与varchar中的长度含义
- mysqli_query中的最大查询长度。
- WebKit "拒绝设置不安全的标题'内容长度' "
- 获取JavaScript数组元素的最大长度
- 数组与矩阵---需要排序的最短子数组长度
- python实现求最长子串长度
- 在不知道序列长度的情况下,在Python中展开多个赋值
- 可变序列长度数据的分类