CSS根据单张情况图完成自融入宽度的圆角菜单实

日期:2020-12-12 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

本文案例讲述了CSS根据单张情况图完成自融入宽度的圆角菜单实际效果编码。共享给大伙儿供大伙儿参照。实际以下:

这是1款根据单张情况照片完成的CSS圆角菜单,菜单项的情况可自融入宽度,当菜单项内的文本超过预订宽度时,其实不会将文本掩藏掉,而情况全自动加宽,以融入文本的必须,设计方案的很好看,也很好用,学习培训CSS的盆友也可参照学习培训1下。

运作实际效果截图以下:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/css-single-bgpic-cicle-button-menu-codes/

实际编码以下:


拷贝编码
编码以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单张情况图完成自融入宽度的CSS圆角菜单</title>
<style type="text/css">
ul.nav{list-style: none;clear: left;float: left;border-bottom:2px solid #ed6d00;margin: 10px 0;padding: 0px;}
ul.nav li{float:left;line-height:25px;}
ul.nav li a{float: left;font-size:12px;color: #000;text-decoration: none;padding-right:20px;margin-right: 8px;}
ul.nav li a span{float: left;display: block;height: 25px;padding-right: 20px;}
ul.nav li a.current {background: url(images/css-yuanjiao-nav-bg.jpg) no-repeat top right;color: #fff;}
ul.nav li a.current span {background: url(images/css-yuanjiao-nav-bg.jpg) no-repeat top left;}
ul.nav li a:hover {background: url(images/css-yuanjiao-nav-bg.jpg) no-repeat top right;color: #fff;}
ul.nav li a:hover span {background: url(images/css-yuanjiao-nav-bg.jpg) no-repeat top left;}
.credits {color: #999;font: 14px Times;position:absolute;top:400px;left:10px;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#" title="连接文字" class="current"><span></span>连接文字</a></li>
<li><a href="#" title="自融入宽度"><span></span>情况能够自融入宽度</a></li>
<li><a href="#" title="纯CSS完成"><span></span>纯CSS完成</a></li>
<li><a href="#" title="您的连接"><span></span>您的连接</a></li>
<li><a href="#" title="企业网站建设"><span></span>企业网站建设</a></li>
</ul>
</body>
</html>

期待本文所述对大伙儿的css网页页面设计方案有一定的协助。