CSS DIV制作梯形状的不规则网站导航

2016-03-24 网页设计跟版网

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。先看图（图片只是大致做了一下）效果展示：运行代

前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。

先看图（图片只是大致做了一下）

效果展示：
运行代码框

<!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-8" />

<meta name="author" content="Linxz" />

<title>无标题文档</title>

<style type="text/css">

* {margin:0;padding:0;font:normal 12px/25px "宋体";}

body {background:#f8f8f8;}

ul {list-style:none;width:300px;height:25px;margin:20px auto;}

li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}

a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(https://img.genban.org/allimg/c160324/145X34BJ14F-3XY.gif) center center no-repeat;}

a:hover {color:#000;background:url(/imgups/allimg/c160324/145X34BG43F-210I.gif) 0 0 no-repeat;width:86px;position:relative;}

</style>

</head>

<body>

<ul>

<li><a href="#" title="菜单">菜单</a></li>

<li><a href="#" title="菜单">菜单</a></li>

<li><a href="#" title="菜单">菜单</a></li>

</ul>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

上一页12 下一页

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

上一篇：语义化H1标签下一篇：WEB标准教程:功能相似的标签的用法

相关文档推荐

让网页标签页头部有新消息提醒和Title标题文字滚动显示效果

demo展示1： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / tit

JQuery获取文章内容页自适应高度，优化界面外观

如何用js得到当前页面的url信息方法(JS获取当前网址信息)

设置或获取对象指定的文件名或路径。alert(window.location.pathname

分享js跳转页面方法

spanid=tiao"

jquery对单位进行换算的“笨”方法

DEDE项目上编辑软件大小(单位换算)：$(doc

JS简单页面倒计时转跳

script language="javascript"&g

栏目导航

html教程 css教程前端开发 cms教程 seo优化网页设计服务器数据库平面设计电脑教程编程教程互联网移动开发 php编程 java编程建站技巧 Python编程

最新文章

热门文章

热门标签

织梦资讯网织梦模板 dede 外语学校织梦鬼故事竞价网站源码竞价培训网门户网站织梦二次开发织梦笑话网 dedecms笑话网织梦源码网站建设搞笑图片织梦教程旅游网站源码织梦旅游网学校培训 html5 企业织梦源码医院源码后台样式移动营销页整形医院大学医院新手建站客服代码洗衣机维修企业网站淘宝客导航菜单教育网站学校源码装修网站装修模板美容整形女性健康妈妈网机械源码建站公司珠宝首饰苹果网站手机资讯美女图片织梦模版打包妇科源码安卓市场源码男性时尚网健康之家 app应用网站笑话网站下载站美女图片网中医院网站家装网站源码 QQ网站标牌网站魔兽世界网淘宝客源码 YY网站源码别墅设计网站服装搭配网宝宝起名网站长网站婚庆网站脑科医院源码笑话源码肝胆医院意外怀孕源码工作室