css+html实现自适应宽度的菜单学习

来源：互联网发布：神庙升级数据编辑：程序博客网时间：2024/05/21 08:35

本文是利用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>

0 0