CSS完成菜单情况自融入宽度的方式

日期:2021-03-04 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

本文案例讲述了CSS完成菜单情况自融入宽度的方式。共享给大伙儿供大伙儿参照。实际以下:

以便让菜单看上去更好看1些,大家都喜爱用照片去装饰菜单的情况,假如是标准照片,那很好完成,可是假如菜单的情况是不规律的,大家应当怎样让它的宽度伴随着菜单的文本是多少而全自动融入宽度转变呢?根据这个菜单案例,你可能搞清楚在其中的缘由。

先看来运作实际效果截图:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/css-auto-width-bg-pic-demo/

实际编码以下:


拷贝编码
编码以下:

<!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=utf⑻" />
<title>菜单情况自融入</title>
<style type="text/css">
<!--
.load {
background: url(images/9_o.png) no-repeat right;
position: absolute;margin-left:5px;
}
.load span {
height: 66px;
background: url(images/9_o.png) no-repeat;
display: block;
font-size: 14px;
line-height: 66px;
font-weight: bold;
padding-left: 115px;
margin-right: 15px;
margin-left: ⑸px;
}
-->
</style>
</head>
<body>
<div class="load"><span>脚本制作之家网站</span></div>
<div class="load" style="top:100px"><span>出示全新的互联网程序编写、脚本制作程序编写、网页页面制做、网页页面设计方案、网页页面殊效。</span></div>
</body>
</html>

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

上一篇:CSS3完成曲线图黑影和翘边黑影 返回下一篇:没有了