Maison > interface Web > tutoriel HTML > css+html实现自适应宽度的菜单学习_html/css_WEB-ITnose

css+html实现自适应宽度的菜单学习_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:59:17
original
1167 Les gens l'ont consulté

本文是利用css和html实现自适应于文本长度菜单。

实现后的效果图,如下:






实现代码如下:


      <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>           <p><a href="#"><span>免费注册</span></a>     <a href="#"><span>登入</span></a>     <a href="#"><span>在网上开店</span></a></p>  
Copier après la connexion




























































Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal