Home > Web Front-end > HTML Tutorial > css html implements adaptive width menu learning_html/css_WEB-ITnose

css html implements adaptive width menu learning_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:59:17
Original
1167 people have browsed it

This article uses css and html to implement an adaptive text length menu.

The rendering after implementation is as follows:






The implementation code is as follows:


<!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>
Copy after login




























































Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template