Rumah > hujung hadapan web > html tutorial > css+html实现自适应宽度的菜单学习_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:59:17
asal
1166 orang telah melayarinya

本文是利用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>  
Salin selepas log masuk




























































Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan